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

我有一个显示政党名单的视图。 每一方都有一个ActionLink

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

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

主要思想是，单击ActionLink时，会出现一个jQuery对话框，其中包含编辑器视图，视图中的任何编辑都会保存到数据库中

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

---

如果不使用ActionLink也可以实现同样的效果，这也很有帮助。

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

先给你的主播上课：

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

为对话框定义占位符：

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

最后编写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>

$（函数（）{
$（“#我的对话框”）.dialog({
自动打开：错误，
宽度：400，
可调整大小：false，
莫代尔：对
});
$（'.modal'）。单击（函数（）{
$（“#我的对话框”）.load（this.href，function（）{
$（this.dialog（'open'）；
});
返回false；
});
});

---

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

您不需要做所有这些乱七八糟的事情，可以尝试以下方法：

@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 {
    <div data-role="page" id="dialogId">
        <div data-role="header">
        </div>
        <div data-role="content">
       </div>
        <div data-role="footer">
       </div>
    </div>
}

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

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

---

对我有用：）

你可以像这样简单地做

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

---

我发现这篇文章也很有帮助。但是，请注意，如果使用诸如bootstrap之类的库，确保使用不同的类名而不是简单的“modal”，这一点很重要，因为您会发现自己失去理智。这种情况发生在我身上，当更改名称（包括引导）时，解决方案就起作用了。

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