MVC 一页多个提交表单（Multi_Form in one page）

前几天遇到同一页有多个提交表单的情况，经过艰苦奋斗终于解决。与大家分享一下。

我的要求有两个：①可以验证显示错误信息②显示错误信息的时候原保留填写的内容

未查找资料之前想了3个解决方案：

①将页面中所有的提交对象封装为一个对象，提交的时候只提交所需要的内容，当有错误信息的时候将已填的内容付给此此对象然后返回它。

优点：可以使用ModelState验证

缺点：如果需要重新写类，如果属性多就很麻烦，重用性低

②页面的对象定为多个form中的一个，其余的使用js验证

优点：可以部分使用ModelState验证

缺点：js使用麻烦需要前台后台写方法，验证麻烦

③建立多个相同的页面，不过页面的对象不同，每个form的对象一个页面，如果有错则转到对象对应的页面。

优点：可以使用ModelState验证

缺点：需要建立多个页面，其实质是转到其他地址。

经过深思熟虑如果第一种改良一下是不错的。

在网上找了半天终于找到与第一种相似的解决方案，不过国家完美。

方法如下：

①扩展HtmlHelper的beginForm方法，添加一个参数表单名“formName”指定选用哪个Action方法，如下

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Mvc.Html;
usingSystem.Web.Mvc;

namespaceMultiFormTest
{
publicstaticclassHtmlHelperExtession
{
///<summary>
///formName
///</summary>
///<paramname="htmlHelper"></param>
///<paramname="formName">formName</param>
///<returns></returns>
publicstaticMvcFormBeginForm(thisHtmlHelperhtmlHelper,stringformName)
{
returnBeginForm(htmlHelper,null,formName);
}
///<summary>
///MvcFormform,stringformName
///</summary>
///<paramname="htmlHelper"></param>
///<paramname="form">form</param>
///<paramname="formName">formName</param>
///<returns></returns>
publicstaticMvcFormBeginForm(thisHtmlHelperhtmlHelper,MvcFormform,stringformName)
{
if(String.IsNullOrEmpty(formName))
thrownewArgumentNullException("formName");

if(form==null)
form=htmlHelper.BeginForm();

htmlHelper.ViewContext.Writer.WriteLine("<inputname=\"n.__formName\"type=\"hidden\"value=\""+formName+"\"/>");

returnform;
}
}
}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

Model对象如下，AccountModel为页面对象，TestModel和LogOnModel为form对象，将Form对象作为属性传给页面

publicclassAccountModel
{
publicTestModelTest{get;set;}
publicLogOnModelLogOn{get;set;}
}
publicclassTestModel
{
publicstringMyUserName{get;set;}
publicstringMyEmail{get;set;}
publicstringMyPassword{get;set;}
publicstringMyConfirmPassword{get;set;}
}
publicclassLogOnModel
{
[Required]
publicstringUserName{get;set;}

[Required]
[DataType(DataType.Password)]
publicstringPassword{get;set;}

publicboolRememberMe{get;set;}
}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

actionResult方法，其中"LogOn"和Registertest"表单名

[HttpPost]
[FormActionSelector("LogOn")]
publicActionResultIndex(LogOnModellogOn)
{
varaccount=newAccountModel{LogOn=logOn};
returnView(account);
}

[HttpPost]
[FormActionSelector("Registertest")]
publicActionResultIndex(TestModeltest)
{
varaccount=newAccountModel{Test=test};
returnView(account);
}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

页面代码

<%@PageLanguage="C#"MasterPageFile="~/Views/Shared/Site.Master"Inherits="System.Web.Mvc.ViewPage<MultiFormTest.AccountModel>"%>

