.NET MVC 4 实现用户注册功能

初学MVC，踩了不少坑，所以通过实现一个用户注册功能把近段时间学习到的知识梳理一遍，方便以后改进和查阅。

问题清单：

l 为什么EF自动生成的表名后自动添加了s？

l 如何为数据库初始化一些数据？

l 使用WebAPI如何返回JSON？

l 让Action接受Get请求

l 如何使路由匹配不同的URL

l 如何调试路由

l VS2013如何添加jQuery智能提示？

l 为何在Session中的验证码打印出来后与上一次的相同？

l 对一个或多个实体的验证失败(或db.SaveChanges不起作用)

l 数据库正在使用，无法删除

数据库设计(Code First)

这里并没有采用传统的数据库设计方案，而是使用了 代码优先(code first)，这种模式适用于开发初期，数据库设计目标还不明确的阶段，可以随时修改表和字段。打开VS，新建一个项目，选择ASP>NET MVC 4 Web应用程序：

 

操作完成后，可以看到以下目录结构：

选择Models文件夹，新建一个类Model.cs：

namespace xCodeMVC.Models
{
    public class UserInfo
   {
        //ID
        public int UserID { get; set; }

        //用户名
        public string UserName { get; set; }

        //密码
        public string UserPwd { get; set; }

        //邮箱
        public string UserEmail { get; set; }

        //用户组：0代表管理员，1代表普通用户
        public int UserRank { get; set; }

        //注册时间
        public DateTime RegisterTime { get; set; }
    }
}

初步设计已经完成了，下面需要对各个字段进行约束：

l UserID：主键、自增长

l UserName：长度为2到15个字符、必填

l UserPwd：长度为6到20个字符、必填

l UserEmail：必填

l UserRank：默认为1

l RegisterTime：注册时间(DateTime格式)

添加约束后的代码：

namespace xCodeMVC.Models
{
    public class UserInfo
    {
        [Key]
        [DatabaseGenerated(DatabaseGeneratedOption.Identity)]
        public int UserID { get; set; }

        [Required(ErrorMessage="用户名不能为空")]
        [Display(Name="用户名")]
        [StringLength(20,MinimumLength=2,ErrorMessage="用户名必须为{2}到{1}个字符")]
        public string UserName { get; set; }

        [Required(ErrorMessage="密码不能为空")]
        [Display(Name="密码")]
        [StringLength(50, MinimumLength = 6, ErrorMessage = "密码必须为{2}到20个字符")]
        [DataType(DataType.Password)]
        public string UserPwd { get; set; }


        [Display(Name="邮箱")]
        [Required(ErrorMessage="邮箱必填")]
[RegularExpression(@"^w+((-w+)|(.w+))*@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+)*.[A-Za-z0-9]+$",
 ErrorMessage = "请输入正确的Email格式
示例：abc@123.com")]
        public string UserEmail { get; set; }

        public int UserRank { get; set; }

        public DateTime RegisterTime { get; set; }
    }
}

至此，一个model就建好了。

接着需要配置一下web.config，在configuration节点内添加数据库连接字符串，后面实体会用到：

<configuration>
  <connectionStrings>
    <add name="connection" providerName="System.Data.SqlClient" connectionString="Data Source=.;Initial Catalog=cxyDB;Integrated Security=True" />
  </connectionStrings>
</configuration>

在Models文件夹内再建一个新类DBContext.cs，用于进行数据库的相关操作：

namespace xCodeMVC.Models
{
    public class DBContext : DbContext
   {
    //connection是webconfig内的连接字符串
        public DBContext() : base("connection") { }

