如何通过JavaScript Ajax为ASP.NET Core SelectList设置下拉选项

问题背景 #

表单中有州和城市两个下拉框，已实现选择州后通过AJAX获取对应城市数据，但不知道如何用JavaScript动态填充城市下拉框（错误地尝试操作服务器端的asp-items属性）。

现有代码回顾 #

视图中的下拉框结构 #

<div class="col-md-3 py-2">
    <label asp-for="@Model.Quote.CompanyState" class="form-label"></label>
    <select asp-for="@Model.Quote.CompanyState" asp-items="@Model.States" class="form-select">
        <option selected>Choose...</option>
    </select>
    <span asp-validation-for="@Model.Quote.CompanyState" class="text-danger"></span>
</div>
<div id="cityDDL" class="col-md-3 py-2" style="display:none;">
    <label asp-for="@Model.Quote.CompanyCity" class="form-label"></label>
    <select asp-for="@Model.Quote.CompanyCity" asp-items="@Model.Cities" class="form-select">
        <option selected>Choose...</option>
    </select>
    <span asp-validation-for="@Model.Quote.CompanyCity" class="text-danger"></span>
</div>

现有AJAX触发与请求代码 #

$('#Quote_CompanyState').on('change', function () {
    var state = $('#Quote_CompanyState Option:Selected').val();
    Quote.GetCitiesDropDown(state);
})

Quote.GetCitiesDropDown = function (state) {
    $.ajax({
        url: Global.basePath + 'Quote/GetCitiesDropDown',
        type: "POST",
        dataType: 'json',
        data: {state: state},
        cache: false,
        success: function (data) {
            console.log(data);
            $('#cityDDL').show();
        },
        error: function (xhr, status, error) {
            var err = JSON.parse(xhr.responseText);
            alert('Error: ' + err.quote_error[0]);
        },
        complete: function (data) {
        }
    });
}

现有控制器代码 #

[HttpPost]
public IActionResult GetCitiesDropDown(string state)
{
    var cities = _config.GetSection("CitiesByState").GetSection(state).Get<Dictionary<string, string>>();
    var citiesDDIs = cities.Select(city => new SelectListItem
    {
        Value = city.ToString(),
        Text = city.ToString()
    }).ToList();
    return Json(citiesDDIs);
}

解决步骤 #

1. 修正控制器中SelectListItem的生成逻辑 #

当前控制器生成的SelectListItem把字典键值对直接转成字符串，导致返回的value和text格式错误，需要分别取字典的Key和Value：

[HttpPost]
public IActionResult GetCitiesDropDown(string state)
{
    var cities = _config.GetSection("CitiesByState").GetSection(state).Get<Dictionary<string, string>>();
    var citiesDDIs = cities.Select(city => new SelectListItem
    {
        Value = city.Key,   // 用字典Key作为选项值
        Text = city.Value   // 用字典Value作为显示文本
    }).ToList();
    return Json(citiesDDIs);
}

2. 修改AJAX的Success回调，动态填充城市下拉框 #

asp-items是Razor服务器端渲染属性，前端无法直接修改，需要通过DOM操作直接更新下拉框选项：

success: function (data) {
    console.log(data);
    const citySelect = $('#Quote_CompanyCity');
    // 清空原有选项
    citySelect.empty();
    // 添加默认提示选项
    citySelect.append('<option selected>Choose...</option>');
    // 遍历返回的城市数据，逐个添加选项
    $.each(data, function(index, item) {
        citySelect.append(`<option value="${item.value}">${item.text}</option>`);
    });
    // 显示城市下拉框
    $('#cityDDL').show();
},

3. 优化联动逻辑（可选） #

处理用户切换回默认州选项的情况，隐藏城市下拉框并清空选项：

$('#Quote_CompanyState').on('change', function () {
    var state = $(this).val();
    const cityDDL = $('#cityDDL');
    const citySelect = $('#Quote_CompanyCity');
    
    // 若选择默认选项，隐藏城市框并重置
    if (!state || state === 'Choose...') {
        cityDDL.hide();
        citySelect.empty().append('<option selected>Choose...</option>');
        return;
    }
    
    Quote.GetCitiesDropDown(state);
})

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