AspNet Identity中的个人资料图片

Question

在我的应用程序中,我想在布局页面(_LoginPartial)中显示用户配置文件图像.

在AspNet Identity会员资格中他们是一张AspNerUser桌子.我想自定义此AspNerUser表以维护图像字段.

然后在布局页面(_LoginPartial)视图中显示该图像.

我怎样才能做到这一点 ？真的很感激可以建议一种方法来做到这一点

编辑

我使用ADO.NET实体模型生成了我的DataBaseContext名称,数据库上下文名称是 ProjectNameEntities

然后我尝试在PMC上使用以下命令启用迁移

Enable-Migrations -ContextTypeName myProject.Models.ProjectNameEntities

但后来我得到了跟随错误

不支持从使用Database First或Model First创建的DbContext创建DbModelBuilder或编写EDMX.EDMX只能从不使用现有DbCompiledModel创建的Code First DbContext中获取.

这可能与edmx模型有关吗？

Answer 1

添加字段模型(代码优先)

您需要做的第一件事是修改构建数据库表的ApplicationUser Model.该类通常位于IdentityModels.cs文件中.添加一个新字段来保存图像:

public class ApplicationUser : IdentityUser
{
   // maybe be other code in this model
    public byte[] ProfilePicture { get; set; }
}

接下来,您需要更新数据库以反映更改(假设您使用的是Code First).您可以在本文中找到有关该过程的详细信息.

Enable-Migration
Add-Migration "Added user profile"
Update-Database (will apply any pending migrations to the database)

返回个人资料图片

现在向控制器添加一个动作,类似于:

public FileContentResult Photo(string userId)
{
    // get EF Database (maybe different way in your applicaiton)
    var db = HttpContext.GetOwinContext().Get<ApplicationDbContext>();

    // find the user. I am skipping validations and other checks.
    var user = db.Users.Where(x => x.Id == userId).FirstOrDefault();

    return new FileContentResult(user.ProfilePicture, "image/jpeg");
}

最后,在您_LoginPartial向我们刚创建的Action添加以下调用,以便显示图像.您需要将控制器名称更改为您执行操作的控制器.

<img src="@Url.Action("Photo", "Account" , new { UserId=User.Identity.GetUserId() })" />

保存个人资料图片

首先,您需要创建一个页面来上传图像.创建一个返回表单的操作:

[HttpGet]
public ActionResult Profile()
{
    ViewBag.Message = "Update your profile";
    return View();
}

Razor视图将被称为Profile.cshtml,看起来有一个表格如下:(请注意,根据您的项目结构,Action和控制器位置可能会有所不同)

@using (Html.BeginForm("Profile", "Manage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <fieldset>
        <legend>Photo</legend>
        <div class="editor-label">
            <label for="profile">FileName:</label>
        </div>
        <div class="editor-field">
             <input name="Profile" id="profile" type="file" />
        </div>
        <p>
        <input type="submit" value="Create" />
        </p>
     </fieldset>
}

表单将回发到一个动作,因此您需要创建一个看起来像:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Profile(HttpPostedFileBase Profile)
{
    // get EF Database (maybe different way in your applicaiton)
    var db = HttpContext.GetOwinContext().Get<ApplicationDbContext>();

    // find the user. I am skipping validations and other checks.
    var userid = User.Identity.GetUserId();
    var user = db.Users.Where(x => x.Id == userid).FirstOrDefault();

    // convert image stream to byte array
    byte[] image = new byte[Profile.ContentLength];
    Profile.InputStream.Read(image, 0, Convert.ToInt32(Profile.ContentLength));

    user.ProfilePicture = image;

    // save changes to database
    db.SaveChanges();

    return RedirectToAction("Index", "Home");
}

请注意,需要根据您的规则进行验证和检查,但这是它的工作原理的基本思路.

创建一个GitHub的项目,显示上述工作示例中的基础知识:https://github.com/jsturtevant/mvc-aspnet-identity2-profile-picture-sample