        public DbSet<UserInfo> userInfo { get; set; }
    }
}

最后需要在Global.asax文件中添加如下配置(如何为数据库初始化一些数据？)：

using xCodeMVC.Models;

public class MvcApplication : System.Web.HttpApplication
{
//DropCreateDatabaseIfModelChanges表示当模型改变时删除并重新创建数据库
//还有一个Always表示总是在启动时执行删除并重建数据库操作
    public class DBInit:DropCreateDatabaseIfModelChanges<DBContext>
        {
            protected override void Seed(DBContext context)
            {
                //为数据库insert一些初始数据
                context.userInfo.Add(new UserInfo
                {
                    UserName = "troy",
                    UserPwd = "111111",
                    UserEmail = "abc@163.com",
                    UserRank = 0,
                    RegisterTime = DateTime.Now
                });
                base.Seed(context);
            }
        }
    protected void Application_Start()
    {
        Database.SetInitializer(new DBInit());
        //省略生成时的代码...
    }
}

启动项目，会发现程序自动生成了cxyDB的数据库，并添加了一个名为UserInfoes的表，里面有一条初始记录：

不过需要注意，这里生成的表名是UserInfoes，后面会说明这种情况（为什么EF自动生成的表名后自动添加了s？）。

表单设计

 

l 客户端验证

首先焦点移出文本框时，需要远程访问一个API，查询数据库中用户名是否存在。在Controllers文件夹选中AccountController.cs控制器并添加如下代码：

namespace xCodeMVC.Controllers
{
    public class AccountController : Controller
    {
        private DBContext db = new DBContext();
        // GET: /Account/CheckUser
        [HttpGet]
        public JsonResult CheckUser(string username)
        {
            var exists = db.userInfo.Where(a => a.UserName == username).Count() != 0;

            return Json(exists, JsonRequestBehavior.AllowGet);
        }
    }
}

客户端用如下代码发起请求：

$.getJSON("/Account/CheckUser/?username=" + username, function (data) {
if(data) {
   //用户名存在
}
});

l 图形验证码

在解决方案中新建一个类库项目，编写生成图形验证码的代码，编译后在MVC项目中引用其生成的dll文件

public ActionResult GetValidateImg()
{
     int width = 60, height = 28, fontsize = 12;
     string code = string.Empty;
     byte[] bytes = ValidateCode.CreateCode(out code, 4, width, height, fontsize);

     Session["v_code"] = code.ToLower();

     return File(bytes,@"image/jpeg");
}

视图

这里没有使用原生的form表单，而是使用了MVC的html辅助方法。

首先要在页面中引入所需的model：

@model xCodeMVC.Models.UserInfo

这样就能使用表单增强工具了（省略了一些代码）：

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { name = "register",onsubmit = "return checkform()"}))
{
@Html.LabelFor(model => model.UserName)
@Html.TextBoxFor(model => model.UserName, new { @class = "text-box" })

@Html.LabelFor(model => model.UserPwd)
@Html.EditorFor(model => model.UserPwd)

@Html.LabelFor(model => model.UserEmail)
@Html.EditorFor(model => model.UserEmail)

    <input class="regBtn" type="submit" value="注册" />
<input class="resetBtn" type="reset" value="重置" />

//令牌，防止重复提交
@Html.AntiForgeryToken()
//模型错误信息汇总，也可以在每一项后面添加
//@Html.ValidationMessage
@Html.ValidationSummary(false)
}

不使用原生form是为了精简代码，将复杂的验证逻辑交给MVC框架去做。

完成后台注册

表单提交的地址是AccountController中的Register方法，该方法只接受HttpPost请求。

// POST: /Account/Register
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
        
public ActionResult Register(UserInfo userInfo)
{
    string checkPwd = Request["ChkUserPwd"].ToString();
    string vCode = Request["vCode"].ToString().ToLower();

    if(string.IsNullOrEmpty(checkPwd))
    {
        ModelState.AddModelError("ChkUserPwd", "确认密码不能为空");
    }
    else
{
    if (Md5Hash(checkPwd) != Md5Hash(userInfo.UserPwd))
        {
              ModelState.AddModelError("PwdRepeatError", "确认密码不正确");
        }
    }
            

    if (!ChkValidateCode(vCode))
    {
         ModelState.AddModelError("vCode", "验证码不正确");
    }

    bool isUserExists = db.userInfo.Where(a => a.UserName == userInfo.UserName).Count() != 0;
    bool isEmailExists = db.userInfo.Where(a => a.UserEmail == userInfo.UserEmail).Count() != 0;

    if (isUserExists) ModelState.AddModelError("UserName", "用户名已被占用");
    if (isEmailExists) ModelState.AddModelError("UserEmail", "邮箱已被注册");

            
    if(!ModelState.IsValid)
    {
        return View(userInfo);
    }
    userInfo.RegisterTime = DateTime.Now;
    userInfo.UserPwd = Md5Hash(userInfo.UserPwd);
    try
    {
        db.userInfo.Add(userInfo);        
        db.SaveChanges();
        return RedirectToAction("Index", "Home");
    }
    catch (DbEntityValidationException dbEx)
    {
        foreach (var validationErrors in dbEx.EntityValidationErrors)
        {
            foreach (var validationError in validationErrors.ValidationErrors)
            {
            System.Diagnostics.Trace.TraceInformation("Property: {0} Error: {1}",
            validationError.PropertyName,
            validationError.ErrorMessage);
            }
        }
        throw;
    }
}

问题汇总

l 为什么EF自动生成的表名后自动添加了s？

这种情况是EF默认的，可以修改一些配置去掉默认规则。

