Razor视图中如何将Ajax返回的SelectList数据渲染到下拉选择框

问题原因 #

你当前错误使用了jQuery的.val()方法，该方法仅用于设置下拉框的选中值，无法替换整个下拉的选项列表，因此接口返回的新配置列表无法渲染到页面上。

具体修改方案 #

1. 调整AJAX成功回调逻辑 #

将你原有脚本中done部分的代码替换为如下逻辑，实现清空原有选项、插入新选项的效果：

.done(function (data) {
    const profileSelect = $("#UnMappedEscheatProfileId");
    // 清空原有所有选项
    profileSelect.empty();
    // 插入默认空选项
    profileSelect.append('<option value=""></option>');
    // 遍历返回的配置列表生成新选项
    if (data && data.length > 0) {
        data.forEach(item => {
            // 后端返回的SelectList序列化后默认使用驼峰命名，对应value和text属性
            profileSelect.append(`<option value="${item.value}">${item.text}</option>`);
        });
    }
});

2. 后端可选优化（按需调整） #

如果后续需要区分下拉选项的实际值和显示文本，可以调整后端接口的返回构造，显式指定SelectList的取值和显示字段：

public IActionResult OnPostGetData(string selectedClientId)
{
    var profileList = _context.vwTaskGroupByClients
        .Where(c => c.ClientId == selectedClientId && c.EsheatProfileCode != null)
        // 可自行调整Value和Text对应的业务字段
        .Select(a => new { Value = a.EsheatProfileCode, Text = a.EsheatProfileCode })
        .ToList();
    UnMappedEscheatProfiles = new SelectList(profileList, "Value", "Text");
    return new JsonResult(UnMappedEscheatProfiles);
}

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