我现在只是在玩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
});
