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 " ) . removeAttr ( " readonly " ) ;
47	$ ( " #LogonSubmit " ) . removeAttr ( " disabled " ) ;
48	if ( e . Success ) {
49	$ ( " #LogonMsg " ) . html ( e . Message ) ;
50	$ ( " #login " ) . text ( " 退出 " ) ;
51	$ ( " #LoginDialog " ) . dialog ( " close " ) ;
52	} else {
53	$ ( " #LogonMsg " ) . html ( e . Message ) ;
54	}
55	}
56
57	function LogonBegin ( e ) {
58	$ ( " #LogonForm input " ) . attr ( " readonly " , true ) ;
59	$ ( " #LogonSubmit " ) . attr ( " disabled " , " disabled " ) ;
60	$ ( " #LogonMsg " ) . html ( " " ) ;
61	}
62
63	< / script >

因为使用Ajac提交，所以这里也是使用Ajax.BeginForm。这里要注意的是代码第27行要通过Vcode操作输出验证码。在Account控制器里的Vcdoe代码如下：

1	public ActionResult Vcode ( string id , string d )
2	{
3	VerifyCode v = new VerifyCode ( ) ;
4	string code = v . CreateVerifyCode ( ) ; // 取随机码
5	Session [ id ] = code ;
6	v . Padding = 10 ;
7	byte [ ] bytes = v . CreateImage ( code ) ;
8	return File ( bytes , @ " image/jpeg " ) ;
9	}
10

代码中为了避免同一页面有多个表单使用验证码，从而出现混乱，因而需要传入一个id值用以区分。因为直接返回图片，所以直接返回File值，而不是视图。

因为所有页面都会使用到对话框，所以对话框必须加载在母版页，切换到_Layout.cshtml文件，在“”标记上加入以下代码：

1	< div id = " LoginDialog " title = " 登录 " >
2	@ { Html . RenderAction ( " Logon " , " Account " ) ; }
3	< / div >
4

这样，登录对话框就已经实现了。接着修改一下顶部导航栏的登录导航菜单，修改代码如下：

1	< a href = " # " id = " login " > @ ( User . Identity . IsAuthenticated ? " 退出 " : " 登录 " ) < / a > & nbsp ; & nbsp ; | & nbsp ; & nbsp ;

如果用户已经登录就显示“退出”，如果未登录则显示“登录”。

在Jquery函数中加入以下脚本

1	$ ( " #LoginDialog " ) . dialog ( { modal : true , autoOpen : false , width : 420 , height : 500 } ) ;
2	$ ( " #login " ) . click ( function ( ) {
3	if ( $ ( " #login " ) . text ( ) = = " 登录 " ) {
4	$ ( " #LoginDialog " ) . dialog ( " open " ) ;
5	} else {
6	$ . ajax ( {
7	url : " /Account/LogOut " ,
8	success : function ( ) {
9	$ ( " #login " ) . text ( " 登录 " ) ;
10	}
11	} ) ;
12	}
13	} ) ;
14	$ ( " #Logon-vcode " ) . click ( function ( ) {
15	var dt = new Date ( )
16	$ ( " #Logon-vcode " ) . attr ( " src " , " /Account/Vcode/Logon?d= " + dt . toString ( ) ) ;
17	} ) ;
18

代码第1句通过HTML元素创建一个登录对话框。当单击登录菜单，将执行第3行到第12行的带。代码首先判断登录菜单的显示内容，如果是退出，则通过Ajax执行“Logout”操作，如果是登录，则显示登录对话框。代码第14行到第17行的作用是更新登录对话框的验证码图片。

总结：

本系列文章到此就结束了，通过本系列文章，作者自己对Asp.net MVC 3的整个开发流程已经有了基本的了解。总体来说是获益良多，希望你们也是如此。总体感觉，Asp.net MVC 3加入Razor引擎后，代码更加简洁了，开放效率也相应的提高了。

源代码下载：http://download.csdn.net/source/2998628