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

来源：互联网发布：单片机交通灯设计c语言编辑：程序博客网时间：2024/06/06 03:26

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

   1      public class LogOnModel2      {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.LogOnModel2   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