如何使用<a>标签传递List多值？ASP.NET Core筛选排序问题

咱们先理清楚核心问题：你用多选<select>做颜色筛选，点击表头的排序链接时，选中的多个颜色值没法保留——用asp-all-route-data吧，因为字典键唯一搞不定多值；手动拼URL倒是能行，但筛选器和列多了之后代码乱得没法维护。

我刚好踩过这个坑，给你分享两个优雅的解决方案，完美解决这个痛点：

方案1：循环生成asp-route-*属性（简单直接） #

Razor其实支持在标签里循环生成属性，我们可以给每个选中的颜色单独生成asp-route-Colors，这样Razor引擎会自动把它转换成Colors=Red&Colors=Green这种正确的多值URL格式：

页面代码改造 #

筛选表单部分

不用改太多，确保你的多选下拉绑定正确就行：

<form asp-page="./index" method="get">
    <input type="text" asp-for="SearchString"  />
    <select asp-for="Colors" asp-items="@Model.Colors_SELECT" class="MultiSelect" multiple>...</select>
    <button type="submit">应用筛选</button>
</form>

表头排序链接部分

重点在这里，循环为每个选中的颜色生成asp-route-Colors属性：

<table>
    <thead>
        <tr>
            <th>
                <a asp-page="./My_Training"
                   asp-route-SearchString="@Model.SearchString"
                   @* 循环添加每个选中的颜色参数 *@
                   @foreach (var color in Model.Colors ?? Enumerable.Empty<string>())
                   {
                       @:asp-route-Colors="@color"
                   }
                   asp-route-SortOrder="@Model.Colors_Sort">
                    @Html.DisplayNameFor(model => model.MyListData[0].Colors)
                </a>
            </th>
            <!-- 其他列的排序链接可以照这个逻辑复制修改 -->
        </tr>
    </thead>
    <tbody>
        <!-- 表格数据行 -->
    </tbody>
</table>

方案2：扩展RouteValueDictionary（更优雅，适合多筛选器场景） #

如果觉得循环写属性不够优雅，可以扩展RouteValueDictionary来支持多值，这样就能继续用asp-all-route-data：

第一步：添加扩展方法 #

在项目里新建一个静态类，写个扩展方法来处理多值：

public static class RouteValueDictionaryExtensions
{
    public static RouteValueDictionary AddMultiValue(this RouteValueDictionary dict, string key, IEnumerable<string> values)
    {
        if (values?.Any() == true)
        {
            foreach (var value in values)
            {
                dict.Add(key, value);
            }
        }
        return dict;
    }
}

第二步：页面中使用扩展后的RouteValueDictionary #

在页面里构建包含多值参数的路由字典，然后传给asp-all-route-data：

@{
    // 构建路由参数字典
    var routeParams = new RouteValueDictionary
    {
        { "SearchString", Model.SearchString },
        { "SortOrder", Model.Colors_Sort }
    }.AddMultiValue("Colors", Model.Colors); // 添加多值的颜色参数
}

<table>
    <thead>
        <tr>
            <th>
                <a asp-page="./My_Training" asp-all-route-data="routeParams">
                    @Html.DisplayNameFor(model => model.MyListData[0].Colors)
                </a>
            </th>
        </tr>
    </thead>
</table>

后端绑定的关键注意事项 #

一定要确保你的属性加上[BindProperty(SupportsGet = true)]，因为我们用的是GET请求，不然参数绑不上：

[BindProperty(SupportsGet = true)]
public string? SearchString { get; set; }
[BindProperty(SupportsGet = true)]
public List<string>? Colors { get; set; }
public SelectList? Colors_SELECT { get; set; }

public async Task OnGetAsync()
{
    // 初始化下拉选项（示例）
    Colors_SELECT = new SelectList(new List<string> { "Red", "Green", "Blue", "Yellow" });

    // 筛选逻辑示例
    var query = _dbContext.MyListData.AsQueryable();

    if (!string.IsNullOrEmpty(SearchString))
    {
        query = query.Where(x => x.Name.Contains(SearchString));
    }

    if (Colors?.Any() == true)
    {
        query = query.Where(x => Colors.Contains(x.Colors));
    }

    // 排序逻辑示例
    switch (SortOrder)
    {
        case "color_desc":
            query = query.OrderByDescending(x => x.Colors);
            Colors_Sort = "color_asc";
            break;
        default:
            query = query.OrderBy(x => x.Colors);
            Colors_Sort = "color_desc";
            break;
    }

    MyListData = await query.ToListAsync();
}

为什么之前的方案不行？ #

• asp-all-route-data默认用的是Dictionary<string, object>，字典键是唯一的，所以多值参数会被覆盖，生成不了Colors=Red&Colors=Green这种格式；
• 手动拼URL虽然能跑，但筛选器和排序字段一多，代码会变得臃肿不堪，后期改需求简直噩梦。

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