如何在ASP.NET MVC视图中调用多个Entity Framework模型填充下拉框

以下是三种可行的实现方案，优先使用视图模型(ViewModel) 方案，符合ASP.NET MVC的开发规范。

方案1：视图模型方案（推荐） #

步骤1：创建自定义视图模型 #

在项目Models目录下新建IssueFormViewModel.cs类，代码如下：

using System.Collections.Generic;
using System.Web.Mvc;
// 替换为你项目对应实体类的命名空间
using ProjectName.Models;

public class IssueFormViewModel
{
    // 原有问题实体作为属性
    public TBL_ISSUES Issue { get; set; }
    // 存储系统下拉框的选项列表
    public IEnumerable<SelectListItem> SystemOptions { get; set; }
}

步骤2：修改AddOrEdit控制器方法 #

调整Get请求的AddOrEdit方法，把系统列表填充到视图模型中返回：

[HttpGet]
public ActionResult AddOrEdit(int id = 0)
{
    using(SSD_INTERIM db = new SSD_INTERIM())
    {
        // 构造下拉框选项，字段名需替换为你数据库表对应实际字段
        var systemOptions = db.LIB_SSD_SYSTEMS
            .Where(x => x.ENABLED == "Y")
            .Select(x => new SelectListItem 
            {
                Text = x.SYSTEM_NAME,
                Value = x.SYSTEM_ID.ToString()
            })
            .ToList();

        // 初始化视图模型
        var viewModel = new IssueFormViewModel
        {
            Issue = id == 0 ? new TBL_ISSUES() : db.TBL_ISSUES.Find(id),
            SystemOptions = systemOptions
        };
        return View(viewModel);
    }
}

步骤3：修改AddOrEdit.cshtml视图绑定 #

替换视图绑定的模型，调整下拉框绑定逻辑：

@model ProjectName.Models.IssueFormViewModel
@{ 
  Layout = null; 
}
@using (Html.BeginForm("AddOrEdit","Issues", FormMethod.Post, new { onsubmit = "return SubmitForm(this)"}))
{
  @Html.HiddenFor(model => model.Issue.ISSUE_ID)
  <div>
   @Html.LabelFor(model => model.Issue.SYSTEMNAME, "System", new { @class = "control-label" })
   @* 绑定系统下拉框 *@
   @Html.DropDownListFor(model => model.Issue.SYSTEMNAME, Model.SystemOptions, "请选择系统", new { @class = "form-control" })
  </div>
  <div>
    @Html.LabelFor(model => model.Issue.ISSUE_DESC, "Description", new { @class = "control-label" })
    @Html.EditorFor(model => model.Issue.ISSUE_DESC, new { htmlAttributes = new {@class="form-control"}})
  </div>
}

方案2：ViewBag快速实现（适合小型项目） #

如果不想新增视图模型，可通过ViewBag传递下拉框选项，修改控制器AddOrEdit方法：

[HttpGet]
public ActionResult AddOrEdit(int id = 0)
{
    using(SSD_INTERIM db = new SSD_INTERIM())
    {
        ViewBag.SystemOptions = db.LIB_SSD_SYSTEMS
            .Where(x => x.ENABLED == "Y")
            .Select(x => new SelectListItem 
            {
                Text = x.SYSTEM_NAME,
                Value = x.SYSTEM_ID.ToString()
            })
            .ToList();
        return View(id == 0 ? new TBL_ISSUES() : db.TBL_ISSUES.Find(id));
    }
}

视图中直接读取ViewBag渲染下拉框：

@Html.DropDownListFor(model => model.SYSTEMNAME, (IEnumerable<SelectListItem>)ViewBag.SystemOptions, "请选择系统", new { @class = "form-control" })

方案3：前端异步加载（适合下拉框动态更新场景） #

你已实现GetSystems接口，也可以页面加载完成后通过ajax请求填充下拉框：

$(function(){
    $.get('/Issues/GetSystems', function(res){
        let options = '<option value="">请选择系统</option>';
        res.data.forEach(item => {
            options += `<option value="${item.SYSTEM_ID}">${item.SYSTEM_NAME}</option>`;
        });
        // 提前给下拉框设置id为SystemId
        $('#SystemId').html(options);
    })
})

内容的提问来源于stack exchange，提问作者JayDee