ASP.NET MVC中@Html.DropDownListFor选值及联动下拉选值存库求助

嘿，我来帮你搞定这两个ASP.NET MVC下拉列表的问题，都是日常开发里常遇到的场景，咱们一个个拆解：

有两种常用的方式，推荐用ViewModel绑定的方式，更符合MVC的设计思想：

方式1：通过ViewModel属性绑定（推荐） #

首先你需要定义一个ViewModel，里面包含用来存储选中值的属性，比如：

public class LocationViewModel
{
    public string SelectedCountry { get; set; }
    // 其他需要的业务属性...
}

然后在控制器的Action里，给这个ViewModel的SelectedCountry赋值你想要选中的默认值，同时准备下拉列表的数据源：

public ActionResult Index()
{
    var vm = new LocationViewModel();
    // 设置默认选中的国家，比如"China"
    vm.SelectedCountry = "China";

    List<OrbatTable> CountryList = db.OrbatTables.DistinctBy(x => x.CityName).ToList();
    ViewBag.CountryList = new SelectList(CountryList, "CityName", "CityName");

    return View(vm);
}

最后在视图里，用DropDownListFor绑定ViewModel的属性：

@model LocationViewModel

@Html.DropDownListFor(m => m.SelectedCountry, ViewBag.CountryList as SelectList, "请选择国家", new { @class = "form-control" })

这样页面加载时，SelectedCountry对应的选项就会自动选中。

方式2：通过SelectList构造函数指定选中值 #

如果你不想用ViewModel，也可以在创建SelectList的时候直接传入选中值：

public ActionResult Index()
{
    string defaultSelectedCountry = "China";
    List<OrbatTable> CountryList = db.OrbatTables.DistinctBy(x => x.CityName).ToList();
    // 第三个参数就是要选中的默认值
    ViewBag.CountryList = new SelectList(CountryList, "CityName", "CityName", defaultSelectedCountry);

    return View();
}

视图里用DropDownList或者DropDownListFor都可以，但这种方式不如ViewModel绑定灵活，尤其是在表单提交场景下。

首先咱们先补全联动逻辑（假设你的OrbatTable里有CityName（国家）和StateName（州）两个字段），再处理保存问题：

第一步：补全联动的后端Action #

在控制器里加一个返回对应州列表的Action，用来响应AJAX请求：

public JsonResult GetStatesByCountry(string countryName)
{
    // 根据选中的国家获取对应的州，去重避免重复选项
    var states = db.OrbatTables
                   .Where(x => x.CityName == countryName)
                   .Select(x => x.StateName)
                   .Distinct()
                   .ToList();

    return Json(states, JsonRequestBehavior.AllowGet);
}

第二步：视图里实现联动逻辑 #

先给ViewModel加上选中州的属性：

public class LocationViewModel
{
    public string SelectedCountry { get; set; }
    public string SelectedState { get; set; }
    // 其他业务属性...
}

然后在视图里添加州的下拉列表，并用jQuery实现联动：

@model LocationViewModel

<!-- 国家下拉列表 -->
@Html.DropDownListFor(m => m.SelectedCountry, ViewBag.CountryList as SelectList, "请选择国家", new { @class = "form-control", id = "countryDropdown" })

<!-- 州下拉列表，初始为空 -->
@Html.DropDownListFor(m => m.SelectedState, new SelectList(Enumerable.Empty<SelectListItem>()), "请选择州", new { @class = "form-control", id = "stateDropdown" })

<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // 监听国家下拉列表的变化事件
        $("#countryDropdown").change(function() {
            var selectedCountry = $(this).val();
            if (selectedCountry) {
                // 发送AJAX请求获取对应州的列表
                $.ajax({
                    url: '@Url.Action("GetStatesByCountry", "YourControllerName")', // 替换成你的控制器名称
                    type: 'GET',
                    data: { countryName: selectedCountry },
                    success: function(data) {
                        // 清空州下拉列表，添加新选项
                        $("#stateDropdown").empty();
                        $("#stateDropdown").append('<option value="">请选择州</option>');
                        $.each(data, function(index, state) {
                            $("#stateDropdown").append('<option value="' + state + '">' + state + '</option>');
                        });
                    },
                    error: function() {
                        alert("加载州数据失败，请稍后重试");
                    }
                });
            } else {
                // 未选择国家时，清空州下拉
                $("#stateDropdown").empty();
                $("#stateDropdown").append('<option value="">请选择州</option>');
            }
        });
    });
</script>

第三步：保存选中值到数据库 #

添加一个POST类型的Action，用来接收ViewModel里的选中值，然后保存到数据库：

[HttpPost]
public ActionResult SaveLocation(LocationViewModel vm)
{
    if (ModelState.IsValid)
    {
        // 根据你的业务需求创建或更新实体，示例如下：
        var locationRecord = new YourLocationEntity(); // 替换成你的数据库实体类
        locationRecord.Country = vm.SelectedCountry;
        locationRecord.State = vm.SelectedState;
        // 其他属性赋值...

        db.YourLocationEntities.Add(locationRecord); // 如果是更新，用db.Entry(locationRecord).State = EntityState.Modified;
        db.SaveChanges();

        return RedirectToAction("Index"); // 保存成功后跳转回列表页
    }

    // 验证失败时，重新加载国家列表并返回视图
    List<OrbatTable> CountryList = db.OrbatTables.DistinctBy(x => x.CityName).ToList();
    ViewBag.CountryList = new SelectList(CountryList, "CityName", "CityName", vm.SelectedCountry);
    return View("Index", vm);
}

最后在视图里添加表单，提交到这个SaveAction：

@using (Html.BeginForm("SaveLocation", "YourControllerName", FormMethod.Post))
{
    <!-- 上面的国家和州下拉列表 -->
    <button type="submit" class="btn btn-primary">保存</button>
}

这样用户选择国家和州后，点击保存按钮，选中的值就会通过ViewModel传递到后端，最终保存到数据库里啦。

内容的提问来源于stack exchange，提问作者Do You Know