javascript / jquery模式弹出对话框MVC 4 /渲染局部视图

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

Answer 2

Put this content in your style sheet

        .modalDialog {
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.8);
            z-index: 99999;
            opacity:0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modalDialog:target {
            opacity:1;
            pointer-events: auto;
        }

        .modalDialog > div {
            width: 80%;
            position: relative;
            margin: 10% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }


        .close {
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }

        .close:hover { background: #00d9ff; }

and in the code use the following

        <a href="#openModal" target="">Open Modal</a>

        <div id="openModal" class="modalDialog" data-theme="c">
            <div>
                <a href="#close" title="Close" class="close" target="">X</a>
                <h2>Pop up</h2>
                <p>Pop up content. You can add your controls and content here</p>
            </div>
        </div>

this logic worked for me. Hope it works for you also.

Instead of using <a href="#close" title="Close" class="close" target="">X</a> for closing it is preferred you navigate to some parent page instead.