在Html.ActionLink + MVC4上单击打开jQuery的对话框 [英] Open jQuery dialog box on click on Html.ActionLink + MVC4

问题描述

我有一个观点，即显示当事人的名单。
每一个政党都有一个ActionLink的。

I have a view that shows list of parties. every party has an ActionLink.

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

我的操作链接转到编辑行动，并呈现一个编辑器视图。

My action link goes to the edit action and renders an editor view.

主要的想法是，在ActionLink的点击的，一个jQuery对话框应与编辑器视图出现，在视图中的任何编辑应保存到数据库中。

The main idea is, on click of the ActionLink, a jQuery dialog box should appear with editor view and any edits in the view should be saved to database.

我的问题是，我不知道一个jQuery的对话框如何打开视图。所以，你会如何在一个jQuery对话框打开一看？

My problem is, I don't know how open a view in a jQuery dialog. So how would you open a view in a jQuery dialog?

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

If the same can be achieved without using ActionLink, that is also helpful.

推荐答案

您可以有你的行动返回一个局部视图，而不是全视角的，然后读取的 jQuery UI的对话框 终于写出必要的code。

You could have your action return a partial view instead of full view, then read the documentation of the jQuery UI dialog and finally write the necessary code.

这是给你的锚类启动：

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

定义的占位符对话框：

define a placeholder for your dialog:

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

请确保您的控制器动作返回一个局部视图：

make sure your controller action is returning a partial view:

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

终于写出的JavaScript，使直播：

and finally write the javascript to make it live:

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

Needless to say that you need to include the jQuery ui script after jquery as well as the necessary stylesheets.

这篇关于在Html.ActionLink + MVC4上单击打开jQuery的对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！