单击 Html.ActionLink + MVC4 打开 jQuery 对话框答案

【问题标题】：Open jQuery dialog box on click on Html.ActionLink + MVC4单击 Html.ActionLink + MVC4 打开 jQuery 对话框
【发布时间】：2013-07-12 10:44:13
【问题描述】：

我有一个显示各方列表的视图。每一方都有一个 ActionLink。

@Html.ActionLink("Edit", "Edit", new { id = 234 })

我的操作链接转到编辑操作并呈现编辑器视图。

主要思想是，点击 ActionLink 后，应出现一个带有编辑器视图的 jQuery 对话框，并且应将视图中的任何编辑保存到数据库中。

我的问题是，我不知道如何在 jQuery 对话框中打开视图。那么如何在 jQuery 对话框中打开视图呢？

如果不使用 ActionLink 也能达到同样的效果，那也很有帮助。

【问题讨论】：

标签： jquery asp.net-mvc-4 razor

【解决方案1】：

您可以让您的操作返回部分视图而不是完整视图，然后阅读jQuery UI dialog 的文档，最后编写必要的代码。

首先给你的锚定一个类：

@Html.ActionLink("Edit", "Edit", null, new { id = 234 }, new { @class = "modal" })

为您的对话框定义一个占位符：

<div id="my-dialog"></div>

确保您的控制器操作返回部分视图：

public ActionResult Edit(int id)
{ 
    MyViewModel model = ...
    return PartialView(model);    
}

最后编写 javascript 使其生效：

<script type="text/javascript">
    $(function () {
        $('#my-dialog').dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true
        });

        $('.modal').click(function() {
            $('#my-dialog').load(this.href, function() {
                $(this).dialog('open');
            });
            return false;
        });
    });
</script>

不用说，你需要在 jquery 之后包含 jQuery ui 脚本以及必要的样式表。

【讨论】：

我发现这篇文章也很有帮助。但是，请注意，如果使用诸如 bootstrap 之类的库，确保使用与简单的“模态”不同的类名很重要，因为您会发现自己失去理智。这发生在我身上，并且在更改名称后（我包括引导程序），该解决方案有效。

【解决方案2】：

你可以这么简单

formatter: function (cellvalue, options, rowObject) {
                    var x = '@Html.ActionLink("Col", "Index", "Lists", new { id = "listvalid" }, new { @style = "color:black;font-weight:bold;" })';
                    return x.replace("listvalid", rowObject.list_key).replace("Col", rowObject.list_name);
                }, sortable: true, align: 'left', width: 200, editable: true

【讨论】：

【解决方案3】：

你不需要做那些乱七八糟的事情，试试这样的：

@Html.ActionLink("Open Dialog", null, null, null, 
      new { data_role = "button", data_inline = true, data_rel = "dialog", 
            data_transition = "pop", href="#dialogId" })

这里的关键作弊是href 属性。

另外请记住，您可以将对话框添加到所需页面，如下所示：

@section dialogPages {
    &lt;div data-role="page" id="dialogId"&gt;
        &lt;div data-role="header"&gt;
        &lt;/div&gt;
        &lt;div data-role="content"&gt;
       &lt;/div&gt;
        &lt;div data-role="footer"&gt;
       &lt;/div&gt;
    &lt;/div&gt;
}

然后在您的 _Layout.cshtml 中包含以下内容：

@if (IsSectionDefined("dialogPages"))
{
    @RenderSection("dialogPages")
}

为我工作:)

【讨论】：