使用AJAX源填充MVC DropdownList并绑定选中值（会员详情场景）

我来给你一步步拆解这个需求的实现方案，都是实际项目里验证过的做法：

1. 先准备后端接口返回科目数据 #

首先你需要在控制器里写一个Action，用来返回所有科目的列表，格式要符合SelectListItem的结构，这样前端才能直接用：

public ActionResult GetSubjects()
{
    // 这里替换成你实际从数据库/数据源获取科目的逻辑
    var subjects = db.Subjects.Select(s => new SelectListItem
    {
        Value = s.SubjectID.ToString(), // 对应下拉框的value值
        Text = s.SubjectName            // 对应下拉框显示的文本
    }).ToList();
    
    // 返回JSON格式数据，允许GET请求访问
    return Json(subjects, JsonRequestBehavior.AllowGet);
}

2. 修改前端下拉框并编写AJAX逻辑 #

首先调整你的DropDownListFor代码，增加一个data-selected属性来存储当前已选中的科目ID，方便后续绑定：

@Html.DropDownListFor(m => m.SubjectID, Enumerable.Empty<SelectListItem>(), "选择科目", 
    new { @class = "form-control subjects", data_selected = Model.SubjectID })

然后在编辑器模板的脚本区域（或者页面底部的脚本块）编写jQuery的AJAX请求，用来加载科目数据并绑定选中值：

$(document).ready(function() {
    // 遍历所有科目下拉框（因为是编辑器模板，可能存在多个实例）
    $('.subjects').each(function() {
        var $dropdown = $(this);
        var selectedSubjectId = $dropdown.data('selected'); // 获取当前应选中的ID

        // 发送AJAX请求获取科目列表
        $.ajax({
            url: '@Url.Action("GetSubjects", "YourControllerName")', // 替换成你的控制器名称
            type: 'GET',
            dataType: 'json',
            success: function(subjectData) {
                // 清空下拉框原有选项（保留默认的"选择科目"）
                $dropdown.find('option:not(:first)').remove();
                
                // 把返回的科目数据逐个添加到下拉框
                $.each(subjectData, function(index, item) {
                    $dropdown.append($('<option></option>')
                        .val(item.Value)
                        .text(item.Text));
                });

                // 如果有已选中的ID，设置下拉框的选中状态
                if (selectedSubjectId) {
                    $dropdown.val(selectedSubjectId);
                }
            },
            error: function(xhr, status, error) {
                console.error('加载科目列表失败:', error);
            }
        });
    });
});

3. 特殊场景的处理（可选） #

如果你的页面支持动态添加会员科目（比如点击"添加科目"按钮新增一个编辑器模板实例），上面的ready事件只会处理页面初始化时的下拉框，这时候你需要把AJAX逻辑封装成可复用的函数，在新增模板时调用：

// 封装加载科目下拉框的函数
function loadSubjectsToDropdown($targetDropdown, selectedId) {
    $.ajax({
        url: '@Url.Action("GetSubjects", "YourControllerName")',
        type: 'GET',
        dataType: 'json',
        success: function(subjectData) {
            $targetDropdown.find('option:not(:first)').remove();
            $.each(subjectData, function(index, item) {
                $targetDropdown.append($('<option></option>')
                    .val(item.Value)
                    .text(item.Text));
            });
            if (selectedId) {
                $targetDropdown.val(selectedId);
            }
        },
        error: function(xhr, status, error) {
            console.error('加载科目列表失败:', error);
        }
    });
}

// 页面初始化时加载所有下拉框
$(document).ready(function() {
    $('.subjects').each(function() {
        loadSubjectsToDropdown($(this), $(this).data('selected'));
    });
});

// 点击添加科目按钮时的示例逻辑
$('#addSubjectBtn').click(function() {
    // 这里替换成你实际新增编辑器模板的代码（比如克隆模板/加载PartialView）
    var newSubjectTemplate = $('#subjectEditorTemplate').clone();
    $('#subjectsContainer').append(newSubjectTemplate);
    
    // 获取新模板里的下拉框，调用函数加载科目
    var newDropdown = newSubjectTemplate.find('.subjects');
    loadSubjectsToDropdown(newDropdown, null);
});

注意事项 #

• 确保你的项目已经引用了jQuery库，不然AJAX和DOM操作没法正常工作。
• 如果你的SubjectID是可空类型（比如int?），要注意判断selectedSubjectId是否不为null再设置选中状态。
• 后端的GetSubjects方法如果是在ASP.NET Core中，不需要JsonRequestBehavior.AllowGet，直接返回Json(subjects)即可。

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