jQuery，MVC3：在modal dialog中提交局部视图表单

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

到目前为止，我的代码包含……

使用Javascript / jQuery的

$(document).ready(function () { $('.trigger').live('click', function (event) { var id = $(this).attr('rel'); var dialogBox = $("
"); $(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

 
Detail
Open 

调节器

 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硬编码。 处理url时始终使用url助手。 因此，让你的锚更动态，而不是：

 Open 

使用：

 @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

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

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

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

再次感谢。

Answer 3

部分视图下的按钮没问题，但听起来你想通过AJAX提交表单，所以没有页面刷新。 你可以这样做：

 $('#theIdOfYourForm').live('submit', function(event){ event.preventDefault(); var form = $(this); $.post(form.attr('action'), form.serialize(), function(data){ if (data.IsError) { alert(data.Error); } else { alert(data.Message); } }); }); 

并从HttpPost PartialEdit操作返回一个JSON对象，该操作根据需要定义IsError ， Error或Message 。 你可以用这个来获得更多，但是这个答案太长了:)

Answer 4

好吧，jQuery提交什么都不做，你需要在局部视图中有一个表单，然后发生的是当jQuery对话框提交执行时，你调用已经定义了动作的表单提交。

请参阅下面的代码，这是非ajax提交

  }); $dialog .dialog("option", "buttons", { "Submit":function(){ var dlg = $(this); var $frm = $(frm); if(onFormSubmitting != null) onFormSubmitting(); $frm.submit(); }, "Cancel": function() { $(this).dialog("close"); $(this).empty(); } }); 

关于post操作中的问题，您应该执行业务逻辑，然后调用“Return RedirectToAction（”viewname“，new {id = xxx}）”

Answer 5

今天我遇到了类似的问题，我必须提交一个部分视图中的表单 – 部分视图位于一个对话框中，该对话框是从另一个表单创建的！

关键是在部分视图中获取表单的处理程序并将其序列化。

以下是我以第一种forms定义对话框的方式：

 var udialog = $('#userdialog').dialog({ open: function(event, ui) { $(this).load('xx'); }, buttons: { "Submit" : function(){ $.ajax( { url: 'xx', type: "POST", async: true, data: $('form', $(this)).serialize() }); } } });