当下拉列表切换时获取表格首行Name值的ASP.NET MVC问题

我来帮你搞定这个问题！核心原因是你当前的代码只在页面首次加载时从后端获取了表格第一行的Name值，但下拉列表切换时，表格内容是动态更新的——要么前端没在更新后重新读取DOM，要么后端没处理切换时的请求逻辑。下面分两种常用场景给你解决方案：

场景1：用Ajax异步更新表格（推荐，无页面刷新） #

这种方式用户体验更好，我们需要后端加个接口处理下拉请求，前端在切换后异步更新表格并获取Name值。

第一步：修改后端Controller，新增Ajax接口 #

// 原有的页面首次加载Action，调整空值判断更健壮
public ActionResult ABC() {
    SDetails sDetails = new SDetails();
    var model = new ClsA();
    var firstItems = sDetails.Rst().ToList();
    model.firsts = firstItems;
    
    // 避免空列表报错
    if (firstItems.Any()) {
        string name = firstItems.First().Name;
        model.seconds = sDetails.Rs(name);
    }
    return View(model);
}

// 新增处理下拉切换的Ajax接口，返回表格数据和第一行Name
public ActionResult GetTableDataAfterDropdown(string selectedValue) {
    SDetails sDetails = new SDetails();
    var firstItems = sDetails.Rst().ToList();
    // 这里根据你的业务逻辑，可能需要用selectedValue过滤firstItems，比如：
    // firstItems = firstItems.Where(x => x.YourDropdownMatchProperty == selectedValue).ToList();
    
    string firstRowName = firstItems.FirstOrDefault()?.Name ?? string.Empty;
    var response = new {
        TableData = sDetails.Rs(firstRowName),
        FirstRowName = firstRowName
    };
    return Json(response, JsonRequestBehavior.AllowGet);
}

第二步：前端修改下拉列表和表格，添加异步逻辑 #

假设你用jQuery（不用的话可以换成原生JS逻辑），给下拉加change事件，异步更新表格并获取Name：

@model Aplication.Models.ABC.ClsA

<!-- 补全你的下拉列表代码，加个ID方便绑定事件 -->
@Html.DropDownListFor(m => m.SelectedDropdownValue, Model.DropdownOptions, new { @id = "dropdownSelector" })

<!-- 给表格加个ID，方便后续操作DOM -->
<table id="targetTable">
    <thead>
        <tr>
            <th>Name</th>
            <!-- 其他列根据你的模型补充 -->
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.seconds) {
            <tr>
                <td>@item.Name</td>
                <!-- 其他列内容 -->
            </tr>
        }
    </tbody>
</table>

<script src="~/Scripts/jquery.min.js"></script>
<script>
    $(function() {
        // 页面首次加载时先获取一次第一行Name
        getFirstRowName();

        // 下拉列表切换事件
        $("#dropdownSelector").change(function() {
            var selectedVal = $(this).val();
            $.ajax({
                url: '@Url.Action("GetTableDataAfterDropdown", "YourControllerName")', // 替换成你的控制器名
                type: 'GET',
                data: { selectedValue: selectedVal },
                success: function(res) {
                    // 清空表格tbody，重新渲染数据
                    var tbody = $("#targetTable tbody");
                    tbody.empty();
                    $.each(res.TableData, function(index, item) {
                        var row = `<tr><td>${item.Name}</td></tr>`; // 补充其他列的HTML
                        tbody.append(row);
                    });

                    // 获取第一行Name：可以直接用后端返回的res.FirstRowName，或者从DOM读取
                    var firstRowName = res.FirstRowName;
                    // 或者DOM读取：$("#targetTable tbody tr:first td:first").text();
                    console.log("表格第一行Name：", firstRowName);
                    // 这里写你需要用这个Name做的逻辑
                }
            });
        });

        // 封装获取第一行Name的函数，复用性更强
        function getFirstRowName() {
            var firstRow = $("#targetTable tbody tr:first");
            if (firstRow.length > 0) {
                var name = firstRow.find("td:first").text();
                console.log("表格第一行Name：", name);
            }
        }
    });
</script>

场景2：用表单提交刷新页面（不推荐，体验较差） #

如果你的项目暂时不想用Ajax，也可以用表单提交的方式，切换下拉时刷新页面，让后端重新计算第一行Name：

修改后端Controller的ABC Action #

public ActionResult ABC(string selectedValue = null) {
    SDetails sDetails = new SDetails();
    var model = new ClsA();
    var firstItems = sDetails.Rst().ToList();
    
    // 根据下拉选中的值过滤firstItems（如果需要的话）
    if (!string.IsNullOrEmpty(selectedValue)) {
        // firstItems = firstItems.Where(x => x.MatchProperty == selectedValue).ToList();
    }

    model.firsts = firstItems;
    string firstRowName = firstItems.FirstOrDefault()?.Name ?? string.Empty;
    model.seconds = sDetails.Rs(firstRowName);
    // 把选中的值回传给视图，保持下拉选中状态
    model.SelectedDropdownValue = selectedValue;
    return View(model);
}

前端把下拉放在表单里，切换时提交 #

@using (Html.BeginForm("ABC", "YourControllerName", FormMethod.Get)) {
    <!-- 下拉列表添加onchange事件，切换时提交表单 -->
    @Html.DropDownListFor(m => m.SelectedDropdownValue, Model.DropdownOptions, new { @onchange = "this.form.submit();" })
}

<!-- 表格内容和之前一致 -->
<table>
    <thead>
        <tr><th>Name</th></tr>
    </thead>
    <tbody>
        @foreach (var item in Model.seconds) {
            <tr><td>@item.Name</td></tr>
        }
    </tbody>
</table>

<script>
    // 页面加载完成后读取第一行Name
    $(function() {
        var firstRowName = $("table tbody tr:first td:first").text();
        console.log("表格第一行Name：", firstRowName);
    });
</script>

关键提醒 #

• 用Ajax的话，一定要在表格更新完成后再读取Name值（也就是Ajax的success回调里），避免DOM还没更新就读取到旧值；直接用后端返回的FirstRowName会比读取DOM更可靠。
• 如果是表单提交，因为页面会重新加载，逻辑和首次加载一致，后端会重新计算第一行Name，前端在页面加载后读取即可。

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