How do I display and update my custom Identity fields in my ASP.NET Core application?

Question

I've created an ASP.NET Core application using core 3.1 and I have included the out of the box authentication with it. I wanted to add some custom fields for my users to complete such as Location and Instagram. Following the instructions here I created an ApplicationUser.cs model which inherits IdentityUser and successfully migrated that model to add the fields to my AspNetUsers table. All ok so far.

I wanted to add those fields to my user account page. I realised I couldn't see a user account page. Using the following instructions I added the missing account pages to my project. When I add my missing fields however, it claims that they cannot be found despite the fact the entire project identity is using ApplicationUser as per the instructions in the documentation.

Areas/Pages/Account/Manage/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" />
}

Both Location and Instagram return the error that they cannot be found in the model. Have I missed a step or is there something else I need to be doing to add these fields?

Answer 1

You should add properties for Location and Instagram in IndexModel.

Update the InputModel in Areas/Identity/Pages/Account/Manage/Index.cshtml.cs :

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

    public string Instagram { get; set; }

    public string Location { get; set; }

}

Update LoadAsync method for loading/showing the properties :

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
    };
}

Update OnPostAsync method to update Location and Instagram properties:

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();
}

At last , modify the Index.cshtml to include the two properties :

<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>

You can also click here for more details .