ASP.NET MVC中如何将下拉列表值传递至控制器TradeExerciseNumber

我来帮你搞定下拉列表传参筛选列表视图的问题，分两种常用方案给你拆解，你可以根据自己的需求选：

这是最基础的实现方式，适合不需要无刷新的场景，核心是利用表单提交把下拉值传给控制器，再重新渲染整个页面。

视图代码 #

把下拉列表放在表单里，确保下拉框的name属性和控制器的TradeExerciseNumber参数完全一致，ASP.NET的模型绑定会自动帮你把选中值传过去：

<!-- 筛选表单 -->
<form asp-action="YourListAction" method="get">
    <select name="TradeExerciseNumber" onchange="this.form.submit()">
        <option value="">全部练习</option>
        <!-- 可以用循环动态生成选项，比如从数据库取练习数据 -->
        @foreach(var exercise in ViewBag.ExerciseOptions)
        {
            <option value="@exercise.Number" 
                    @(exercise.Number == ViewBag.CurrentSelectedNumber ? "selected" : "")>
                @exercise.Name
            </option>
        }
    </select>
</form>

<!-- 你的列表视图 -->
<table class="table">
    <thead>
        <tr>
            <th>练习编号</th>
            <th>内容</th>
        </tr>
    </thead>
    <tbody>
        @foreach(var item in Model)
        {
            <tr>
                <td>@item.TradeExerciseNumber</td>
                <td>@item.Content</td>
            </tr>
        }
    </tbody>
</table>

• onchange="this.form.submit()"：选中选项后自动提交表单，不用额外加提交按钮
• ViewBag.CurrentSelectedNumber：用来在页面刷新后保持下拉框的选中状态，提升体验

控制器代码 #

在对应的Action里直接接收TradeExerciseNumber参数，用它筛选数据后返回视图：

public IActionResult YourListAction(string TradeExerciseNumber)
{
    // 从数据源获取基础数据
    var query = _yourDbContext.TradeExercises.AsQueryable();

    // 根据传入的参数筛选
    if (!string.IsNullOrEmpty(TradeExerciseNumber))
    {
        query = query.Where(e => e.TradeExerciseNumber == TradeExerciseNumber);
    }

    // 传递下拉选项数据和当前选中值到视图
    ViewBag.ExerciseOptions = _yourDbContext.TradeExercises
        .Select(e => new { Number = e.TradeExerciseNumber, Name = e.ExerciseName })
        .ToList();
    ViewBag.CurrentSelectedNumber = TradeExerciseNumber;

    // 返回筛选后的列表视图
    return View(query.ToList());
}

如果想要更流畅的用户体验，不想刷新整个页面，可以用AJAX异步请求，只更新列表部分：

视图代码 #

把列表放在单独的容器里，当下拉框变化时，发送AJAX请求获取筛选后的列表片段，替换容器内容：

<!-- 下拉筛选框 -->
<select id="exerciseFilter">
    <option value="">全部练习</option>
    @foreach(var exercise in ViewBag.ExerciseOptions)
    {
        <option value="@exercise.Number">@exercise.Name</option>
    }
</select>

<!-- 列表容器，用来动态更新 -->
<div id="listContainer">
    @await Html.PartialAsync("_TradeExerciseListPartial", Model)
</div>

<script>
// 监听下拉框变化事件
document.getElementById('exerciseFilter').addEventListener('change', function() {
    const selectedNumber = this.value;
    // 发送AJAX请求到控制器的筛选接口
    fetch('@Url.Action("GetFilteredExerciseList")', {
        method: 'GET',
        headers: { 'Accept': 'text/html' },
        // 传递参数，键名要和控制器参数一致
        query: { TradeExerciseNumber: selectedNumber }
    })
    .then(response => response.text())
    .then(html => {
        // 更新列表容器的内容
        document.getElementById('listContainer').innerHTML = html;
    })
    .catch(err => console.log('筛选请求出错:', err));
});
</script>

这里需要提前创建一个部分视图_TradeExerciseListPartial.cshtml，专门用来渲染列表内容，这样控制器可以只返回这个片段。

控制器代码 #

新增一个Action用来处理AJAX请求，返回部分视图：

public IActionResult GetFilteredExerciseList(string TradeExerciseNumber)
{
    var query = _yourDbContext.TradeExercises.AsQueryable();

    if (!string.IsNullOrEmpty(TradeExerciseNumber))
    {
        query = query.Where(e => e.TradeExerciseNumber == TradeExerciseNumber);
    }

    // 返回部分视图，只渲染列表
    return PartialView("_TradeExerciseListPartial", query.ToList());
}

关键注意点 #

1. 确保下拉框的参数名（不管是表单的name还是AJAX的参数键）和控制器的TradeExerciseNumber参数完全一致，模型绑定才能正常工作
2. 如果是强类型视图，也可以用ViewModel来封装参数，但简单场景直接用字符串参数更高效
3. 动态生成下拉选项时，记得从数据库或配置源获取，不要硬编码选项值

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