Razor C#环境下jQuery填充Select下拉框失败求助

1. 修正后端C#代码（Razor Page） #

先解决语法错误，同时基于实际业务数据生成去重的下拉选项，确保ID和LocNombre正确对应：

public JsonResult OnPostGetItems(int Id)
{
    // 先确保数据源已加载（取消注释下面这行）
    // displaydata1 = rTDBContext.Turnos.ToList();

    // 提取去重的LocNombre及对应ID（根据你的实体结构调整ID字段名）
    var distinctLocales = displaydata1
        .GroupBy(c => c.LocNombre)
        .Select(g => new 
        {
            LocId = g.First().Id, // 替换为实体中实际的ID属性名
            LocName = g.Key
        })
        .ToList();

    // 转换为SelectListItem列表
    var selectItems = distinctLocales.Select(item => new SelectListItem
    {
        Value = item.LocId.ToString(),
        Text = item.LocName
    }).ToList();

    return new JsonResult(selectItems);
}

核心修正点： #

• 去掉原代码中new List<SelectListItem> = { ... }的语法错误（多余的等号）
• 用GroupBy实现LocNombre的去重，同时保留对应的ID
• 不再返回硬编码测试数据，改用实际业务数据

2. 优化前端jQuery代码 #

解决重复填充问题，提升代码可读性：

@section scripts{
    <script>
        function adddata() {
            $.ajax({
                type: "POST",
                url: '?handler=GetItems',
                headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
                data: { Id: $("#IdSelectIdPuesto").val() },
                success: function (data) {
                    var $select = $("#IdSelectlocalidad");
                    // 先清空下拉框，避免重复添加
                    $select.empty();
                    // 可选：添加默认提示选项
                    $select.append('<option value="">请选择地区</option>');
                    // 遍历数据生成选项
                    $.each(data, function(index, item) {
                        $select.append(`<option value="${item.value}">${item.text}</option>`);
                    });
                },
                error: function () {
                    alert("加载数据失败");
                }
            })
        }
    </script>
}

核心优化点： #

• 用empty()清空下拉框，防止多次调用时重复添加选项
• 改用$.each遍历数据，代码更简洁
• 使用模板字符串拼接HTML，可读性更强

3. 必查验证项 #

• 确认displaydata1已正确从数据库加载数据（取消注释加载数据的代码）
• 检查前端下拉框IDIdSelectlocalidad与代码中拼写完全一致
• 打开浏览器控制台（F12）查看是否有404/500等错误，排查路由或后端异常

内容的提问来源于stack exchange，提问作者Juan de Dios