javascript/jquery modal popup dialog MVC 4 / render partial view

Question

I have been using the DevExpress PopupControl. They look nice and pretty but they do not display the scrollbars on iOS/Android devices. So I want to come up with an alternative. My immediate use is just for displaying a partial view, read only and a close button.

I am not familiar with jquery so I am having a hard time piecing together all the different posts about this topic.

My index.cshtml is a portal with many different partial views. One of the partial views is a list of clients. The client name is a link to client detail. This is where I need the popup dialog.

Partial view with client list (note the link calls a javascript function passing the ID I want to view:

<table style="text-align: left;">
    @if ((Model != null) && (Model.Items != null))
    {
        foreach (WebMVC.Models.VisitDetails p in Model.Items)
        {                       
            sTime = p.StartTime.ToString("MM/dd") + " " + p.StartTime.ToShortTimeString().PadLeft(8,'_') + " - " + p.EndTime.ToShortTimeString().PadLeft(8,'_');

            <tr>
                <td style="width: auto">
                    @Html.DevExpress().HyperLink(
                        settings =>
                        {
                            settings.Name = "indexHyperLinkClient" + p.VisitID.ToString();
                            settings.Properties.Text = @p.NameNumZone;
                            settings.Properties.ClientSideEvents.Click = 
                                string.Format("function(s, e) {{ MethodClient('{0}'); }}", p.Account);
                        }
                    ).GetHtml()
                </td>
            </tr>
        }
    }
</table>

current javascript in index.cshtml that handles the popup:

<script type="text/javascript">
    var _clientId;
    function MethodClient(clientid) {
        _clientId = clientid;
        popClient.PerformCallback();
        popClient.Show();
    }

    function OnBeginCallbackClient(s, e) {
        e.customArgs["clientid"] = _clientId;
    }
<script type="text/javascript">

popClient is the current dialog that I want to replace. I would like the dialog to be a specific height regardless of the content size.

example of the partial view to be displayed in the dialog:

@model WebMVC.Models.ClientDetail

@{
    DateTime now = DateTime.Today;
    int age = now.Year - Model.Birthdate.Year;
    if (Model.Birthdate > now.AddYears(-age))
    {
        age--;
    }

    string sBirthdate = Model.Birthdate.ToShortDateString() + "  (Age: " + age + ")";
}

<div id="contentDiv">
    <span class="display-label">@Html.DisplayNameFor(model => model.NameNumZone):</span>
    <span class="display-field">@Html.DisplayFor(model => model.NameNumZone)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Sex):</span>
    <span class="display-field">@Html.DisplayFor(model => model.Sex)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Birthdate):</span>
    <span class="display-field">@Html.DisplayFor(model => @sBirthdate)</span>
    <br />

    <span class="display-label">@Html.DisplayNameFor(model => model.Address):</span>
    <span class="display-field">@Html.DisplayFor(model => model.Address)</span>
    <br />
</div>

Controller:

public ActionResult Details()
{
    string id = "";
    if (!string.IsNullOrEmpty(Request.Params["clientid"]))
        id = Request.Params["clientid"];

    int clientid = 0;
    if (id != "")
        clientid = Convert.ToInt32(id);

    ClientDetail cl;
    if (clientid != 0)
        ClientDetail cl = GetClientDetails(clientid);
    else
       ClientDetail cl = new ClientDetail();

    return PartialView("ClientPopupPartial", cl);
}

Can I have one popup and render different partial views (maybe by adding a hardcoded param such as area = 1, area = 2 to the method client call)? Or should there be one popup for each area of detail (client, visit, directions...).

Solution

Example with a static dialog (No AJAX)

Define a div for your dialog content in a partial view:

@model ClientDetail

<h2>Client Detail</h2>
@Html.DisplayFor(m => m.NameNumZone)
@Html.DisplayFor(m => m.Birthdate)
 ...

Dialog trigger and partial view:

<a href="#" class="dialog-trigger" data-clientId="@p.Account">@p.NameNumZone</a>
<div id="client-detail-modal">
    @Html.Partial("ClientDetail", Model.Item)
</div>

Javascript:

$(document).ready(function() {
    // setup the dialog
    $("#client-detail-modal").dialog({
        modal: true,
        autoOpen: false,
        height: 100,
        width: 200
    });

    // bind the click event
    $(".dialog-trigger").on("click", function(event) {
        event.preventDefault();
        $("#client-detail-modal").dialog("open");  // show dialog
    });
});

Now if you have more than one client on a page you'll need a dialog per client. After a few clients it gets ugly. Instead, fill the dialog content dynamically.

Dynamic dialog content (AJAX)

Dialog container for your partial is empty initially:

<div id="client-detail-modal"><!-- Client Partial, empty for now --></div>

Get the partial via AJAX:

$(".dialog-trigger").on("click", function(event) {
    event.preventDefault();
    var clientId = $(this).data("clientId");
    $.ajax({
        url: "Client/Details/" + clientId,
        type: "GET",
    })
    .done(function(result) {
        $("#client-detail-modal").html(result).dialog("open");
    });
});

Dynamic content (No AJAX)

Another way to fill the dialog would be to populate the data attributes of the trigger element then replace content using javascript.

<a href="#" class="dialog-trigger"
    data-clientId="@p.Account"
    data-birthdate="@p.Birthdate">@p.NameNumZone</a>

$(".dialog-trigger").on("click", function(event) {
    var clientId = $(this).data("clientId");
    var birthdate = $(this).data("birthdate");
    // now replace content with new values
    $("span.birthdate").text(birthdate);
});

Comments

[Jasen]

Before worrying about multiple jQuery modals, are you successful in making the first one work? Both cases you've laid out are possible but separate modals will be the easier case. Reusing a modal will probably require jQuery ajax calls to load the pop up div.

[Gina Marano]

@Jasen No, I don't know where to start. Can I rewrite my current javascript function "MethodClient" to support a new popup or do I have to use a controller? I brought up the "multiple query modals" so that this can be designed correctly from the start.

[Gina Marano]

I am confused. I have a list of clients, see the first section of code. I don't see how clicking on the link displays the popup.

[Jasen]

You'll have a list of triggers. Maybe this jsfiddle will help.