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

Question

我有一个显示派对列表的视图.每一方都有一个ActionLink.

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

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

主要思想是,在单击ActionLink时,应该出现一个带有编辑器视图的jQuery对话框,并且视图中的任何编辑都应该保存到数据库中.

我的问题是,我不知道如何打开jQuery对话框中的视图.那你怎么在jQuery对话框中打开一个视图呢？

如果不使用ActionLink就可以实现同样的目的,那也很有帮助.

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