ASP.NET Identity教程二：（用户管理）
由于我们这里使用的是 ASP.NET Identity 来管理用户，所以 User 数据实体是继承了 IdentityUser 的，我们只需要在派生类中编写需要扩展的属性即可。而在表现层，也就是 Web 应用程序这一层，我们只需要编写 ViewModel 即可，ViewModel 只在视图和控制中使用。最终在提交到服务器时，还是需要转换为数据实体 Model 的。
在“Yidosoft.Identity”项目中添加一个名称为“ViewModels”的文件夹，将所有的ViewModel 都放在该文件夹中。
1. 注册用户
注册用户是指将用户的信息添加到数据库中，是有用户在网站上自行完成的
1.1. 编写 AddUserViewModel
在“ViewModels”文件夹中添加一个名称为“AddUserViewModel”的类，然后编写如
下代码：
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web;
namespace jsdhh2.ViewModels
{
public class AddUserViewModel
{
#region 扩展
[Display(Name = "用户名")]
public string UserName { get; set; }
[Display(Name = "电话(手机/固话)")]
[Phone]
public string PhoneNumber { get; set; }
#endregion
[Required]
[EmailAddress]
[Display(Name = "电子邮件")]
public string Email { get; set; }
[Required]
[StringLength(100, ErrorMessage = "{0} 必须至少包含 {2} 个字符。", MinimumLength = 6)]
[DataType(DataType.Password)]
[Display(Name = "密码")]
public string Password { get; set; }
[DataType(DataType.Password)]
[Display(Name = "确认密码")]
[Compare("Password", ErrorMessage = "密码和确认密码不匹配。")]
public string ConfirmPassword { get; set; }
}
在 ViewModel 中，可以使用数据验证和注解来保证数据的正确性。
1.2. 编写 Add 方法
在 UserController 控制器中添加一个带有 HttpGet 特性的 Add()方法，用于呈现添加用户的表单信息视图。再添加一个带有 HttpPost 特性的 Add()方法，用于提交
用户信息到数据库中。完整的代码如下：
[HttpPost]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Add(AddUserViewModel addUserModel)
{
if (ModelState.IsValid)
{
var _creatTime = DateTime.Now; //注册时间
var _headerPic = "/Content/noheaderpic.png"; //默认的显示一个头像
var user = new User { UserName = addUserModel.UserName, Email = addUserModel.Email, PhoneNumber = addUserModel.PhoneNumber, CreateTime =_creatTime, HeaderPic = _headerPic };
var result = await UserManager.CreateAsync(user, addUserModel.Password);
if (result.Succeeded)
{
//登录
await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
// 发送包含此链接的电子邮件
string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
var callbackUrl = Url.Action("ConfirmEmail", "User", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
await UserManager.SendEmailAsync(user.Id, "确认你的帐户", "请通过单击 <a href=\"" + callbackUrl + "\">这里</a>来确认你的帐户");
//return RedirectToAction("List", "User");
return RedirectToAction("Index", "Home");
}
AddErrors(result);
}
return View(addUserModel);
}
在这里的两个 Add()方法上都添加了 AllowAnonymous 特性，表示可以被匿名访问。ValidateAntiForgeryToken 特性用于阻止 CSRF 攻击。
在这里我们使用了 CreateAsync()异步方法来向数据库添加用户信息，在UserManager 中，定义了许多的异步操作的方法，异步方法都是以 Async 结尾的。
.3. 编写 Add 视图
在”项目的“Views”“User”中添加一个名称为“Add”的视图，如图
中修改视图名称为“Add”，点击“添加”按钮。如图
第一次为空的 MVC 项目添加视图时，VS2015 会自动添加一些其它的文件。如：bootstrap.css、Site.css、Jquery 文件及一些公共视图，还有就是“_Layout.cshtml”
视图的基本样式。
这里使用 Bootstrap 为 Add.cshtml 视图布局页面。在 add.cshtml 视图中编写如下代码：
@model jsdhh2.ViewModels.AddUserViewModel
@{
ViewBag.Title = "Add";
}
@using (Html.BeginForm("Add", "User", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
<h4>添加用户。</h4>
<hr />
@Html.ValidationSummary("", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(m => m.UserName, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.PhoneNumber, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.PhoneNumber, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Email, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.TextBoxFor(m => m.Email, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.Password, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.Password, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(m => m.ConfirmPassword, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
@Html.PasswordFor(m => m.ConfirmPassword, new { @class = "form-control" })
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" class="btn btn-default" value="保存" />
</div>
</div>
}
在此视图中使用了Bootstrap的class来布局表单样式。并使用ValidationSummary()方法来执行验证。
4. 测试运行结果
add.cshtml 视图编写完成之后，就可以在 Visual Studio 2015 中按下 F5 键来运行一下。打开 add.cshtml 视图，如图 7-5 所示：中可以按 F5，也可以点击调试按钮。如图 7-6 所示：
此时的图 7-6 使用的是带 HttpGet 特性的 Add()方法返回的视图页面。
现在点击一下图 7-6 的“保存”按钮，浏览器不会刷新，会执行客户端验证。如图
凡是在 ViewModel 里使用了[Required]特性，都会在没有输入任何值的情况下出
现 7-7 的非空验证。
在点击“保存”按钮时，注意浏览器的刷新情况，如果没有刷新，则就执行了客户
端验证，如果刷新了，则会执行服务器端验证。
现在在图 7-7 的表单中输入内容。如图 7-8 所示：
输入完成后，点击“保存”按钮。注意：由于这是第一次使用 Entity Framework 提交数据到数据库，所以会检查相关的数据库、表是否已经创建，如果未创建，则
就会立即创建并执行操作。
当点击“保存”按钮后，就会执行带 HttpPost 特性的 Add()方法中的代码。图 7-8 的表单数据保存成功后会转到首页(Home/Index)，这也是默认路由指定的
默认路径。如图 7-9 所示：
但是也表明了我们的执行操作成功了。打开数据库查看一下，如图 7-10 所示：
在图 7-10 中可以看到，“YDIdentityDb”数据库已经创建成功了，并且还为 ASP.NETIdentity 创建相应的表结构。
与用户相关的信息是存在“AspNetUsers”表中的，打开该表可以看到我们新添加的用户信息。这也证明我们在上面所做的操作已经执行成功了。
从这些操作中可以看到，我们使用了 Entity Framework 操作持久化数据非常方便，不仅不需要编写 SQL 语句，就连数据库和表结构都不需要我们创建。另外在ASP.NET Identity 中，对用户属性的扩展是那么的方便，这在 ASP.NET Membership中，这么扩展用户属性是做不到的。
2. 用户列表
管理用户都是从用户列表开始的，在用户列表中可以查看用户信息、编辑用户信息和删除用户信息。当然也可以放个添加用户的链接用于新增用户。用户列表就
是管理用户的入口。
在用户列表视图中，我们不使用 ViewModel，直接使用 User 类即可，因为UserManager 提供了获取所有用户的方法，直接调用即可。
.2.1. 编写 List 方法
在 UserController 控制器中添加一个带有 HttpGet 特性的 List()方法，用于以列表的形式显示所有的用户。完整的代码如下：
[HttpGet]
public ActionResult List()
{
var users = UserManager.Users.ToList();
return View(users);
}
2.2. 编写 List 视图
项目的“Views”“User”文件夹中添加一个名称为“List”的视图。
@model IEnumerable<jsdhh2.Models.User>
@{
ViewBag.Title = "List";
}
<div class="wrapper wrapper-content">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h2>用户管理</h2>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="form-group">
<a class="btn btn-primary" href="/User/Add">添加</a>
<button id="btnEdit" type="button" class="btn btn-info " onclick="editModel()"><i class="fa fa-pencil"></i> 编辑</button>
<button id="btnDel" type="button" class="btn btn-danger " onclick="delData()">
<i class="fa fa-remove"></i> <span class="bold">删除</span>
</button>
<button id="btnSetRole" type="button" class="btn btn-info "><i class="fa fa-user"></i> 角色授权</button>
<button id="btnResetPwd" class="btn btn-warning"><i class="fa fa-undo"></i> 重置密码</button>
</div>
<div class="form-group">
<div class="input-group">
<input id="txtSearchKey" type="text" class="input form-control" placeholder="搜索关键字" />
<span class="input-group-btn">
<button id="btnSearch" class="btn btn btn-primary" type="button"> <i class="fa fa-search"></i> 搜索</button>
</span>
</div>
</div>
<div class="jqGrid_wrapper">
<table id="table_list"></table>
<div id="pager_list"></div>
</div>
</div>
</div>
</div>
<table class="table">
<thead>
<tr>
<th>用户名</th>
<th>电子邮件</th>
<th>QQ号码</th>
<th>微信号码</th>
</tr>
</thead>
<tbody>
@foreach (var user in Model)
{
<tr>
<td>@Html.DisplayFor(m => user.UserName)</td>
<td>@Html.DisplayFor(m => user.Email)</td>
<td>@Html.DisplayFor(m => user.QQ)</td>
<td>@Html.DisplayFor(m => user.PhoneNumber)</td>
<td>@Html.DisplayFor(m => user.CreateTime) </td>
<td>
@Html.ActionLink("编辑", "Edit", new { id = user.Id },new { @class= "btn btn-info" })
@Html.ActionLink("删除", "Del", new { id = user.Id }, new { @class = "btn btn-danger" })
</td>
</tr>
}
</tbody>
</table>
显示效果为
这里使用了表格 table 以列表的形式的显示用户基本信息，使用了 Bootstrap 中的class=”table”来布局样式。在<table>标记上面还添加了一个链接，用于转到添加用户的页面：
<a class="btn btn-primary" href="/User/Add">添加</a>
这样可以在用户列表中直接点击“添加用户”链接转到添加用户的页面。那么此时，我们就可以在“Add()”方法中，将添加用户成功后转到的页面修改为 List 页面。打开“UserController”，修改带有 HttpPost 的 Add()方法。如下代码：
[AllowAnonymous]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Add(AddUserViewModel addUserModel)
{
if (ModelState.IsValid)
{
var user = new User { UserName = addUserModel.Email, Email = addUserModel.Email, QQNumber = addUserModel.QQNumber, WechatNumber = addUserModel.WechatNumber };
var result = await UserManager.CreateAsync(user, addUserModel.Password);
if (result.Succeeded)
{
//登录
await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
// 发送包含此链接的电子邮件
string code = await UserManager.GenerateEmailConfirmationTokenAsync(user.Id);
var callbackUrl = Url.Action("ConfirmEmail", "User", new { userId = user.Id, code = code }, protocol: Request.Url.Scheme);
await UserManager.SendEmailAsync(user.Id, "确认你的帐户", "请通过单击 <a href=\"" + callbackUrl + "\">这里</a>来确认你的帐户");
return RedirectToAction("List", "User");
//eturn RedirectToAction("Index", "Home");
}
AddErrors(result);
}
return View(addUserModel);
现在新建一个用户，自动就跑到所有用户列表了。
3.增加详细页面显示
先在List视图中增加详细信息按钮
<td>
@Html.ActionLink("详情", "DetailsList", new { id = user.Id }, new { @class = "btn btn-info" })
@Html.ActionLink("编辑", "Edit", new { id = user.Id },new { @class= "btn btn-info" })
@Html.ActionLink("删除", "Del", new { id = user.Id }, new { @class = "btn btn-danger" })
</td>
在UserControoer中增加DetailsList方法
[HttpGet]
public ActionResult DetailsList(string id)
{
if (string.IsNullOrWhiteSpace(id))
{
return new HttpStatusCodeResult(System.Net.HttpStatusCode.BadRequest);
}
User user = UserManager.FindById(id);
return View(user);
}
然后增加一个DetailsList视图
@model jsdhh2.Models.User
@{
ViewBag.Title = "List";
}
<div class="wrapper wrapper-content">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h2>详细信息</h2>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
</div>
</div>
<div class="ibox-content">
<div class="form-group">
<a class="btn btn-primary" href="/User/List">返回</a>
</div>
</div>
</div>
</div>
<div>
<hr />
<dl class="dl-horizontal">
<dt>
</dt>
<dd>
<img src="@Model.HeaderPic" width="80" height="80" />
</dd>
<dt>
@Html.DisplayNameFor(model => model.UserName)
</dt><dd>
@Html.DisplayFor(model => model.UserName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.RealName)
</dt><dd>
@Html.DisplayFor(model => model.RealName)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Email)
</dt><dd>
@Html.DisplayFor(model => model.Email)
</dd>
<dt>
@Html.DisplayNameFor(model => model.QQ)
</dt><dd>
@Html.DisplayFor(model => model.QQ)
</dd>
<dt>
@Html.DisplayNameFor(model => model.PhoneNumber)
</dt><dd>
@Html.DisplayFor(model => model.PhoneNumber)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Address)
</dt><dd>
@Html.DisplayFor(model => model.Address)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Gender)
</dt><dd>
@Html.DisplayFor(model => model.Gender)
</dd>
<dt>
@Html.DisplayNameFor(model => model.SpouseId)
</dt><dd>
@Html.DisplayFor(model => model.SpouseId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.Address)
</dt><dd>
@Html.DisplayFor(model => model.Address)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DepartmentId)
</dt><dd>
@Html.DisplayFor(model => model.DepartmentId)
</dd>
<dt>
@Html.DisplayNameFor(model => model.BirthDate)
</dt><dd>
@Html.DisplayFor(model => model.BirthDate)
</dd>
<dt>
@Html.DisplayNameFor(model => model.TheHour)
</dt><dd>
@Html.DisplayFor(model => model.TheHour)
</dd>
<dt>
@Html.DisplayNameFor(model => model.DetailedTime)
</dt>
<dd>
@Html.DisplayFor(model => model.DetailedTime)
</dd>
</div>
显示效果为
4.
