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>