ASP.NET Core 5 MVC 在输入表单中显示 Id 作为选择

Question

如果我与员工一起工作，我正在处理应用程序。 每个员工都有自己的 ID，他们在创建时收到。

但我也在处理不同的角色，例如 Mananger Id。 我有一个表单，此时它只是一个普通的输入表单，用户可以在其中输入任何类型的数字，例如“12515215”。

我想改为在该表单中选择现有的员工 ID。因此，用户别无选择，只能选择数据库中已经存在的那些 Id 之一。 这是我的控制器操作：

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

这就是 Razorpage 的样子。

@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");}
}

还有模特

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

主 ID 键和这个“ManangerId”是同一模型的一部分。 关于如何更改它的任何想法，以便我可以在我的 razorpage 中将现有的 ID 添加为选择而不是普通的输入表单？

Answer 1

将所有Manager Id作为List<SelectItem>存储在ViewBag中，并使用select标签和标签助手来渲染列表。

例如：

控制器：

public IActionResult Index()
{
    List<int> managerids = new List<int>() { 1001, 1002, 1003 };
    List<SelectListItem> items = new List<SelectListItem>();
    foreach(var id in managerids)
    {
        items.Add(new SelectListItem {  Text = id.ToString(), Value = id.ToString() });
    }
    ViewBag.Manager = items;
    return View();
}

查看：

<div class="form-group">
    <label asp-for="ManangerId" class="control-label"></label>
    <select asp-for="ManangerId" asp-items="@(ViewBag.Manager as List<SelectListItem>)" class="form-control"></select>
    <span asp-validation-for="ManangerId" class="text-danger"></span>
</div>

结果：

Answer 2

我在第一篇文章中创建了一个与 Employee.cs 完全相同的代码的 ViewModel 我还在项目中创建了一个组件文件夹，其中包含一个名为 Managers.cs 的文件。 Managers.cs 文件：

public class Managers : ViewComponent
    {
        private readonly AppDbContext _context;

        public Managers(AppDbContext context)
        {
            _context = context;
        }

        public IViewComponentResult Invoke(int? id)
        {
            var managers = _context.Employees.Where(x => x.IsManager).ToList();

            return View(managers);
        }

我还在视图的共享文件夹中添加了一个组件文件夹，在组件文件夹中我添加了一个经理文件夹。所以视图>共享>组件>经理 在我添加的 Managers 文件夹中 默认.cs

@model IEnumerable<Employee>

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

这是我的剃刀语法

<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>
                @await Component.InvokeAsync("Managers")

最后一行代码显示了经理 ID 和名称，正如我希望的那样。 但是我应该怎么做才能在“输入”元素中添加那行代码呢？

Answer 3

我试过了

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

然后这个追加： 而不是选择中的Id，我在选择之外得到了它

Answer 4

我解决了这个问题。 因为在我的 Default.cs 文件中我有

@model IEnumerable<Employee>

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

在我看来我有

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

我只是删除了 Default.cs 文件中的 <select> 和 <option> 剃刀视图。 所以这就是两个文件的样子 默认.cs：

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

和剃刀视图：

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