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

我现在只是在玩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对话框上的按钮?

任何建议/指针赞赏.

解决方法

尝试一下这些内容
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
});

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...