ASP.NET MVC 实现新增分类自动展示及分类产品筛选重构

待解决问题 #

• 新增分类后无法自动同步到_layout布局页下拉列表，需手动修改前端代码
• 分类筛选逻辑冗余：每个分类单独编写控制器Action硬编码CategoryId，下拉菜单也硬编码跳转链接，新增分类需同时修改后端逻辑与前端代码，维护成本极高

具体实现步骤 #

1. 重构控制器，实现单Action动态筛选 #

删除ProductsFilterController中原有按分类写死的6个Action方法，替换为通用的分类筛选Action，通过传入的分类ID动态查询对应产品：

public async Task<IActionResult> Category(int categoryId)
{
    // 校验分类是否存在，避免传入无效ID抛出异常
    if (!await _context.Categories.AnyAsync(c => c.Id == categoryId))
    {
        return NotFound();
    }
    var products = await _context.Products
        .Where(p => p.CategoryId == categoryId)
        .ToListAsync();
    // 传递当前分类ID到视图，用于菜单高亮、页面标题展示
    ViewBag.CurrentCategoryId = categoryId;
    // 所有分类复用同一个视图，无需为每个分类单独创建视图文件
    return View(products);
}

注意：如果之前每个分类对应单独的视图文件，将视图内容统一合并到Views/ProductsFilter/Category.cshtml即可，视图绑定的模型直接用List<Product>类型，和之前单个分类查询返回的模型类型一致，无需额外修改视图内部逻辑。

2. 改造_layout布局页，实现分类菜单动态加载 #

由于_layout是全局共享布局，不需要在每个业务Action中传递分类数据，直接通过视图注入的方式读取数据库分类列表即可：

1. 首先在_layout.cshtml顶部添加DbContext注入（将命名空间替换为你项目中DbContext的实际命名空间）：

@inject YourProjectName.Data.AppDbContext _dbContext

2. 将原有硬编码的下拉菜单代码替换为动态遍历生成的逻辑：

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    @* 从数据库读取全部分类，按ID排序生成菜单项 *@
    @foreach (var category in _dbContext.Categories.OrderBy(c => c.Id).ToList())
    {
        <a class="dropdown-item text-dark @(ViewBag.CurrentCategoryId == category.Id ? "active" : "")"
           style="font-size: 1.1rem;"
           asp-area=""
           asp-controller="ProductsFilter"
           asp-action="Category"
           asp-route-categoryId="@category.Id">
            <i class="bi bi-dot"></i>@category.CategoryName
        </a>
    }
</div>

代码中额外加了当前分类的高亮样式，选中对应分类时菜单项会自动添加active类，可自行定义高亮样式提升交互体验。

可选优化项 #

• 若分类数据量较大或访问量高，可对分类列表添加内存缓存/分布式缓存，设置合理过期时间，在新增、编辑、删除分类操作时主动清除缓存，避免每次页面请求都查询分类表，提升响应速度。
• 若需要更友好的SEO友好URL，可给Category实体增加Slug字段（存储分类名的小写无空格格式，比如keyboards、switches），将Action参数改为接收slug查询对应分类，URL可从?categoryId=1变为/category/keyboards形式，无需修改核心逻辑。

改造完成后，后续新增分类时只需要在后台管理端添加分类数据，前台下拉菜单会自动展示新分类，点击即可直接筛选对应分类产品，完全不需要修改任何前端或后端业务代码。

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