[英]Returning data after submitting a form in a partial view in jQuery dialog
I have a page that displays a list of Folders. 我有一个显示文件夹列表的页面。 I have a link that will open a partial view in a jQuery dialog, so that I can add a new Folder.
我有一个链接,将在jQuery对话框中打开局部视图,以便我可以添加一个新的文件夹。
Here's what's in my main Index
view: 这是我的主要
Index
视图中的内容:
<script type="text/javascript">
$(document).ready(function () {
$('#dialog').dialog({
width: 540, height: 280, autoOpen: false, draggable: false,
resizable: false, modal: true,
open: function (event, ui) {
$(this).load("@Url.Action("Create")");
},
close: function (event, ui) {
$(this).empty();
}
});
$('ul#folders li.add').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<ul id="folders">
<li class="add"><span></span></li>
</ul>
<div id="dialog"></div>
When I click on the "Add" button, I'm loading a partial view into the jQuery dialog. 当我点击“添加”按钮时,我正在将部分视图加载到jQuery对话框中。 Here's my partial view:
这是我的部分观点:
@model FolderViewModel
<h1>Create new folder</h1>
<div id="folder-create">
@using (Ajax.BeginForm("Create", "Folders", null)) {
@Html.AntiForgeryToken()
@Html.TextBoxFor(m => m.Name, new { placeholder = "Name" })
<p>@Html.ValidationSummary()</p>
<input type="submit" class="create" value="" />
}
</div>
<script type="text/javascript">
$(document).ready(function() {
$.validator.unobtrusive.parse("#folder-create > form");
});
</script>
Here's the method the form is posting to: 这是表单发布到的方法:
[HttpPost]
public ActionResult Create(FolderViewModel viewModel)
{
if (ModelState.IsValid)
{
try
{
// create folder
}
catch
{
return View(viewModel);
}
}
return View(viewModel);
}
Everything works fine here - the validation works and I can submit my form. 一切都运行良好 - 验证工作,我可以提交我的表格。
The only problem is that once I successfully submit my form, I want to close the modal and pass the new folder's id back to the Index
view so that I can show a "X created successfully" message. 唯一的问题是,一旦我成功提交表单,我想关闭模式并将新文件夹的id传递回
Index
视图,以便我可以显示“X created successfully”消息。
I imagine I need to return JSON instead of a ViewResult, and capture that result somewhere, but I'm not exactly sure how. 我想我需要返回JSON而不是ViewResult,并在某处捕获该结果,但我不确定如何。
You can bind a function to do something when the ajax request finish: 当ajax请求完成时,您可以绑定一个函数来执行某些操作:
function OnSuccess(data) {
/*Close the popup and do stuff here*/
}
The AjaxOptions
to your Ajax.BeginForm
should look like this: Ajax.BeginForm
的AjaxOptions
应如下所示:
new AjaxOptions
{
/*Other properties*/
OnSuccess ="OnSuccess(data)"
})
In the controller return the Id and anything else and use it on the OnSuccess
function. 在控制器中返回Id和其他任何内容,并在
OnSuccess
函数上使用它。
[HttpPost]
public JsonResult Create(FolderViewModel viewModel)
{
/*Do stuff to create the folder*/
return Json(/*return the Id and something else*/);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.