有时候会遇到一个页面放多个Form的情况，在mvc中我们知道一个页面只能放一个Model，那如何在使用Model验证的前提下，放多个表单呢？这里使用PartialView+AjaxForm的方式解决。
1 PartialView
对多个表单，建立多个PartialView，Controller层代码如下：
public PartialViewResult Main() { MainModel model = new MainModel(); return PartialView(model); } [HttpPost] [ValidateAntiForgeryToken] public ActionResult Main(MainModel model) { if (!ModelState.IsValid) { ViewBag.IndexRe = "Index 验证不通过"; return PartialView(model); } ViewBag.IndexRe = "Index 提交成功"; return PartialView(model); } public PartialViewResult Child() { ChildModel model = new ChildModel(); return PartialView(model); } [HttpPost] [ValidateAntiForgeryToken] public PartialViewResult Child(ChildModel model) { if (!ModelState.IsValid) { ViewBag.ChildRe = "Child 验证不通过"; return PartialView(model); } ViewBag.ChildRe = "Child 提交成功"; return PartialView(model); }
在上面可以看到，有两个子页面，一个是Main，一个是Child，显示页面就负责引用这2个PartialView就可以了：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="http://www.cnblogs.com/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
<script type="text/javascript">
var vallidateChild = function () {
$('#divchild form').removeData("validator");
$.validator.unobtrusive.parse('#divchild form');
};
var vallidateMain = function () {
$('#divMain form').removeData("validator");
$.validator.unobtrusive.parse('#divMain form');
};
</script>
</head>
<body>
<div id="divMain">
@{Html.RenderAction("Main");}
</div>
<div id="divchild">
@{Html.RenderAction("Child");}
</div>
</body>
</html>
2 Ajax.BeginForm
在子页面的view层用，需要标注表单是ajax的，如下：
Child的view如下：
@model MvcApplication8.Models.ChildModel @using (Ajax.BeginForm("Child", "MultiForm", new AjaxOptions() { UpdateTargetId = "divchild", InsertionMode = InsertionMode.Replace, OnComplete = "vallidateChild()"})) {@Html.AntiForgeryToken() <div>@Html.TextBoxFor(m => m.ChildName) @Html.ValidationMessageFor(m => m.ChildName) </div> <div> <input type="submit" id="childBtn" value="子提交" /></div> }
Main的view如下：
@model MvcApplication8.Models.MainModel @using (Ajax.BeginForm("Main", "MultiForm", new AjaxOptions() { UpdateTargetId = "divMain", InsertionMode = InsertionMode.Replace, OnComplete = "vallidateMain()" })) {@Html.AntiForgeryToken() <div> @Html.TextBoxFor(m => m.LogName) @Html.ValidationMessageFor(m => m.LogName) </div> <div> <input type="submit" value="主提交" id="indexBtn" /></div> }
3 注意
显示页面的js引用必须有如下：
<script src="http://www.cnblogs.com/Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/jquery.validate.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script> <script src="http://www.cnblogs.com/Scripts/jquery.unobtrusive-ajax.js" type="text/javascript"></script>
同时注意显示页面的js：
<script type="text/javascript"> var vallidateChild = function () { $('#divchild form').removeData("validator"); $.validator.unobtrusive.parse('#divchild form'); }; var vallidateMain = function () { $('#divMain form').removeData("validator"); $.validator.unobtrusive.parse('#divMain form'); }; </script>
而对这两个js函数的绑定是在AjaxOptions中的OnComplete = "vallidateMain()"。意思是指当提交后执行vallidateMain函数，函数中的意思是指重新绑定jquery的验证。