Best way to display a JQuery Dialog with ASP.NET MVC data bound View Model

Question

Imagine a simple page with a list of users. Selecting a user displays a JQuery modal dialog with various details that can be edited. Something like:

@model IEnumerable<UserRole>


@if (Model.Any())
{
    foreach (var user in Model.Users)
    {
      <a href="#" id="user-details-link" onclick="userDetailsOpen(@user.id)">Details</a>
    }
}

I'll have more specific examples through the post but what I'm looking for is a general 'experienced' opinion on what's the best way to load and display a Model bound Partial View as a JQuery dialog box.

I know how to do it code-wise but I think there must be a better way. I believe the common known ways to do it are not very efficient.

My rule and what I would like is for all code associated to a partial view popup to be kept in that partial view. I would like my popup to be structured something like the following UserDetails partial view:

@model User
<script src="@Url.Content("~/Scripts/UserScripts.js")" type="text/javascript"></script>

<div id="placeholder">

...The modal dialog content...

</div>

This way when another developer gets to look at it one will easily be able to piece it all together.

So as far as I know there are two ways to display a partial view as a Dialog and I have a problem with both of them:

1) Use the Partial view structure I displayed above, pre-load the div dialog from the master page by using @Html.Partial("UserDetails", new User) and then, when I need the dialog to be displayed populated with user data execute an Ajax call to an ActionMethod that will re-populate the partial view's model with needed data and re-render it with JQuery .html() method.

Once the partial view/dialog is loaded with data I simply display it with JQuery .dialog('open')

Great, this works but there are a few problems with this logic:

a) I'm loading the same partial view twice ( first blank , second loaded with data )

b) Content of the Placeholder DIV flashes on the screen when the master page is being loaded. Setting DIV to display:none won't work here before when .html() method triggers it will load the partial view with that display:none tag in it and the popup will be presented as a blank window.

c) When the page is requested, if large, it takes some time for the page to show

2) Instead of having in the partial View I can place a blank <div id="placeholder"></div> on the master page and then load the partial view content into that div with ajax or as I'm doing it now with JQuery :

var url = "/MyController/MyAction/" + Id;
$("#palceholder").load(url).dialog('open'); 

Again, it works but there are a few big problems I see with this way:

a) It breaks my "keeping it all together rule". When looking at , without some searching around another developer will have no idea what partial view will be loaded in this Div.

b) All Javascripts for the partial view popup will now need to be referenced in the master page, instead of a the partial view itself.

c) When the page is requested, if large, it takes some time for the page to show

The bottom line question is what do you think is the best way to display the model-bound populated partial view as a Modal Dialog while keeping the code organized ?

My perfect scenario would be to pre-load all partial view fields and then, when the request is made for the dialog to show populated with Data somehow a model bind pre-loaded partial view to the new JSon set of data, without loading/re-loading all partial view fields. Is there a way ?

PS One of the things I tried is to pre-load my partial view fields with @Html.Partial("UserDetails", new User) and then use JQuery .replaceWith() method to replace Div contents but I couldn't get it to work unfortunately.

Any thoughts are appreciated. No ideas as are bad ideas. Thanks.

Answer 1

Nothing wrong with having part of your code load in partial, and then just updating the partial container with a return from action.

<div id="ParitalContainer">
    @Html.Partial("_PartialView", Model.PartialModel)
</div>

Or, you can consider a scenario to work with JSON data. Namely, have all your data loaded async by calling a $.ajax or $.getJSON . Your action result would return JsonResult and then you can just update the elements you want. Furthermore, you could look into using Knockout.js if you want more robust solution. This is what I would do if I wanted "keeping it all together" approach.