方法一：

在Models.cs中修改，在类名前加上属性[Table(TableName)]

namespace xCodeMVC.Models
{
    [Table("UserInfo")]
    public class UserInfo
    {
        public int UserID { get; set; }
        //......
    }
}

方法二：

在DBContext.cs中修改

namespace xCodeMVC.Models
{
    public class DBContext : DbContext
{
        protected override void OnModelCreating(DbModelBuilder modelBuilder)
        {
            //modelBuilder.Entity<UserInfo>().ToTable("UserInfo");
//或者
//移除默认约定规则，比如在表名后默认加上“s”
modelBuilder.Conventions.Remove<PluralizingTableNameConvention>();
            base.OnModelCreating(modelBuilder);
    }

        public DBContext() : base("connection") { }

    public DbSet<UserInfo> userInfo { get; set; }
}
}

l 如何为数据库初始化一些数据？

l 使用WebAPI如何返回JSON？

打开AppStart中的webapi配置文件

将以下代码添加到Register中：

//webapi默认返回xml格式，添加如下代码将返回json格式
config.Formatters.JsonFormatter.SupportedMediaTypes.Add(
                new MediaTypeHeaderValue("text/html"));

在webapi的Controller中使用object返回json，例如：

public object GetUserInfoByName(string username)
{
    username = HttpUtility.UrlDecode(username);
    return GetUserInfo(a=>a.UserName == username);
}

l 让Action接受Get请求

在方法名前添加属性或者为方法名添加Get前缀

[System.Web.Http.HttpGet]
public bool GetUserExists(string username)

l 如何使路由匹配不同的URL

可以参考下面的匹配模式，重点在于为每个路由指定相应的action，url里可以没有action和controller，但为其指定一些值有助于区分各个路由。

//api/getuser/1
config.Routes.MapHttpRoute(
      name: "getUserInfoByID",
      routeTemplate: "api/{controller}/{id}",
      constraints: new { id = @"^d*$" },
      defaults: new { controller = "getuser", id = RouteParameter.Optional }
);

//api/getuser/troy
config.Routes.MapHttpRoute(
       name: "getUserInfoByName",
       routeTemplate: "api/{controller}/{username}",
       constraints: new { username = @"^w*$" },
       defaults: new { controller = "getuser", action = "GetUserInfoByName" }
);

//访问形式 api/getuser/?ids=1,3,52,100...
config.Routes.MapHttpRoute(
      name: "getUserInfoByCoupleOfIds",
      routeTemplate: "api/{controller}/ids={ids}",
      constraints: new { ids = @"^d+,?$" },
      defaults: new { controller = "getuser" }
);

//api/getuser/check=troy
config.Routes.MapHttpRoute(
      name: "ChkUserExists",
      routeTemplate: "api/{controller}/check={username}",
      constraints: new { username = @"w*" },
      defaults: new { controller = "getuser", action = "ChkUserExists" }
);

l 如何调试路由

很多时候不知道程序采用了哪个路由，可以安装RouteDebugger来查看当前匹配了哪个路由。

安装方法：

工具->NuGet程序包管理器->控制台->Install-Package RouteDebugger

等待安装完成，在web.config的appsettings节点下可以看到

<add key="RouteDebugger:Enabled" value="true" />

表示路由调试已经打开了，运行程序就可以看到。

l VS2013如何添加jQuery智能提示？

在脚本中添加如下代码：

/// <reference path="jquery-1.11.1.js" />

l 为何在Session中的验证码打印出来后与上一次的相同？

这其实是正确的，因为页面生成在前，而访问验证码在后，Session是在生成验证码时记录的，此时页面的Session还是空的，随后它的值才被赋为验证码的值，所以刷新页面就看到了上一次Session中的验证码。

客户端通过以下代码访问验证码：

<img id="v_code" class="imgborder"                        src="@Url.Action("GetValidateImg", "Account")?t=@DateTime.Now.Ticks"
alt="看不清，点击换一张" />

l 对一个或多个实体的验证失败(或db.SaveChanges不起作用)

检查模型的约束要求与数据库设计是否一致，字符串长度超限等等这样的错误是不能保存成功的，但往往VS调试时又不能给出具体的错误在哪，所以可以添加一些代码查看错误详细信息。这样就能在输出窗口中可以看到具体的错误。

l 数据库正在使用，无法删除

当模型改动时，之前在Global中的设置会删除并重建数据库，但如果此时你对这个数据库有操作，比如查询之类的，删除就会失败，提示你数据库在使用。这个没找到好的解决方法，我只好采取关掉SQL Server服务再重启这样的笨方法来解决。