<%@ImportNamespace="MultiFormTest"%>
<asp:ContentID="Content1"ContentPlaceHolderID="TitleContent"runat="server">
HomePage
</asp:Content>
<asp:ContentID="Content2"ContentPlaceHolderID="MainContent"runat="server">
<h2>
<%:ViewData["Message"]%></h2>
<p>
TolearnmoreaboutASP.NETMVCvisit<ahref="http://asp.net/mvc"title="ASP.NETMVCWebsite">http://asp.net/mvc</a>.</p>
<%using(Html.BeginForm("Registertest"))
{%>
<%:Html.ValidationSummary(true,"Accountcreationwasunsuccessful.Pleasecorrecttheerrorsandtryagain.")%>
<div>
<fieldset>
<legend>AccountInformation</legend>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.Test.MyUserName)%>
</div>
<divclass="editor-field">
<%:Html.TextBoxFor(m=>m.Test.MyUserName)%>
<%:Html.ValidationMessageFor(m=>m.Test.MyUserName)%>
</div>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.Test.MyEmail)%>
</div>
<divclass="editor-field">
<%:Html.TextBoxFor(m=>m.Test.MyEmail)%>
<%:Html.ValidationMessageFor(m=>m.Test.MyEmail)%>
</div>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.Test.MyPassword)%>
</div>
<divclass="editor-field">
<%:Html.PasswordFor(m=>m.Test.MyPassword)%>
<%:Html.ValidationMessageFor(m=>m.Test.MyPassword)%>
</div>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.Test.MyConfirmPassword)%>
</div>
<divclass="editor-field">
<%:Html.PasswordFor(m=>m.Test.MyConfirmPassword)%>
<%:Html.ValidationMessageFor(m=>m.Test.MyConfirmPassword)%>
</div>
<p>
<inputtype="submit"value="Register"/>
</p>
</fieldset>
</div>
<%}%>
<%using(Html.BeginForm("LogOn"))
{%>
<%:Html.ValidationSummary(true,"Loginwasunsuccessful.Pleasecorrecttheerrorsandtryagain.")%>
<div>
<fieldset>
<legend>AccountInformation</legend>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.LogOn.UserName)%>
</div>
<divclass="editor-field">
<%:Html.TextBoxFor(m=>m.LogOn.UserName)%>
<%:Html.ValidationMessageFor(m=>m.LogOn.UserName)%>
</div>
<divclass="editor-label">
<%:Html.LabelFor(m=>m.LogOn.Password)%>
</div>
<divclass="editor-field">
<%:Html.PasswordFor(m=>m.LogOn.Password)%>
<%:Html.ValidationMessageFor(m=>m.LogOn.Password)%>
</div>
<divclass="editor-label">
<%:Html.CheckBoxFor(m=>m.LogOn.RememberMe)%>
<%:Html.LabelFor(m=>m.LogOn.RememberMe)%>
</div>
<p>
<inputtype="submit"value="LogOn"/>
</p>
</fieldset>
</div>
<%}%>

</asp:Content>
HTML代码

<fieldset>
<legend>AccountInformation</legend>
<divclass="editor-label">
<labelfor="LogOn_UserName">UserName</label>
</div>
<divclass="editor-field">
<inputid="LogOn_UserName"name="LogOn.UserName"type="text"value="admin"/>
</div>
<divclass="editor-label">
<labelfor="LogOn_Password">Password</label>
</div>
<divclass="editor-field">
<inputid="LogOn_Password"name="LogOn.Password"type="password"/>
</div>
<divclass="editor-label">
<inputid="LogOn_RememberMe"name="LogOn.RememberMe"type="checkbox"value="true"/><inputname="LogOn.RememberMe"type="hidden"value="false"/>
<labelfor="LogOn_RememberMe">RememberMe</label>
</div>
<p>
<inputtype="submit"value="LogOn"/>
</p>
</fieldset>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

可以看到控件的Name的值是对象.属性(如LogOn.UserName),MVC识别这种样式，这是我所没想到的

效果：

经测试，有时这种方法得到的对象属性为Null，不知为什么，很是郁闷，希望大家使用的的话命名等小心一下。不过可以将每个表单做成一个用户控件，控件对象为表单对象就可以避免这个情况。

测试model项目http://u.115.com/file/f1f7377159

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}