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
});
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
});
ASKER
@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?
- 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.
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.
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.
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.
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">×</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>ASKER
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.
@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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks @Kelvin and @Scott.
$.ajax({
//make a get call to aspx page.
//on success, append to the modal content div, then open the modal
});