Asp.net MVC 3实例学习之ExtShop（六）——登录对话框

登录对话框将使用jquery提供的对话框，所以不需要添加其它js文件。首先要为登录对话框添加一个表单模型。在Models目录下创建一个“AccountModels”类文件，然后添加一个Logon类，代码如下：

1	public class LogOnModel
2	{
3	[ Required ( ErrorMessage = " 请输入“用户名” " ) ]
4	[ Display ( Name = " 用户名： " ) ]
5	public string UserName { get ; set ; }
6
7	[ Required ( ErrorMessage = " 请输入“密码” " ) ]
8	[ DataType ( DataType . Password ) ]
9	[ Display ( Name = " 密码 " ) ]
10	public string Password { get ; set ; }
11
12	[ Required ( ErrorMessage = " 请输入“验证码” " ) ]
13	[ StringLength ( 6 , ErrorMessage = " 请输入正确的验证码 " , MinimumLength = 6 ) ]
14	[ Display ( Name = " 验证码 " ) ]
15	public string VaildCode { get ; set ; }
16
17	[ Display ( Name = " 记住我？ " ) ]
18	public bool RememberMe { get ; set ; }
19	}
20

表单中将包括用户名、密码、验证码和“记住我”4个输入项。

现在要创建一个显示表单的操作和分部视图。在“Controllers”目录下创建“AccountController”控制器，然后创建一个“Logon”操作，代码如下：

1	[ ChildActionOnly ]
2	public ActionResult Logon ( )
3	{
4	return PartialView ( ) ;
5	}
6

代码很简单，直接返回分部视图就行了。接着创建对应的分部视图，代码如下：

1	@ model Extshop . Models . LogOnModel
2
3	@ using ( Ajax . BeginForm ( " Logon " , " Account " , new AjaxOptions { OnSuccess = " LogonSuccess " , LoadingElementId = " LogonLoad " , UpdateTargetId = " LogonMsg "
4	, OnBegin = " LogonBegin " } , new { id = " LogonForm " } ) )
5	{
6	< div >
7	< fieldset >
8	< legend > < / legend >
9	< p >
10	@ Html . LabelFor ( m = > m . UserName )
11	@ Html . TextBoxFor ( m = > m . UserName )
12	< / p >
13	< div class = " error " >
14	@ Html . ValidationMessageFor ( m = > m . UserName )
15	< / div >
16	< p >
17	@ Html . LabelFor ( m = > m . Password )
18	@ Html . PasswordFor ( m = > m . Password )
19	< / p >
20	< div class = " error " >
21	@ Html . ValidationMessageFor ( m = > m . Password )
22	< / div >
23	< p >
24	@ Html . LabelFor ( m = > m . VaildCode )
25	@ Html . TextBoxFor ( m = > m . VaildCode )
26	< / p >
27	< p style = " padding-left:80px;width:240px;line-height:54px; " > < img alt = " 验证码 " id = " Logon-vcode " height = " 40 " width = " 100 " src = " @Url.Action( " Vcode " , " Account " , new { id = " Logon " }) " style = " cursor:pointer; " / > & nbsp ; & nbsp ; 区分大小写 < / p >
28	< div class = " error " >
29	@ Html . ValidationMessageFor ( m = > m . VaildCode )
30	< / div >
31	< p >
32	@ Html . CheckBoxFor ( m = > m . RememberMe )
33	@ Html . LabelFor ( m = > m . RememberMe )
34	< / p >
35	< p style = " text-align:center; " >
36	< input id = " LogonSubmit " type = " submit " value = " 登录 " / >
37	< / p >
38	< p style = " text-align:center;display:none; " id = " LogonLoad " > < img src = " /Images/blue-loading.gif " alt = " 正在验证…… " / > < / p >
39	< p style = " text-align:center;color:Red; " id = " LogonMsg " > < / p >
40	< / fieldset >
41	< / div >
42	}
43
44	< script type = " text/javascript " >
45	function LogonSuccess ( e ) {
46	$ ( " #LogonForm input "