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

Question

我一直在使用DevExpress PopupControl.它们看起来很漂亮,但它们不会在iOS/Android设备上显示滚动条.所以我想提出一个替代方案.我的直接用途仅用于显示部分视图,只读和关闭按钮.

我对jquery不熟悉,所以我很难将有关此主题的所有不同帖子拼凑在一起.

我的index.cshtml是一个包含许多不同局部视图的门户.部分视图之一是客户列表.客户端名称是客户端详细信息的链接.这是我需要弹出对话框的地方.

部分视图与客户端列表(注意链接调用javascript函数传递我想要查看的ID:

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

处理弹出窗口的index.cshtml中的当前javascript:

<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是我想要替换的当前对话框.无论内容大小如何,我都希望对话框具有特定的高度.

要在对话框中显示的局部视图的示例:

@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>

控制器:

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

我可以有一个弹出窗口并渲染不同的局部视图(可能通过向方法客户端调用添加一个硬编码的参数,例如area = 1,area = 2)？或者每个细节区域都应该有一个弹出窗口(客户端,访问,方向......).

Answer 1

带静态对话框的示例(无AJAX)

div在局部视图中为对话框内容定义a :

@model ClientDetail

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

对话框触发器和局部视图:

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

现在,如果页面上有多个客户端,则每个客户端都需要一个对话框.在几个客户之后,它变得丑陋.而是动态填充对话框内容.

动态对话框内容(AJAX)

您的partial的对话框容器最初为空:

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

通过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");
    });
});

动态内容(无AJAX)

填充对话框的另一种方法是填充data触发器元素的属性,然后使用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);
});