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

Question

我正在处理一个应用程序，因为我正在与员工一起工作。每个员工在创建时都有自己的 ID。

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

我想使现有的员工 ID select能够以那种形式代替。因此，用户别无选择，只能选择数据库中已存在的 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 添加为 select 而不仅仅是普通的输入表单？

Answer 1

在 ViewBag 中将所有 Manager Id 存储为 List<SelectItem>，并使用带有标签助手的 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

我在第一个 post 中使用与 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);
        }

我还在视图的共享文件夹中添加了一个 Components 文件夹，在 Components 文件夹中我添加了一个 Managers 文件夹。所以视图>共享>组件>经理在我添加的管理器文件夹中 Default.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>

但随后改为附加：而不是 select 内的 Id，我在 select 外得到它

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> 剃刀视图。这就是两个文件的样子 Default.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>

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

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

c#

razor

asp.net-core-mvc

asp.net-core