Asp.net mvc 服务器端验证错误后如何显示Jquery模式对话框
我对JQuery和MVC非常陌生。在我的应用程序中,单击按钮打开JQuery模式对话框。我正在使用控制器操作方法渲染此对话框的局部视图,该方法类似于:Asp.net mvc 服务器端验证错误后如何显示Jquery模式对话框,asp.net-mvc,jquery,Asp.net Mvc,Jquery,我对JQuery和MVC非常陌生。在我的应用程序中,单击按钮打开JQuery模式对话框。我正在使用控制器操作方法渲染此对话框的局部视图,该方法类似于: public ActionResult Create() { return PartialView("Create"); } 部分视图包含一些文本框和“创建”按钮。在“创建”按钮上,我正在尝试将数据保存到数据库中。但在此之前,我做了一些验证,比如输入的名称是否已经存在,然后将该消息显示给用户。 我
public ActionResult Create()
{
return PartialView("Create");
}
部分视图包含一些文本框和“创建”按钮。在“创建”按钮上,我正在尝试将数据保存到数据库中。但在此之前,我做了一些验证,比如输入的名称是否已经存在,然后将该消息显示给用户。
我使用以下代码完成了此操作:
return PartialView("Create", model);
这将正确显示消息,但它仅在浏览器中呈现部分视图,并且模式对话框将消失
请告诉我如何显示带有错误的相同模式对话框。您需要使用AJAX提交表单。下面是如何继续。一如既往,从表示对话框窗体信息的视图模型开始:
public class MyViewModel
{
public string Foo { get; set; }
[Required(ErrorMessage = "The bar is absolutely required")]
public string Bar { get; set; }
}
然后控制器:
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult Create()
{
return PartialView("Create");
}
[HttpPost]
public ActionResult Create(MyViewModel model)
{
if (!ModelState.IsValid)
{
return PartialView(model);
}
// TODO: the model is valid => do some processing with it
// and return a JSON result confirming the success
return Json(new { success = true });
}
}
和主视图(~/Views/Home/Index.cshtml
):
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script type="text/javascript">
// Remark: all this javascript could be placed in a separate js file
// to avoid cluttering the views
$(function () {
$('#modalLink').click(function () {
$('#dialog').load(this.href, function () {
$(this).dialog();
bindForm(this);
});
return false;
});
});
function bindForm(dialog) {
$('form', dialog).submit(function () {
$.ajax({
url: this.action,
type: this.method,
data: $(this).serialize(),
success: function (result) {
if (result.success) {
alert('thanks for submitting');
$('#dialog').dialog('close');
} else {
$('#dialog').html(result);
bindForm();
}
}
});
return false;
});
}
</script>
@Html.ActionLink("open modal", "create", null, null, new { id = "modalLink" })
<div id="dialog"></div>
@model MyViewModel
@using (Html.BeginForm())
{
<div>
@Html.LabelFor(x => x.Foo)
@Html.EditorFor(x => x.Foo)
@Html.ValidationMessageFor(x => x.Foo)
</div>
<div>
@Html.LabelFor(x => x.Bar)
@Html.EditorFor(x => x.Bar)
@Html.ValidationMessageFor(x => x.Bar)
</div>
<input type="submit" value="OK" />
}