ASP.NET Core MVC表格行内下拉框联动无数据问题排查

核心问题分析 #

你的代码存在几个关键问题导致下拉框无法填充：

1. 循环生成的stocks下拉框ID重复，HTML中ID必须唯一，导致jQuery只能定位到第一个下拉框
2. 前端HTML存在语法错误（class="form-control未闭合引号）
3. 后端返回SelectList的序列化结构可能存在歧义，前端解析容易出错
4. 未确保jQuery已正确引入

分步修复代码 #

1. 修复前端HTML：移除重复ID，改用class定位

将循环内的stocks下拉框ID改为class，避免重复；同时修正语法错误：

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <!-- 表头内容 -->
        </tr>
    </thead>
    <tbody>
    @for (int i = 0; i < Model.StockItems.Count; i++)
    {
        <tr>
            <td>@Html.DropDownList("Category", ViewBag.ListCategories, null, new { @class = "form-control category-dropdown", @onchange = "GetStocks(this)" })</td>
            <td><select class="form-control stocks-dropdown"></select></td>
        </tr>
     }
    </tbody>
</table>

2. 优化后端接口：返回明确的匿名对象列表

避免返回SelectList，直接返回包含StockId和Name的匿名对象，减少序列化歧义：

[HttpPost]
public IActionResult GetStockByCat(int CatId)
{
    var stocks = _dbcontext.Stock
                           .Where(s => s.CategoryId == CatId)
                           .Select(s => new 
                           { 
                               StockId = s.StockId, 
                               Name = s.Name 
                           })
                           .ToList();
    return Json(stocks);
}

3. 调整前端JS逻辑：适配新的数据结构与选择器

修改GetStocks函数，使用class选择器定位当前行的下拉框，并正确解析后端返回的数据：

function GetStocks(dropdown1) {
    var procemessage = "<option value='0'> Please wait...</option>";
    // 用class选择当前行的stocks下拉框
    var dropdown2 = dropdown1.closest('tr').find('.stocks-dropdown');
    dropdown2.html(procemessage);
    
    var url = '@Url.Action("GetStockByCat", "Stock")';

    $.ajax({
        url: url,
        data: { CatId: dropdown1.value },
        cache: false,
        type: "POST",
        success: function (data) {
            var markup = "<option value='0'>---------</option>";
            // 解析匿名对象的stockId和name（注意camelCase，ASP.NET Core默认序列化规则）
            for (var x = 0; x < data.length; x++) {
                markup += `<option value="${data[x].stockId}">${data[x].name}</option>`;
            }
            dropdown2.html(markup);
        },
        error: function (response) {
            // 更清晰的错误提示
            alert("请求失败: " + response.responseText);
        }
    });        
}

额外检查项 #

• 确保页面已引入jQuery：在视图或布局页中添加<script src="~/lib/jquery/dist/jquery.min.js"></script>
• 打开浏览器F12开发者工具，查看Network标签：
  • 确认GetStockByCat请求是否成功（状态码200）
  • 查看返回的JSON数据是否符合预期
  • 检查请求参数CatId是否正确传递

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