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