Question

I am creating a website using MVC3/C#/ASP.NET which contains a view page that will show a JQuery Modal type popup (the implementation is a bit different than a traditional modal window, but the functionality is quite similar). Currently I have the markup that will go into the modal window stored as a partial view (with a separate associated model).

I was doing a little research on JQuery modal windows, and it seems a lot of the examples I am seeing online are using a single view with a hidden div, and the modal window is just populated with the markup from inside the hidden div. In these examples there is only one view (the main view for the page), and the model data behind the hidden div’s input fields (etc) are just stored in the model associated with the main view (as opposed to having a separate view and model for the markup I want to display, as would be the case if I were to use a partial view implementation scheme).

I was wondering if anyone can give some insight as to which method is preferred or what the standard practice is (if any) on this. Is this just a matter of personal preference? Is one way more efficient than the other?

Which way should I be doing this:

• A Partial View for the modal window markup with a separate view/model
• A Hidden Div within the existing view/model

Note: I am working as part of a development team, so keeping things aligned with standard practice is very important.

Any thoughts on this matter would be greatly appreciated,
Thanks

Edit: I asked my fellow developers who are on the same project how they were doing things similar to this. It looks like no matter how much I debate this issue with them, they all seem to agree that the “best” and “most efficient way” to do this is to render partial views, each with a separate model. I really do not understand why they all think that this method is any more efficient than using hidden divs, but since I am currently “the new guy” I did not push the issue too much and basically just pretended to agree with the point they were trying to make about efficiency.

TL;DR : I am now using partial views, whether I like it or not. I would still like to hear some more opinions on this though.

Answer 1

If you use the partial view for Modal Dialog, the partial view will remain inside page HMTL DOM even if the modal is closed. I suggest to use separate views for modal pop up and call it using ajax methods.

Partial view method:

<div id="popup_window" title="Pop up title" >

<% Html.RenderPartial("_partialviewname", Model); %>

</div>

Next method using ajax

Html:

<div id="popup_window" title="Pop up title" > <!-- div to render the popup -->
</div>



<a onclick="javascript:ShowPopUp();" >Click here</a> <!--pop up is given by this link-->

Ajax function part

function ShowPopup(

$("#popup_window").dialog({
                autoOpen: false,
                modal: true,
                resizable: false,
               // height: 'auto',

                //width: 565
            });

     $.ajax({

                    type: 'GET',
                    url: '/controller/action', //action to return view 
                    cache: false,
                    success: function (data) {
                        $("#popup_window").empty();
                        $("#popup_window").append(data);





                    }
                });

                $(""#popup_window").dialog("open");
}