ASP.NET Core 5 MVC Display Id in a input-form as a Select

Question

I am working on an application were I am working with employees. Every employee has their own ID they recieve when being created.

But I am working with diffrent roles also, for example Mananger Id. I have a form, which at this moment just is an ordinary input-form where the user can write in any kind of number, for example "12515215".

I want to make so the already existing Ids of the employees is selectable in that form instead. So the user dont have a another choice but to choose one of those Ids already existing in the database. This is my controller action:

region Create Employees
        public IActionResult AddEmployee()
        {
            return View();
        }

    // Create employees
    [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<IActionResult> AddEmployee([Bind("Id,FirstName,LastName,Salary,IsCEO,IsManager,ManangerId")] Employee employee)
    {
         
        if (ModelState.IsValid)
        {
            _context.Add(employee);
            await _context.SaveChangesAsync();
            return RedirectToAction(nameof(Index));
        }
        return View(employee);
    }
    #endregion

This is how the Razorpage looks like.

@model TheLibrary.Models.Employee

@{
    ViewData["Title"] = "Add New Employee";
}

<h1>Add new Employee</h1>

<h4>Employee</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="AddEmployee">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="FirstName" class="control-label"></label>
                <input asp-for="FirstName" class="form-control" />
                <span asp-validation-for="FirstName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="LastName" class="control-label"></label>
                <input asp-for="LastName" class="form-control" />
                <span asp-validation-for="LastName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <p>Add a rank number between 1-10 to calculate salary</p>
                <label asp-for="Salary" class="control-label"></label>
                <input asp-for="Salary" class="form-control" />
                <span asp-validation-for="Salary" class="text-danger"></span>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" asp-for="IsCEO" /> @Html.DisplayNameFor(model => model.IsCEO)
                </label>
            </div>
            <div class="form-group form-check">
                <label class="form-check-label">
                    <input class="form-check-input" asp-for="IsManager" /> @Html.DisplayNameFor(model => model.IsManager)
                </label>
            </div>
            <div class="form-group">
                <label asp-for="ManangerId" class="control-label"></label>
                <input asp-for="ManangerId" class="form-control" />
                <span asp-validation-for="ManangerId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Add Employee" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

And the model

public class Employee
    {
        public int Id { get; set; }
        [DisplayName("First Name")]
        [Required]
        public string FirstName { get; set; }
        [DisplayName("Last Name")]
        [Required]
        public string LastName { get; set; }
        [Range(1, 10)]
        [Required]
        public decimal Salary { get; set; }
        public bool IsCEO { get; set; }
        public bool IsManager { get; set; }
        public int ManangerId { get; set; }
    }

The Primary ID key and this "ManangerId" is part of the same model. Any Idea on how to change it so I can add the existing Ids as a select instead of just an ordinary input form, in my razorpage?

Answer 1

I fixed the problem. Since in my Default.cs file i had

@model IEnumerable<Employee>

<select>
    @foreach(var e in Model)
            {
                <option value="@e.Id">@e.Id - @e.FirstName @e.LastName</option>
            }
</select>

And in my view I had

<div id="TheManagerId" class="form-group">
                <label>Here is my label I want to modify with jQuery</label>
                <label id="ManagerLabel" asp-for="ManangerId" class="control-label"></label>
                <select name="ManangerId" asp-for="ManangerId" class="form-control">
                    <option>@await Component.InvokeAsync("Managers") </option>
                </select>

I simply removed the <select> in the Default.cs file and the <option> in the razor view. So this is how both files look like Default.cs:

 @foreach(var e in Model)
            {
                <option value="@e.Id">@e.Id - @e.FirstName @e.LastName</option>
            }

And razor view:

<div id="TheManagerId" class="form-group">
                <label>Here is my label I want to modify with jQuery</label>
                <label id="ManagerLabel" asp-for="ManangerId" class="control-label"></label>
                <select name="ManangerId" asp-for="ManangerId" class="form-control">
                    @await Component.InvokeAsync("Managers")
                </select>
                <span asp-validation-for="ManangerId" class="text-danger"></span>
            </div>