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

Question

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

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

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

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

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

如果不使用 ActionLink 也能实现同样的效果，那也是有帮助的。

Answer 1

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

首先给你的锚定一个类:

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

为对话框定义占位符:

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

确保您的 Controller 操作返回部分 View :

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 脚本以及必要的样式表。