javascript/jquery 模态弹出对话框 MVC 4 / 渲染部分视图答案

【问题标题】：javascript/jquery modal popup dialog MVC 4 / render partial viewjavascript/jquery 模态弹出对话框 MVC 4 / 渲染部分视图
【发布时间】：2013-05-10 17:32:44
【问题描述】：

我一直在使用 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）？或者每个细节区域（客户、访问、方向...）是否应该有一个弹出窗口。

【问题讨论】：

在担心多个 jQuery 模态之前，您是否成功地使第一个工作？您列出的两种情况都是可能的，但单独的模态将是更容易的情况。重用模态可能需要 jQuery ajax 调用来加载弹出 div。
@Jasen 不，我不知道从哪里开始。我可以重写我当前的 javascript 函数“MethodClient”以支持新的弹出窗口还是必须使用控制器？我提出了“多查询模式”，以便从一开始就可以正确设计。

标签： c# javascript jquery jquery-ui asp.net-mvc-4

【解决方案1】：

静态对话框示例（无 AJAX）

为部分视图中的对话内容定义div：

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

您的局部对话框容器最初是空的：

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

【讨论】：

我很困惑。我有一个客户列表，请参阅代码的第一部分。我看不到单击链接如何显示弹出窗口。
您将获得一个触发器列表。也许这个jsfiddle 会有所帮助。

【解决方案2】：

将此内容放入样式表中

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

并在代码中使用以下内容

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

这个逻辑对我有用。希望它也对你有用。

与其使用<a href="#close" title="Close" class="close" target="">X</a> 关闭它，不如导航到某个父页面。

【讨论】：