what is the best approach to convert/load current existing aspx page in a bootstrap Modal

mikha
mikha used Ask the Experts™
on
what is a best approach to this -

I am trying to open an existing aspx page , with few controls which  includes html controls line input, select ,  user controls ( ascx) and also custom third party controls like multi select dropdown.

thing  I have tried is to make an ajax call, shown below. I don't know if this is a good approach.

or is it better to, try to convert the aspx page to a ascx page and then load it to the Modal popup.


$.ajax({
       //make a get call to aspx page.
       //on success, append to the modal content div
});
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
You have it correct, except remember to open the modal once you inject the data

$.ajax({
       //make a get call to aspx page.
       //on success, append to the modal content div, then open the modal
       
});

Author

Commented:
@Scott Fell - thanks for your comment.

- I am debating on - how  to inject the data part.

right now my existing aspx page has lot of controls , including another ascx control loaded inside it, with multiple custom dropdown ( select2 js library - for multiple select ) . on the code behind cs page , it has all the functions needed to populate these controls.

so how to inject the data , to each individual controls .

1. for dropdowns, I can make individual ajax calls to return json data and then append it to the control.

2. embedded ascx control has its own set of controls, how to load all of the data in this.
as this is a user control (ascx ) , it doesn't need any additional changes and data will load as is , without any additional changes?

3. and for the save ,  how would I send back the data for all these controls?
As @Scott Fell said, for the scenario you've painted you've already got it right. Trying to get this to work using only Custom User Controls will be an interesting exercise... but ultimately a waste of time and effort.

As long as you're on the same domain (which you are) you won't have problems getting the content to show; simply GET or POST to the page address like you normally would and the result of that call will be the rendered page HTML. The one thing you might need to consider in your strategy is that Bootstrap modals typically aren't intended to be full HTML pages... meaning that you might need to strip the beginning and ending HTML tags, as well as the entire HEAD section of the incoming content. If you do end up having to do that you'll want to include the scripts (mentioned in your other post) from the incoming content to the page where the modal lives; that way they will be available when they're needed AND you'll avoid possible script duplications.
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Regarding submitting the data, try using the normal page model by checking the Request.Form collection to see if those fields and data are present. If not they are not then I suggest you convert that form to send an ajax POST to a custom handler (.ashx) and deal with it that way.
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

Commented:
I am not a .net developer so I can't speak to controls. You do have to separate the back end though.

Your modal will be hidden without any content. As one of the Bootstrap examples below, you simply have one modal and your jquery code will parse the response to your aspx page that is called via ajax, then parse the response and finally inject data to the title and body.
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel"><!-- title content here --></h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <!-- body content here -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Open in new window

Author

Commented:
thanks you for taking the time - @Scott Fell and @Kelvin McDaniel .  I appreciate the help.

@Kelvin - I was leaning towards ashx ( custom handler ) .  I wanted to see, if I can reuse any of the  existing code. sounds like , trying to make it work with current aspx and ascx.cs code will not work.
to summarize,  I will have to

1. create html mark up
2. inject it with data, via multiple ajax calls utilizing ashx handler. I guess then, all the page life cycle functions and event handler function
  code that exists in aspx.cs  and ascx.cs  pages won't or can't be used in the Modal.
@mikha e to keep it simple I suggest creating a separate handler for each public and discrete function you're trying to access in the WebForm codebehind. That should make things a bit simpler and still give you access to the functionality that you need. Yes, each of these will need to be accessed via their own .ajax call.

You might also want to consider using the Microsoft Ajax Framework (or whatever they're calling it or its successor these days). That will give you the ability to use the exact same .aspx.cs you're using now and update the markup on its corresponding .aspx page with UpdatePanels that
will render updates to only those sections of the page. It's a bit of a kludge-y dance but can be made to work if you get the order of operations and timing correct. You'll also have become intimately familiar with the Page Lifecycle.

Author

Commented:
thanks @Kelvin and @Scott.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial