如何在C# ASP.NET MVC中获取asp-route参数并将表单选中值传入asp-route-brand、asp-route-price

方案一：使用表单提交（推荐，无需编写JS） #

asp-route-*属于服务器端渲染的Tag Helper，页面渲染完成后属性值就固定了，无法自动跟随下拉选择动态变化。最简单的实现方式是将两个筛选下拉放到同一个表单内，通过表单提交传递参数：

<form asp-controller="Boards" asp-action="FilterBoards" method="get">
    <div>
        <label>Filter by brand</label>
        <select name="brand">
            @foreach (string brand in Model.Brands)
            {
                <option value="@brand">@brand</option>               
            }
        </select>
    </div>
    <div>
        <label>Filter by price</label>
        <select name="price">
            @for (int i = 25; i < 200; i += 25)
            {
                <option value="@i">@i €</option>
            }
        </select>
    </div>
    <button type="submit" class="btn btn-primary">Filter</button>
</form>

只要将select的name属性设置为和Controller动作接收参数一致的名称，提交时会自动把选中值作为参数传递，和asp-route实现的效果完全一致。

方案二：保留a标签结构，通过JS动态更新路由参数 #

如果必须保留原有a标签的触发逻辑，可以监听下拉框的选择事件，动态更新a标签的href属性：
首先调整原有HTML结构，给下拉框增加id方便获取：

<div>
    <label>Filter by brand</label>
    <select id="brandSelect" name="brandoption">
        @foreach (string brand in Model.Brands)
        {
            <option value="@brand">@brand</option>               
        }
    </select>
</div>
<div>
    <label>Filter by price</label>
    <select id="priceSelect" name="priceoption">
        @for (int i = 25; i < 200; i += 25)
        {
            <option value="@i">@i €</option>
        }
    </select>
</div>

<a id="filterBtn" asp-controller="Boards" asp-action="FilterBoards" class="btn btn-primary">Filter</a>

然后增加JS逻辑：

const filterBtn = document.getElementById('filterBtn');
// 提取Tag Helper渲染后的基础路由地址
const baseUrl = filterBtn.getAttribute('href').split('?')[0];
const brandSelect = document.getElementById('brandSelect');
const priceSelect = document.getElementById('priceSelect');

function updateFilterUrl() {
    const selectedBrand = brandSelect.value;
    const selectedPrice = priceSelect.value;
    filterBtn.setAttribute('href', `${baseUrl}?brand=${encodeURIComponent(selectedBrand)}&price=${encodeURIComponent(selectedPrice)}`);
}

// 初始化更新一次，下拉选择变化时实时更新
updateFilterUrl();
brandSelect.addEventListener('change', updateFilterUrl);
priceSelect.addEventListener('change', updateFilterUrl);

注意事项 #

• 原代码中所有品牌下拉的option都设置了相同的id="brand"，不符合HTML单页id唯一的规范，已删除该重复属性。
• 两种方案都可以在BoardsController的FilterBoards动作中，直接通过同名参数string brand和int price接收选中的筛选值。

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