c# - 如何在 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

您应该为 Location 添加属性和Instagram在IndexModel .

更新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了解更多详情。