I'm having problems saving data to extended user properties in the Blazor UI for Identity .NET 8.
My problem is that in the OnValidSubmitAsync() method in Components/Account/Pages/Manage/Index.razor, the phone number is being saved, but nothing else.
I have narrowed the problem down to that these lines inside OnValidSubmitAsync() aren't able to get the form field data:
user.Introduction = Input.Introduction;user.Website = Input.Website;user.Instagram = Input.Instagram;user.TwitterX = Input.TwitterX;user.Facebook = Input.Facebook;If I try to hard code a value, it is being saved successfully:
user.Website = "www.test.com";So I guess it's a data-binding issue.
I have renamed the ApplicationUser to User, and it is inheriting from IdentityUser:
public class User : IdentityUser{ public string FirstName { get; set; } = string.Empty; public string LastName { get; set; } = string.Empty; public bool HasProfileImage { get; set; } public bool HasBackgropImage { get; set; } public string Introduction { get; set; } = string.Empty; public string? Website { get; set; } public string? Instagram { get; set; } public string? TwitterX { get; set; } public string? Facebook { get; set; } public List<Recipe> Recipes { get; set; } = [];}My DataContext is configured correctly, and all the properties from the model are found as columns in the AspNetUser table in the database.
In Program.cs:
builder.Services.AddIdentityCore<User>(options => options.SignIn.RequireConfirmedAccount = true) .AddEntityFrameworkStores<DataContext>() .AddSignInManager() .AddDefaultTokenProviders();I have manually entered test data in SQL Server Management Studio, and all the extended fields are being successfully loaded in OnInitializedAsync() and displayed correctly in the form fields.
This is my entire Index.razor:
@page "/Account/Manage"@inject UserManager<User> UserManager@inject SignInManager<User> SignInManager@inject IdentityUserAccessor UserAccessor@inject IdentityRedirectManager RedirectManager<PageTitle>Profile</PageTitle><h3>Profile</h3><StatusMessage /><div class="row"><div class="col-md-6"><EditForm Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post"><DataAnnotationsValidator /><ValidationSummary class="text-danger" role="alert" /><div class="form-floating mb-3"><input type="text" value="@username" class="form-control" disabled /><label for="username" class="form-label"><i class="bi bi-envelope-at"></i> Brukernavn</label></div><div class="form-floating mb-3"><InputText @bind-Value="Input.PhoneNumber" class="form-control" placeholder="Phone number" /><label for="phone-number" class="form-label"><i class="bi bi-phone"></i> Phone number</label><ValidationMessage For="() => Input.PhoneNumber" class="text-danger" /></div><div class="form-floating mb-3"><InputText @bind-Value="Input.Introduction" class="form-control" placeholder="Introduction" /><label for="introduction" class="form-label"><i class="bi bi-blockquote-left"></i> Introduction</label></div><div class="d-flex flex-row row row-cols-2"><div class="form-floating mb-3"><InputText @bind-Value="Input.Website" class="form-control" placeholder="Website" /><label for="website" class="form-label ms-3"><i class="bi bi-globe"></i> Website</label></div><div class="form-floating mb-3"><InputText @bind-Value="Input.Instagram" class="form-control" placeholder="Instagram" /><label for="instagram" class="form-label ms-3"><i class="bi bi-instagram"></i> Instagram</label></div><div class="form-floating mb-3"><InputText @bind-Value="Input.TwitterX" class="form-control" placeholder="Twitter/X" /><label for="twitterX" class="form-label ms-3"><i class="bi bi-twitter-x"></i> Twitter/X</label></div><div class="form-floating mb-3"><InputText @bind-Value="Input.Facebook" class="form-control" placeholder="Facebook" /><label for="facebook" class="form-label ms-3"><i class="bi bi-facebook"></i> Facebook</label></div></div><button type="submit" class="w-100 btn btn-lg btn-success"><i class="bi bi-save"></i> Save</button></EditForm></div></div>@code { private User user = default!; private string? username; private string? phoneNumber; [CascadingParameter] private HttpContext HttpContext { get; set; } = default!; [SupplyParameterFromForm(FormName = "profile")] private InputModel Input { get; set; } = new(); protected override async Task OnInitializedAsync() { user = await UserAccessor.GetRequiredUserAsync(HttpContext); username = await UserManager.GetUserNameAsync(user); phoneNumber = await UserManager.GetPhoneNumberAsync(user); // These are all working. All the data is loaded from DB: Input.PhoneNumber ??= phoneNumber; Input.Introduction = user.Introduction; Input.Website = user.Website; Input.Instagram = user.Instagram; Input.TwitterX = user.TwitterX; Input.Facebook = user.Facebook; } private async Task OnValidSubmitAsync() { if (Input.PhoneNumber != phoneNumber) { var setPhoneResult = await UserManager.SetPhoneNumberAsync(user, Input.PhoneNumber); if (!setPhoneResult.Succeeded) { RedirectManager.RedirectToCurrentPageWithStatus("Error: Could not set phone number.", HttpContext); } } // The form field data is not being copied to the user-object here: user.Introduction = Input.Introduction; user.Website = Input.Website; user.Instagram = Input.Instagram; user.TwitterX = Input.TwitterX; user.Facebook = Input.Facebook; // Hard coded values are successfully saved: user.Website = "www.test.com"; await UserManager.UpdateAsync(user); // This line is working await SignInManager.RefreshSignInAsync(user); RedirectManager.RedirectToCurrentPageWithStatus($"Your profile was updated.", HttpContext); } private sealed class InputModel { [Phone] [Display(Name = "Phone number")] public string? PhoneNumber { get; set; } // Exxtended fields public string? Introduction { get; set; } public string? Website { get; set; } public string? Instagram { get; set; } public string? TwitterX { get; set; } public string? Facebook { get; set; } }}update #1
If I comment out these lines in OnInitializedAsync():
//Input.Introduction = user.Introduction;//Input.Website = user.Website;//Input.Instagram = user.Instagram;//Input.TwitterX = user.TwitterX;//Input.Facebook = user.Facebook;... I am then able to save the values. But now they are not displayed in the form fields.
/end of update #1