登录对话框将使用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引擎后，代码更加简洁了，开放效率也相应的提高了。
标签：Asp,登录,对话框,ExtShop,Html,div,Logon,id From： https://blog.51cto.com/dqhuang/6319496