有时候会遇到一个页面放多个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的验证。
