jQuery、MVC3 : Submitting a partial view form within a modal dialog

Question

我现在只是在玩 jQuery 和 MVC3，想知道如何提交一个已动态加载到 jQueryUI 对话框中的表单？

到目前为止我的代码包括...

Javascript/jQuery

$(document).ready(function () {

    $('.trigger').live('click', function (event) {

       var id = $(this).attr('rel');

       var dialogBox = $("<div>");

       $(dialogBox).dialog({
           autoOpen: false,
           resizable: false,
           title: 'Edit',
           modal: true,
           show: "blind",
           hide: "blind",
           open: function (event, ui) {
               $(this).load("PartialEdit/" + id.toString());
           }
        }
    });

    $(dialogBox).dialog('open');

})    });

cshtml

<h2>Detail</h2><a href="#" class="trigger" rel="1">Open</a>

Controller

public ActionResult PartialEdit(int id)
    {
        return PartialView(new EditViewModel() { Name = id.ToString() });
    }

    [HttpPost]
    public ActionResult PartialEdit(int id, FormCollection collection)
    {
        // What to put here???            
    }

部分 View

....@using (Html.BeginForm()){....Html.EditorFor(model => model.Name).....}....

如您所见，jQuery 中的 load() 调用了名为 PartialEdit 的 PartialView。

表单加载得很好，但我一直在思考如何实际提交表单？

问题

如何让 UI 提交表单并关闭对话框？ [HttpPost]PartialEdit 应该返回什么？

目前我在部分 View 中有提交按钮。单击时，表单被提交，浏览器执行 [HttpPost]PartialEdit 返回的任何操作(当前导致显示空白页面)。

但是，在提交后，我想在客户端触发一个事件(可能是全页面刷新，也可能是部分页面刷新，具体取决于所使用的上下文)。我不知道从哪里开始？

另外，我应该在 PartialView 中放置一个提交按钮，还是应该使用 jQuery-UI 对话框上的按钮？

任何建议/指示表示赞赏。

Answer 1

尝试以下几行中的一些内容:

open: function (event, ui) {
    $(this).load("PartialEdit/" + id.toString(), function(html) {
        $('form', html).submit(function() {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function(res) {
                    if (res.success) {
                        $(dialogBox).dialog('close');
                    }
                }
            });
            return false;
        });
    });
}

并且 Controller 操作可以返回 JSON:

[HttpPost]
public ActionResult PartialEdit(int id, FormCollection collection)
{ 
    // do some processing ...

    // obviously you could also return false and some error message
    // so that on the client side you could act accordingly
    return Json(new { success = true });
}

最后需要改进的部分是:

"PartialEdit/" + id.toString()

切勿在 ASP.NET MVC 应用程序中进行此类 url 硬编码。处理 url 时始终使用 url 助手。因此，让你的 anchor 更有活力一点，而不是:

<a href="#" class="trigger" rel="1">Open</a>

用途:

@Html.ActionLink(
    "Open", 
    "PartialEdit", 
    new {
        id = "1" // you probably don't need a rel attribute
    }, 
    new { 
        @class = "trigger"
    }
)

然后:

$(this).load(this.href, function(html) {
    ...
    return false; // now that the anchor has a href don't forget this
});