ASP.NET MVC5三级联动下拉框实现及数据获取方案咨询

• 前端预加载所有数据：适合数据量小（比如Order Type仅2个，关联的Group和Name总数不多）、数据变动不频繁的场景。一次请求拉取所有层级数据到前端，后续用JS筛选，减少服务器请求次数，操作体验更流畅。
• 后端按需请求：适合数据量大、数据实时性要求高（比如数据库数据经常更新）的场景。每次选择后发起AJAX请求获取对应层级数据，降低初始加载的数据量，避免前端处理大量数据出现卡顿。

以下基于Entity Framework访问SQL Server数据库完成联动功能，步骤清晰可直接复用：

1. 模型层定义 #

数据库实体类 #

public class OrderType
{
    public int Id { get; set; }
    public string Name { get; set; }
    public ICollection<Group> Groups { get; set; }
}

public class Group
{
    public int Id { get; set; }
    public string Name { get; set; }
    public int OrderTypeId { get; set; }
    public OrderType OrderType { get; set; }
    public ICollection<Name> Names { get; set; }
}

public class Name
{
    public int Id { get; set; }
    public string DisplayName { get; set; }
    public int GroupId { get; set; }
    public Group Group { get; set; }
}

视图模型 #

public class myModel
{
    public int OrderTypeId { get; set; }
    public int GroupId { get; set; }
    public int NameId { get; set; }
    public IEnumerable<SelectListItem> AvailableOrderType { get; set; }
    public IEnumerable<SelectListItem> AvailableGroup { get; set; }
    public IEnumerable<SelectListItem> AvailableName { get; set; }
}

2. 数据库上下文配置 #

public class AppDbContext : DbContext
{
    public AppDbContext() : base("YourConnectionString") { }
    public DbSet<OrderType> OrderTypes { get; set; }
    public DbSet<Group> Groups { get; set; }
    public DbSet<Name> Names { get; set; }
}

3. 控制器实现 #

public class FormController : Controller
{
    private readonly AppDbContext _dbContext;

    public FormController()
    {
        _dbContext = new AppDbContext();
    }

    // 加载初始表单页面
    public ActionResult Index()
    {
        var model = new myModel();
        // 初始化Order Type下拉选项
        model.AvailableOrderType = _dbContext.OrderTypes
            .Select(o => new SelectListItem
            {
                Value = o.Id.ToString(),
                Text = o.Name
            }).ToList();
        // 初始状态下Group和Name下拉框为空
        model.AvailableGroup = new List<SelectListItem>();
        model.AvailableName = new List<SelectListItem>();
        return View(model);
    }

    // 根据OrderTypeId获取对应Group选项的AJAX接口
    [HttpGet]
    public JsonResult GetGroupsByOrderTypeId(int orderTypeId)
    {
        var groups = _dbContext.Groups
            .Where(g => g.OrderTypeId == orderTypeId)
            .Select(g => new SelectListItem
            {
                Value = g.Id.ToString(),
                Text = g.Name
            }).ToList();
        return Json(groups, JsonRequestBehavior.AllowGet);
    }

    // 根据GroupId获取对应Name选项的AJAX接口
    [HttpGet]
    public JsonResult GetNamesByGroupId(int groupId)
    {
        var names = _dbContext.Names
            .Where(n => n.GroupId == groupId)
            .Select(n => new SelectListItem
            {
                Value = n.Id.ToString(),
                Text = n.DisplayName
            }).ToList();
        return Json(names, JsonRequestBehavior.AllowGet);
    }
}

4. 视图层修改（添加联动逻辑） #

@model myModel

<div class="col-md-3">
    @Html.DropDownListFor(model => model.OrderTypeId, Model.AvailableOrderType, "请选择Order Type", new { @class = "form-control", id = "orderTypeDropdown" })
    @Html.ValidationMessageFor(model => model.OrderTypeId)
</div>

<div class="col-md-3">
    @Html.DropDownListFor(model => model.GroupId, Model.AvailableGroup, "请选择Group", new { @class = "form-control", id = "groupDropdown" })
    @Html.ValidationMessageFor(model => model.GroupId)
</div>

<div class="col-md-3">
    @Html.DropDownListFor(model => model.NameId, Model.AvailableName, "请选择Name", new { @class = "form-control", id = "nameDropdown" })
    @Html.ValidationMessageFor(model => model.NameId)
</div>

@section Scripts {
    <script src="~/Scripts/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function () {
            // Order Type选择变化时加载Group选项
            $("#orderTypeDropdown").change(function () {
                var orderTypeId = $(this).val();
                if (orderTypeId) {
                    $.get("/Form/GetGroupsByOrderTypeId?orderTypeId=" + orderTypeId, function (data) {
                        $("#groupDropdown").empty().append('<option value="">请选择Group</option>');
                        $.each(data, function (index, item) {
                            $("#groupDropdown").append(`<option value="${item.Value}">${item.Text}</option>`);
                        });
                        // 清空Name下拉框
                        $("#nameDropdown").empty().append('<option value="">请选择Name</option>');
                    });
                } else {
                    $("#groupDropdown").empty().append('<option value="">请选择Group</option>');
                    $("#nameDropdown").empty().append('<option value="">请选择Name</option>');
                }
            });

            // Group选择变化时加载Name选项
            $("#groupDropdown").change(function () {
                var groupId = $(this).val();
                if (groupId) {
                    $.get("/Form/GetNamesByGroupId?groupId=" + groupId, function (data) {
                        $("#nameDropdown").empty().append('<option value="">请选择Name</option>');
                        $.each(data, function (index, item) {
                            $("#nameDropdown").append(`<option value="${item.Value}">${item.Text}</option>`);
                        });
                    });
                } else {
                    $("#nameDropdown").empty().append('<option value="">请选择Name</option>');
                }
            });
        });
    </script>
}

5. 数据库连接字符串配置 #

在Web.config中添加SQL Server连接信息：

<connectionStrings>
    <add name="YourConnectionString" 
         connectionString="Server=你的服务器名;Database=你的数据库名;Trusted_Connection=True;" 
         providerName="System.Data.SqlClient" />
</connectionStrings>

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