Adding Dropdown to Register.cshtml in Identity - asp.net-core-mvc

Question

I am using Microsoft Identity in my Asp.NET MVC Core 7.0 application with a customized IdentityUser:
public class SparkleWebAppUser : IdentityUser
{
[Required(ErrorMessage = "Must provide a user name")]
[StringLength(15, ErrorMessage = "User name cannot be longer than 15 letters")]
[Display(Name = "User Name")]
public override string UserName { get; set; } = string.Empty;
[Required(ErrorMessage = "Must provide first name")]
[StringLength(20, ErrorMessage = "First name cannot be longetr than 20 letters")]
public string FirstName { get; set; } = string.Empty;
[Required(ErrorMessage = "Must provide last name")]
[StringLength(20, ErrorMessage = "First name cannot be longer than 20 letters")]
public string LastName { get; set; } = string.Empty;
[Required(ErrorMessage = "Must provide a parent id to continue. Please contact your company/organisation to get parents id.")]
[Display(Name = "Your Organization's ID")]
public int OrgId { get; set; }
[Required(ErrorMessage = "Must mention type of application user")]
//[ForeignKey("UserType")]
public AppUserType AppUserType { get; set; }
[NotMapped]
public IEnumerable<AppUserType> SelectedAppUserType { get; set; }
public virtual WorkLocation? OfficeName { get; set; }
[Required(ErrorMessage = "Must provide Id Number provided to you by your organization")]
[DataType(DataType.Text)]
[Display(Name = "Your personal ID in the organization")]
public string IdNumber { get; set; } = string.Empty;
[Display(Name = "Profile Picture")]
public byte[]? ProfilePic { get; set; }
[Display(Name = "Full Name")]
[NotMapped]
public string FullName { get { return (FirstName + " " + LastName); } }
}
below is the model of AppUserType:
public class AppUserType
{
[Key]
[ScaffoldColumn(false)]
public int Id { get; set; }
[Required]
[StringLength(15, ErrorMessage = "Name cannot be longer than 15 letters")]
[Display(Name = "User Type Name")]
public string Name { get; set; } = String.Empty;
[Display(Name = "App Users")]
public ICollection<SparkleWebAppUser>? lIMISAppUsers { get; set; }
}
The Register in Identity is given below:
#page
#using iStar.Sparkle.WebDev.Areas.Identity.Models;
#model RegisterModel
#{
ViewData["Title"] = "New User Sign Up";
//Layout = "~/Areas/Identity/Views/Shared/_IdentityLayout.cshtml";
}
<h1>#ViewData["Title"]</h1>
<div class="row">
<div class="col-md-4">
<form id="registerForm" asp-route-returnUrl="#Model.ReturnUrl" method="post">
<h2>Create a new account.</h2>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger" role="alert"></div>
<div class="form-floating mb-3">
<input asp-for="Input.UserName" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.UserName">User Name</label>
<span asp-validation-for="Input.UserName" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.FirstName" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.FirstName">First Name</label>
<span asp-validation-for="Input.FirstName" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.LastName" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.LastName">Last Name</label>
<span asp-validation-for="Input.LastName" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.OrgId" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.OrgId">Company ID</label>
<span asp-validation-for="Input.OrgId" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.OfficeName" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.OfficeName">Company's Office Name</label>
<span asp-validation-for="Input.OfficeName" class="text-danger"></span>
</div>
#* <div class="form-floating mb-3">
<input asp-for="Input.AppUserType" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.AppUserType">Access Type</label>
<span asp-validation-for="Input.AppUserType" class="text-danger"></span>
</div>*#
<div class="form-group mb-3">
#*<select asp-for="Input.AppUserType" asp-items="#(new SelectList(AppUserType, "Id", "Name"))" value="Id">Access Type</select>*#
#*<input asp-for="Input.AppUserType" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />*#
<label asp-for="Input.AppUserType">Access Type</label>
<span asp-validation-for="Input.AppUserType" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.Email" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />
<label asp-for="Input.Email">Email</label>
<span asp-validation-for="Input.Email" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.Password" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
<label asp-for="Input.Password">Password</label>
<span asp-validation-for="Input.Password" class="text-danger"></span>
</div>
<div class="form-floating mb-3">
<input asp-for="Input.ConfirmPassword" class="form-control" autocomplete="new-password" aria-required="true" placeholder="password" />
<label asp-for="Input.ConfirmPassword">Confirm Password</label>
<span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
</div>
<button id="registerSubmit" type="submit" class="w-100 btn btn-lg btn-primary">Register</button>
</form>
</div>
<div class="col-md-6 col-md-offset-2">
<section>
<h3>Use another service to register.</h3>
<hr />
#{
if ((Model.ExternalLogins?.Count ?? 0) == 0)
{
<div>
<p>
There are no external authentication services configured. See this <a href="https://go.microsoft.com/fwlink/?LinkID=532715">article
about setting up this ASP.NET application to support logging in via external services</a>.
</p>
</div>
}
else
{
<form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="#Model.ReturnUrl" method="post" class="form-horizontal">
<div>
<p>
#foreach (var provider in Model.ExternalLogins!)
{
<button type="submit" class="btn btn-primary" name="provider" value="#provider.Name" title="Log in using your #provider.DisplayName account">#provider.DisplayName</button>
}
</p>
</div>
</form>
}
}
</section>
</div>
</div>
#section Scripts {
<partial name="_ValidationScriptsPartial" />
}
I want to use a drop down SelectItemList for AppUserType in the Register page. I have tried several ways but none is working. The last one mentioned here
<div class="form-group mb-3">
<select asp-for="Input.AppUserType" asp-items="#(new SelectList(AppUserType, "Id", "Name"))" value="Id">Access Type</select>
#*<input asp-for="Input.AppUserType" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />*#
<label asp-for="Input.AppUserType">Access Type</label>
<span asp-validation-for="Input.AppUserType" class="text-danger"></span>
</div>
looks quite sensible but I don't know how can I fill the drop down from table 'AppUserTypes' in this dropdown.

Answer 1

Is your dropdown's value from a database table?
You can try to create a property into the RegisterModel:
[BindProperty]
public SelectList DropDown { get; set; }
public async Task OnGetAsync(string returnUrl = null)
{
DropDown = new SelectList(_context.AppUserType.ToList(),"Id","Name");
//...
}
And in Register.cshtml:
<div class="form-group mb-3">
<select asp-for="Input.AppUserType" aria-required="true" asp-items="#Model.DropDown" value="Id">Access Type</select>
#*<input asp-for="Input.AppUserType" class="form-control" autocomplete="on" aria-required="true" placeholder="name#example.com" />*#
<label asp-for="Input.AppUserType">Access Type</label>
<span asp-validation-for="Input.AppUserType" class="text-danger"></span>
</div>