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引擎后，代码更加简洁了，开放效率也相应的提高了。
