ASP.NET MVC如何将ActionLink替换为点击跳转控制器的下拉列表

你可以通过监听下拉列表的change事件捕获选中行为，拼接目标路由地址完成跳转，以下是两种可直接复用的实现：

方案1：原生HTML select 实现（无依赖兼容性好） #

不需要依赖任何前端框架，直接手写select标签循环生成选项，绑定事件即可，和你原有的foreach遍历逻辑完全兼容：

<select id="subSectionDropdown">
    <option value="">-- 请选择子板块 --</option>
    @foreach (var item in Model)
    {
        <option value="@item.Value">@item.Text</option>
    }
</select>

<script>
document.getElementById('subSectionDropdown').addEventListener('change', function(){
    const selectedId = this.value;
    // 未选择有效选项时不触发跳转
    if(!selectedId) return;
    const selectedName = this.options[this.selectedIndex].text;
    // 动态生成基础路由地址，自动匹配项目路由规则
    window.location.href = `@Url.Action("UpdateController")?subSectionID=${selectedId}&subsectionName=${encodeURIComponent(selectedName)}`;
})
</script>

说明：encodeURIComponent会对选项文本里的特殊字符（空格、&、中文等）做转义，避免路由参数解析出错。

方案2：使用Razor内置DropDownList辅助方法 #

可以直接用MVC自带的Html.DropDownList方法生成下拉框，不需要手写foreach循环拼接option标签：

@{
    // 将遍历的Model转为下拉列表所需的SelectList类型，指定值字段和文本字段
    var dropdownItems = new SelectList(Model, "Value", "Text");
}
@Html.DropDownList("subSectionDropdown", dropdownItems, "-- 请选择子板块 --", new { id = "subSectionDropdown" })

<!-- 跳转逻辑和方案1一致，引用jQuery的环境下可以简化写法 -->
<script>
$('#subSectionDropdown').change(function(){
    const selectedId = $(this).val();
    if(!selectedId) return;
    const selectedName = $(this).find('option:selected').text();
    window.location.href = '@Url.Action("UpdateController")?subSectionID=' + selectedId + '&subsectionName=' + encodeURIComponent(selectedName);
})
</script>

注意：不要把option的value直接存完整跳转地址，避免路由规则调整时需要批量修改所有选项，用Url.Action动态生成基础地址可维护性更高。

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