在本文中，将详细介绍如何在ASP.NET MVC应用程序中使用ASP.NET Identity进行用户角色管理和动态菜单的创建。将学习如何上传和存储用户个人资料图片到SQL Server中的AspNetUsers表，并在主页和标题栏中显示已认证登录用户的上传的个人资料图片。
要开始本教程，需要有以下条件：
首先，需要创建一个数据库来存储所有的ASP.NET Identity详细信息。这里使用的是SQL Server 2014。请在SQL Server中运行以下脚本来创建数据库：
USE MASTER;
GO
-- 检查数据库是否存在，如果存在则删除并创建新数据库
IF EXISTS (
SELECT [name]
FROM sys.databases
WHERE [name] = 'UserProfileDB'
)
DROP DATABASE UserProfileDB;
GO
CREATE DATABASE UserProfileDB;
GO
USE UserProfileDB;
GO
安装Visual Studio 2015后，点击“开始”，然后“程序”，选择“Visual Studio 2015”。点击“Visual Studio 2015”，点击“新建”，然后“项目”，选择“Web”，然后选择“ASP.NET Web应用程序”。输入项目名称并点击“确定”。选择“MVC”并点击“确定”。
在web.config文件中，可以找到DefaultConnection连接字符串。默认情况下，ASP.NET MVC将使用此连接字符串创建所有与ASP.NET Identity相关的表，如AspNetUsers等。在这里的连接字符串中，将使用新创建的数据库名称。
<connectionStrings>
<add name="DefaultConnection" connectionString="data source=YOURSERVERNAME; initial catalog=UserProfileDB;user id=UID;password=PWD;Integrated Security=True" providerName="System.Data.SqlClient" />
</connectionStrings>
在IdentityModels.cs中，需要添加一个image属性，用于将图片存储到数据库中。在ApplicationUser类中，将添加一个新的属性来存储图片。这里，声明属性类型为byte，如下所示：
public class ApplicationUser : IdentityUser
{
// 在这里，添加一个字节来保存用户个人资料图片
public byte[] UserPhoto { get; set; }
}
接下来，在AccountViewModel.cs中，检查RegisterViewModel并添加以下属性：
[Display(Name = "UserPhoto")]
public byte[] UserPhoto { get; set; }
在Register.cshtml中，添加以下代码将图片上传到数据库中的AspNetUsers表。
@using (Html.BeginForm(
"Register",
"Account", FormMethod.Post,
new { @class = "form-horizontal", role = "form", enctype = "multipart/form-data" }))
<div class="form-group">
@Html.LabelFor(m => m.UserPhoto, new { @class = "col-md-2 control-label" })
<div class="col-md-10">
<input type="file" name="UserPhoto" id="fileUpload" accept=".png,.jpg,.jpeg,.gif,.tif" />
</div>
</div>
接下来在AccountController.cs中，将更新代码中的Register post方法，以自定义并存储上传的用户图片到ASP.NET Identity数据库中。
if (ModelState.IsValid)
{
// 将用户上传的照片转换为字节数组，然后保存到数据库
byte[] imageData = null;
if (Request.Files.Count > 0)
{
HttpPostedFileBase poImgFile = Request.Files["UserPhoto"];
using (var binary = new BinaryReader(poImgFile.InputStream))
{
imageData = binary.ReadBytes(poImgFile.ContentLength);
}
}
var user = new ApplicationUser { UserName = model.Email, Email = model.Email };
// 将字节数组传递给用户上下文以存储在数据库中
user.UserPhoto = imageData;
var result = await UserManager.CreateAsync(user, model.Password);
if (result.Succeeded)
{
await SignInManager.SignInAsync(user, isPersistent: false, rememberBrowser: false);
return RedirectToAction("Index", "Home");
}
AddErrors(result);
}
// 如果走到这一步，说明有什么地方失败了，重新显示表单
return View(model);
为了在主页和菜单栏中显示用户图片，将创建一个FileContentResult方法来显示图片。
public FileContentResult UserPhotos()
{
if (User.Identity.IsAuthenticated)
{
String userId = User.Identity.GetUserId();
if (userId == null)
{
string fileName = HttpContext.Server.MapPath("~/Images/noImg.png");
byte[] imageData = null;
FileInfo fileInfo = new FileInfo(fileName);
long imageFileLength = fileInfo.Length;
FileStream fs = new FileStream(fileName, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
imageData = br.ReadBytes((int)imageFileLength);
return File(imageData, "image/png");
}
// 获取用户详细信息以加载用户图片
var bdUsers = HttpContext.GetOwinContext().Get();
var userImage = bdUsers.Users.Where(x => x.Id == userId).FirstOrDefault();
return new FileContentResult(userImage.UserPhoto, "image/jpeg");
}
else
{
string fileName = HttpContext.Server.MapPath("~/Images/noImg.png");
byte[] imageData = null;
FileInfo fileInfo = new FileInfo(fileName);
long imageFileLength = fileInfo.Length;
FileStream fs = new FileStream(fileName, FileMode.Open, FileAccess.Read);
BinaryReader br = new BinaryReader(fs);
imageData = br.ReadBytes((int)imageFileLength);
return File(imageData, "image/png");
}
}
在Home Index View中，编写以下代码来显示登录用户的个人资料图片。
<h1>
Shanu Profile Image ..
<img src="@Url.Action("UserPhotos", "Home")"
style="width:160px;height:160px; background: #FFFFFF; margin: auto; -moz-border-radius: 60px; border-radius: 100px; padding: 6px; box-shadow: 0px 0px 20px #888;" />
</h1>
在_Layout.cshtml中，编写以下代码在页面顶部显示登录用户的个人资料图片：
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>
<img src="@Url.Action("UserPhotos", "Home")" height="48" width="48" />
</li>
<li>
@Html.ActionLink("Home", "Index", "Home")
</li>
<li>
@Html.ActionLink("About", "About", "Home")
</li>
<li>
@Html.ActionLink("Contact", "Contact", "Home")
</li>
</ul>
@Html.Partial("_LoginPartial")
</div>
现在，已经完成了上传和显示部分。让开始运行应用程序，并注册新用户并上传图片，然后检查输出。