ASP.NET Core MVC全局分类筛选Query字符串实现咨询（无需独立视图）

核心思路 #

无需创建独立视图，直接在全局导航模板中嵌入下拉筛选器，通过前端JS监听筛选切换事件，动态修改当前页面URL，将filter参数放在Query字符串最前面并完成跳转。

前端纯JS实现（通用方案） #

适用于静态页面、前后端分离项目，或任何后端渲染的页面（只需将代码嵌入全局导航模板即可）

1. 添加下拉筛选器HTML #

在导航栏对应位置插入下拉控件：

<select id="categoryFilter" class="nav-filter">
  <option value="">全部分类</option>
  <option value="electronics">电子产品</option>
  <option value="clothing">服饰</option>
  <option value="home-goods">家居用品</option>
</select>

2. 编写筛选切换逻辑 #

将以下JS代码放入全局JS文件，或导航模板的底部：

// 监听筛选器选择变化
document.getElementById('categoryFilter').addEventListener('change', function(e) {
  const selectedCat = e.target.value.trim();
  const currentUrl = new URL(window.location.href);
  
  // 收集现有Query参数（排除已存在的filter）
  const otherParams = [];
  currentUrl.searchParams.forEach((val, key) => {
    if (key !== 'filter') {
      otherParams.push(`${encodeURIComponent(key)}=${encodeURIComponent(val)}`);
    }
  });

  let newQuery = '';
  if (selectedCat) {
    // 格式化分类名，将空格转为+符合URL规范
    const formattedCat = selectedCat.replace(/\s+/g, '+');
    newQuery = `filter=${encodeURIComponent(formattedCat)}`;
  }

  // 拼接其他参数
  if (otherParams.length > 0) {
    newQuery = newQuery ? `${newQuery}&${otherParams.join('&')}` : otherParams.join('&');
  }

  // 跳转至更新后的URL
  const newUrl = `${currentUrl.origin}${currentUrl.pathname}${newQuery ? `?${newQuery}` : ''}`;
  window.location.href = newUrl;
});

3. 可选优化：页面加载时自动匹配当前筛选 #

如果当前URL已有filter参数，页面加载时自动选中对应分类：

window.addEventListener('DOMContentLoaded', function() {
  const currentUrl = new URL(window.location.href);
  const activeFilter = currentUrl.searchParams.get('filter');
  if (activeFilter) {
    // 将URL中的+转回空格，匹配选项的value值
    const normalizedFilter = activeFilter.replace(/\+/g, ' ');
    document.getElementById('categoryFilter').value = normalizedFilter;
  }
});

后端渲染场景适配 #

如果项目采用后端模板渲染（如PHP、Java Spring Boot、ASP.NET等），只需将上述HTML和JS代码嵌入全局导航模板即可。后端无需额外编写独立视图，仅需在接收请求时读取filter参数进行数据过滤：

示例（PHP）：

$selectedCategory = $_GET['filter'] ?? '';
// 后续使用$selectedCategory执行数据筛选逻辑

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