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...).

Answer 1

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);
});