jQuery,MVC3:在模态对话框中提交部分视图表单

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>

调节器

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

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

部分视图

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

如您所见,jQuery中的load()调用名为PartialEdit的PartialView.

表格加载得很好,但我不知道我是如何提交表格的？

问题

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

目前我在局部视图中有提交按钮.单击时,表单将被提交,浏览器将执行[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;
        });
    });
}

并且控制器操作可以返回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硬编码.在处理网址时始终使用网址助手.所以让你的锚更有活力,而不是:

<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
});

Answer 2

感谢您的所有输入，目前对我有用的解决方案是将此功能附加到对话框上的“提交”按钮......

"Submit": function () {
    var $this = this;
    var form = $('form', $this);
    if (!$(form).valid()) {
       return false;
    }

    $.post(form.attr("action"), JSON.stringify($(form).serializeObject()), function () {
        $($this).dialog("close").dialog("distroy").remove();
    });
}

...这是上面答案的一些组合。

再次感谢。