ASP.NET Core MVC：如何将QueryString参数转为友好URL参数？

我之前处理过类似的场景，本质上是ASP.NET Core的表单标签助手默认会把GET请求的参数转成查询字符串，而我们需要让它适配你定义的属性路由模板。这里有两个靠谱的解决办法：

方案一：使用asp-route-*标签助手指定路由参数 #

这是最符合ASP.NET Core约定的方式，只需要修改你的表单标签，添加对应路由参数的绑定：

@model Tiendas.Models.EmployeesByTypeViewModel
<h2>Employees</h2>
<form asp-controller="Employees" asp-action="FilterByType" 
      asp-route-EmployeeTypeID="@Model.EmployeeTypeID" 
      method="GET">
    <select asp-for="EmployeeTypeID" asp-items="Model.EmployeeTypes">
    </select>
    <button type="submit">Filter</button>
</form>

原理说明 #

asp-route-{参数名}这个标签助手会自动把对应的值填充到你定义的属性路由模板中（也就是[HttpGet("[action]/{EmployeeTypeID:int?}")]里的{EmployeeTypeID}位置），而不是默认作为查询字符串传递。当你提交表单时，不管当前是在/Employees/FilterByType还是/Employees/FilterByType/3，都会生成你期望的/Employees/FilterByType/{选中值}格式的URL。

方案二：用JavaScript拦截表单提交，手动构造URL #

如果需要更灵活的控制（比如额外的参数处理），可以用JS拦截默认的表单提交行为，直接构造目标URL跳转：

@model Tiendas.Models.EmployeesByTypeViewModel
<h2>Employees</h2>
<form id="filterForm" asp-controller="Employees" asp-action="FilterByType" method="GET">
    <select asp-for="EmployeeTypeID" asp-items="Model.EmployeeTypes">
    </select>
    <button type="submit">Filter</button>
</form>

<script>
document.getElementById('filterForm').addEventListener('submit', function(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    // 获取选中的员工类型ID
    const selectedTypeId = document.querySelector('select[name="EmployeeTypeID"]').value;
    // 构造目标URL并跳转
    window.location.href = `/Employees/FilterByType/${selectedTypeId}`;
});
</script>

原理说明 #

这种方式完全绕过了ASP.NET Core表单的默认GET提交逻辑，直接通过JS控制跳转的URL，确保生成的格式完全符合你的要求。

为什么原来的问题会出现？ #

• 当访问/Employees/FilterByType时，路由匹配的是可选参数的默认值1，表单默认的GET提交会把EmployeeTypeID作为查询字符串传递，所以生成/Employees/FilterByType?EmployeeTypeID=3。
• 手动访问/Employees/FilterByType/3时，模型绑定会把路由中的3赋值给Model.EmployeeTypeID，但表单默认提交依然会把选中的参数作为查询字符串追加，导致出现/Employees/FilterByType/3?EmployeeTypeID=1（如果下拉框初始选中的是默认值1）。

用上面的两种方案都能完美解决这个URL格式问题，优先推荐方案一，更贴合框架的使用习惯。

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