C# ASP.NET Core 5 MVC以输入形式显示Id作为选择

我和员工一起工作时，我正在处理一份申请。 每个员工在创建时都有自己的ID

但我也在扮演不同的角色，比如管理者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

主ID密钥和此“ManangerId”是同一模型的一部分。

---

您知道如何更改它，以便我可以在razorpage中将现有Id添加为select，而不仅仅是普通的输入表单吗？

将所有管理器Id作为

列表

存储在ViewBag中，并使用

选择

标记和标记助手来呈现列表

例如：

控制器：

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

public IActionResult Index（）
{
List managerids=newlist（）{100110003}；
列表项=新列表（）；
foreach（managerids中的变量id）
{
添加（新SelectListItem{Text=id.ToString（），Value=id.ToString（）}）；
}
ViewBag.Manager=项目；
返回视图（）；
}

视图：

结果:

---

我在第一篇文章中创建了一个ViewModel，其代码与Employee.cs完全相同 我还在项目中创建了一个components文件夹，其中包含一个名为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文件夹。所以视图>共享>组件>管理器 在我添加的Managers文件夹中 Default.cs

@model IEnumerable<Employee>

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

@model IEnumerable
@foreach（模型中的var e）
{
@e、 Id-@e.FirstName@e.LastName
}

这是我的剃须刀语法

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

@wait Component.InvokeAsync（“管理者”）

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

我试过这样做

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

这是我想用jQuery修改的标签
@wait Component.InvokeAsync（“管理者”）

但是，这是： 我在select外部得到了它，而不是select内部的Id 我解决了这个问题。 因为在我的Default.cs文件中

@model IEnumerable<Employee>

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

@model IEnumerable
@foreach（模型中的var e）
{
@e、 Id-@e.FirstName@e.LastName
}

在我看来，我有

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

这是我想用jQuery修改的标签
@wait Component.InvokeAsync（“管理者”）

我只是删除了Default.cs文件中的

和 剃刀视野。 这就是两个文件的外观 Default.cs：

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

@foreach（模型中的变量e）
{
@e、 Id-@e.FirstName@e.LastName
}

和razor视图：

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

这是我想用jQuery修改的标签
@wait Component.InvokeAsync（“管理者”）

您必须显示控制器操作和完整视图。还有管理类和用户类。嘿，谢谢你的评论！我用所有相关代码、控制器操作和整个razor页面以及模型类编辑了我的问题。为什么要将其添加到输入元素？目前，managerID的输入元素只是一个常规输入，用户可以添加任何类型的数字。我希望它只显示经理的现有ID。我已经有了视图组件中所有管理者的现有ID。因此，基本上我希望它与您的代码示例一样，但是由于我已经开始使用我的代码，并且已经使用了相当多的代码，所以我希望尝试以这种方式完成它。你知道怎么做吗？我想你的代码没有问题，你只需要在select标签上添加一个name属性，比如

，然后提交所选的选项值。

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

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