Asp.Net Core Razor Pages DropDownList selected item values

Question

I'm new to Asp.Net Core Razor Pages. And this is my first question on Stack Overflow. When a client is selected from a drop down list on the create jobs page I want to receive the client details from the clients page where the client is registered on and then display the cell phone number in the corresponding form field on the create a job page.

Thank you in advance.

Client Model:

public class Client
{
    public int ID { get; set; }

    [Required]
    [StringLength(50)]
    [Display(Name = "Last Name")]
    public string LastName { get; set; }

    [Required]
    [StringLength(50, ErrorMessage = "First name cannot be longer than 50 characters.")]
    [Column("FirstName")]
    [Display(Name = "First Name")]
    public string FirstName { get; set; }

    [DataType(DataType.PhoneNumber)]
    [Display(Name = "Cellphone Number")]
    public string CellNumber { get; set; }

    [EmailAddress]
    [Display(Name = "Email Address")]
    public string Email { get; set; }

    [Display(Name = "Residential Address")]
    public string ResidentialAddress { get; set; }

    [Display(Name = "Suburb")]
    public string Suburb { get; set; }

    [Display(Name = "City")]
    public string City { get; set; }

    [Display(Name = "Province")]
    public string Province { get; set; }

    [Display(Name = "Postal Code")]
    public string PostalCode { get; set; }


    [Display(Name = "Physical Address")]
    public string PhysicalAddress
    {
        get
        {
            return ResidentialAddress + ", " + Suburb + ", " + City + ", " + Province + ", " + PostalCode;
        }
    }

    [Display(Name = "Full Name")]
    public string FullName
    {
        get
        {
            return LastName + ", " + FirstName;
        }
    }

Job Model:

public class Job
{
    public int ID { get; set; }

    [StringLength(50, MinimumLength = 3)]
    public string Title { get; set; }

    [DataType(DataType.DateTime)]
    public string AppointmentDate { get; set; }

    [BindProperty, MaxLength(300)]
    public string Description { get; set; }

    public string PlumberID { get; set; }
    public string ClientID { get; set; }

    public Plumber Plumber { get; set; }

    public Client Client { get; set; }
}

On the job create page.cshtml the client must be selected from a dropdownlist and then the clients' Cellphone number must be displayed in the Cellphone number form field.

<div class="form-group">
            <label asp-for="Job.Client" class="control-label"></label>
            <select asp-for="Job.ClientID" class="form-control"
                    asp-items="@Model.ClientNameSL">
                <option value="">-- Select Client --</option>
            </select>
            <span asp-validation-for="Job.ClientID" class="text-danger" />
        </div>
        <div class="form-group">
            <label asp-for="Job.Client.CellNumber" class="control-label"></label>
            <input asp-for="Job.Client.CellNumber" class="form-control" disabled />
            <span asp-validation-for="Job.Client.CellNumber" class="text-danger"></span>
        </div>

Create job page.cshtml.cs:

public class CreateJobModel : DropDownPageModel
{
    private readonly RealAssisst.Data.ApplicationDbContext _context;

    public CreateJobModel(RealAssisst.Data.ApplicationDbContext context)
    {
        _context = context;
    }

    public IActionResult OnGet()
    {
        PopulatePlumbersDropDownList(_context);
        PopulateClientsDropDownList(_context);
        return Page();
    }

    [BindProperty]
    public Job Job { get; set; }
    public Client Client { get; set; }

    public async Task<IActionResult> OnPostAsync()
    {
        if (!ModelState.IsValid)
        {
            return Page();
        }

        var emptyJob = new Job();

        if (await TryUpdateModelAsync<Job>(
            emptyJob,
            "job",
            s => s.ID, s => s.PlumberID, s => s.ClientID, s => s.Title, s => s.AppointmentDate, s => s.Description))
        {
            _context.Jobs.Add(emptyJob);
            await _context.SaveChangesAsync();
            return RedirectToPage("./Index");
        }

        PopulatePlumbersDropDownList(_context, emptyJob.PlumberID);
        PopulateClientsDropDownList(_context, emptyJob.ClientID);
        return Page();
    }
}

Populate drop down list page:

public class DropDownPageModel : PageModel
{
    public SelectList PlumberNameSL { get; set; }
    public SelectList ClientNameSL { get; set; }
    public string ClientNumber { get; set; }

    public void PopulatePlumbersDropDownList(ApplicationDbContext _context,
        object selectedPlumber = null)
    {
        var plumbersQuery = from d in _context.Plumber
                            orderby d.FirstName
                            select d;

        PlumberNameSL = new SelectList(plumbersQuery.AsNoTracking(),
            "FullName", "FullName", selectedPlumber);
    }

    public void PopulateClientsDropDownList(ApplicationDbContext _context,
        object selectedClient = null)
    {
        var clientQuery = from d in _context.Client
                          orderby d.FirstName
                          select d;

        ClientNameSL = new SelectList(clientQuery.AsNoTracking(),
            "FullName", "FullName", selectedClient);
    }
}

Answer 1

Client.ID (and presumably Plumber.ID as well) are typed as int. However, on your Job, you've made the foreign key property typed as string. Additionally, your dropdown lists are using the FullName property as both the text and the value of the select options.

Change your Job foreign keys (ClientID and PlumberID) to be int to match the actual type of the PK, and then set the value of your options to the ID property:

ClientNameSL = new SelectList(clientQuery.AsNoTracking(),
        "ID", "FullName", selectedClient);