MVC 将脚手架字段更新为下拉列表

Question

Web 开发新手在这里。 我目前正在使用 VS2019 并创建了一个 MVC 应用程序来为内部用户提供 CRUD 功能 (SQL)。 我们有一个 CostCentre 字段，它应该是一个下拉列表而不是文本输入。

如何更改代码以显示下拉列表而不是文本输入？

这是我的 controller 中包含的内容：

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit([Bind(Include = "Magic,EmployeeCode,UserName,Entity,AD_SAM,MSTelNum,CostCentre,SysUser_AD,Sys_User_K8")] EmpCosDim empCosDim)
{
    if (ModelState.IsValid)
    {
        db.Entry(empCosDim).State = EntityState.Modified;
        db.SaveChanges();
        return RedirectToAction("Index");
    }
    return View(empCosDim);
}

我看对地方了吗？

更新编辑视图 cshtml：

@model EmployeeBilling.EmpCosDim
@{
    ViewBag.Title = "Edit";
}

<h2>Edit</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()
    
    <div class="form-horizontal">
        <h4>EmpCosDim</h4>
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
        @Html.HiddenFor(model => model.Magic)

        <div class="form-group">
            @Html.LabelFor(model => model.EmployeeCode, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.EmployeeCode, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.EmployeeCode, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.UserName, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.UserName, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.UserName, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Entity, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Entity, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Entity, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.AD_SAM, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.AD_SAM, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.AD_SAM, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.MSTelNum, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.MSTelNum, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.MSTelNum, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CostCentre, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.CostCentre, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.CostCentre, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.SysUser_AD, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.SysUser_AD, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.SysUser_AD, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.Sys_User_K8, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.EditorFor(model => model.Sys_User_K8, new { htmlAttributes = new { @class = "form-control" } })
                @Html.ValidationMessageFor(model => model.Sys_User_K8, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            <div class="col-md-offset-2 col-md-10">
                <input type="submit" value="Save" class="btn btn-default" />
            </div>
        </div>
    </div>
}

<div>
    @Html.ActionLink("Back to List", "Index")
</div>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
}

更新根据您发送的链接添加外键，但仍不显示下拉列表。 我在这里做了改变：

// EmpCosDim.cs :

namespace EmployeeBilling
{
    using System;
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;
    using System.ComponentModel.DataAnnotations.Schema;

    public class EmpCosDim
    {
        public int Magic { get; set; }
        public string EmployeeCode { get; set; }
        public string UserName { get; set; }
        public string Entity { get; set; }
        public string AD_SAM { get; set; }
        public string MSTelNum { get; set; }

        [ForeignKey("ContainingCostCentre")]
        public string CostCentre { get; set; }
        public virtual EmpCosDim ContainingCostCentre { get; set; }

        public string SysUser_AD { get; set; }
        public string Sys_User_K8 { get; set; }
    }
}

更新所以我尝试将 CostCentre 更新为我的 EmpCosDim.cs 文件中的列表：

public class EmpCosDim
{
    [Key]
    public int Magic { get; set; }
    public string EmployeeCode { get; set; }
    public string UserName { get; set; }
    public string Entity { get; set; }
    public string AD_SAM { get; set; }
    public string MSTelNum { get; set; }

    public List<SelectCostCentreItem> CostCentre { get; set; }

    public string SysUser_AD { get; set; }
    public string Sys_User_K8 { get; set; }
}

public class SelectCostCentreItem
{
    public string CostCentre { get; set; }
}

但是我的 Controller EmpCosDimsController.cs 出现错误：

public ActionResult Index()
{
    return View(db.EmpCosDims.ToList());
}

这似乎是因为我更换了：

public string CostCentre { get; set; }

和

public List<SelectCostCentreItem> CostCentre { get; set; }

如何更新我的 controller 以查看列表并显示在下拉列表中？

Answer 1

在您的编辑屏幕中的 CostCentre 下拉列表实际上将显示您要选择的所有 CostCentre 的列表。 此列表在 EmpCosDim model 和视图中不容易获得。 您需要构建一个选择列表并传递给您的视图并在视图中进行更改以获取该列表并显示为下拉列表。 按着这些次序 -

在 Edit 操作中（对于 Get 而不是 post 操作）像这样填充视图包

ViewBag.CostCentre = new SelectList([db.Concetres], ["Name"], ["Name"], 
[empCosDim.CostCentre]);

在这里，您必须用适当的变量/方法替换括号中的项目。 对于 select 列表构造函数，第一个是所有成本中心的源/列表，第二个是要在选择时保存为值的 EmpCosDim 的字段名称，第三个是要显示的 EmpCosDim 的字段在下拉列表中，最后一个是您要默认选择的值。

在编辑视图中替换以下代码

<div class="form-group">
    @Html.LabelFor(model => model.CostCentre, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        @Html.EditorFor(model => model.CostCentre, new { htmlAttributes = new { @class = "form-control" } })
        @Html.ValidationMessageFor(model => model.CostCentre, "", new { @class = "text-danger" })
    </div>
</div>

与下一个代码块

<div class="form-group">
        @Html.LabelFor(model => model.CostCentre, htmlAttributes: new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @Html.DropDownList("CostCentre", (IEnumerable<SelectListItem>)ViewBag.CostCentre, new { htmlAttributes = new { @class = "form-control" } })
            @Html.ValidationMessageFor(model => model.CostCentre, "", new { @class = "text-danger" })
        </div>
 </div>