如何在我的 ASP.NET Core 应用程序中显示和更新我的自定义标识字段？

Question

我已经使用core 3.1 创建了一个 ASP.NET Core 应用程序，并在其中包含了开箱即用的身份验证。我想为我的用户添加一些自定义字段来完成，例如Location 和Instagram。在instructions here 之后，我创建了一个继承IdentityUser 的ApplicationUser.cs 模型，并成功迁移了该模型以将字段添加到我的AspNetUsers 表中。到目前为止一切正常。

我想将这些字段添加到我的用户帐户页面。我意识到我看不到用户帐户页面。使用following instructions 我将缺少的帐户页面添加到我的项目中。但是，当我添加缺少的字段时，它声称尽管整个项目标识按照文档中的说明使用 ApplicationUser，但仍无法找到它们。

区域/页面/帐户/管理/Index.cshtml

@page
@model IndexModel
@{
    ViewData["Title"] = "Profile";
    ViewData["ActivePage"] = ManageNavPages.Index;
}

<h4>@ViewData["Title"]</h4>
<partial name="_StatusMessage" model="Model.StatusMessage" />
<div class="row">
    HEY
    <div class="col-md-6">
        <form id="profile-form" method="post">
            <div asp-validation-summary="All" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Username"></label>
                <input asp-for="Username" class="form-control" disabled />
            </div>
            <div class="form-group">
                <label asp-for="Location"></label>
                <input asp-for="Location" class="form-control" />

            </div>
            <div class="form-group">
                <label asp-for="Instagram"></label>
                <input asp-for="Instagram" class="form-control" />

            </div>
            <div class="form-group">
                <label asp-for="Input.PhoneNumber"></label>
                <input asp-for="Input.PhoneNumber" class="form-control" />
                <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
            </div>
            <button id="update-profile-button" type="submit" class="btn btn-primary">Save</button>
        </form>
    </div>
</div>

@section Scripts {
    <partial name="_ValidationScriptsPartial" />
}

Location 和 Instagram 都返回在模型中找不到它们的错误。我是否错过了一个步骤，或者我需要做些什么来添加这些字段？

Answer 1

您应该在IndexModel 中添加Location 和Instagram 的属性。

更新Areas/Identity/Pages/Account/Manage/Index.cshtml.cs中的InputModel：

public class InputModel
{
    [Phone]
    [Display(Name = "Phone number")]
    public string PhoneNumber { get; set; }

    public string Instagram { get; set; }

    public string Location { get; set; }

}

更新LoadAsync 加载/显示属性的方法：

private async Task LoadAsync(ApplicationUser user)
{
    var userName = await _userManager.GetUserNameAsync(user);
    var phoneNumber = await _userManager.GetPhoneNumberAsync(user);



    Username = userName;

    Input = new InputModel
    {
        PhoneNumber = phoneNumber,

        Instagram=user.Instagram,

        Location = user.Location
    };
}

更新OnPostAsync方法来更新Location和Instagram属性：

public async Task<IActionResult> OnPostAsync()
{
    var user = await _userManager.GetUserAsync(User);
    if (user == null)
    {
        return NotFound($"Unable to load user with ID '{_userManager.GetUserId(User)}'.");
    }

    if (!ModelState.IsValid)
    {
        await LoadAsync(user);
        return Page();
    }

    var phoneNumber = await _userManager.GetPhoneNumberAsync(user);
    if (Input.PhoneNumber != phoneNumber)
    {
        var setPhoneResult = await _userManager.SetPhoneNumberAsync(user, Input.PhoneNumber);
        if (!setPhoneResult.Succeeded)
        {
            var userId = await _userManager.GetUserIdAsync(user);
            throw new InvalidOperationException($"Unexpected error occurred setting phone number for user with ID '{userId}'.");
        }
    }
    if (Input.Instagram != user.Instagram)
    {
        user.Instagram = Input.Instagram;
    }

    if (Input.Location != user.Location)
    {
        user.Location = Input.Location;
    }

    await _userManager.UpdateAsync(user);


    await _signInManager.RefreshSignInAsync(user);
    StatusMessage = "Your profile has been updated";
    return RedirectToPage();
}

最后，修改 Index.cshtml 以包含这两个属性：

<div class="form-group">
    <label asp-for="Input.Location"></label>
    <input asp-for="Input.Location" class="form-control" />

</div>
<div class="form-group">
    <label asp-for="Input.Instagram"></label>
    <input asp-for="Input.Instagram" class="form-control" />

</div>

您也可以点击here了解更多详情。