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

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
});
mikha eAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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
       
});
0
mikha eAuthor 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?
0
Kelvin McDanielSr. DeveloperCommented:
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.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Kelvin McDanielSr. DeveloperCommented:
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.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
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

0
mikha eAuthor 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.
0
Kelvin McDanielSr. DeveloperCommented:
@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.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
mikha eAuthor Commented:
thanks @Kelvin and @Scott.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.