.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格式\n示例：[e-mail]")]
        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 = "[e-mail]",
                    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服務再重啟這樣的笨方法來解決。