ASP.NET MVC分类菜单重复显示问题求助

阿华AIGC实验室

2026-5-28

解决ASP.NET MVC中分类菜单重复显示的问题

你遇到的核心问题是当前视图绑定的是产品的分页列表，遍历每个产品渲染其所属分类，导致同一个分类被重复渲染多次——因为多个产品属于同一个分类。要解决这个问题，我们需要把「分类列表」和「产品分页列表」分离开，让视图分别获取这两组数据，同时遵循MVC的关注点分离原则（不在视图里处理业务逻辑）。

最佳方案：创建复合ViewModel

这是MVC中处理多数据集合的标准做法，类型安全且易于维护：

1. 定义复合ViewModel

在你的Web项目中创建一个ViewModel类，同时包含产品分页列表和分类列表：

namespace SportsStore.WebUI.Models
{
    public class HomeIndexViewModel
    {
        // 产品分页数据
        public PagedList.IPagedList<SportsStore.Domain.Concrete.Product> Products { get; set; }
        // 唯一的分类列表
        public IEnumerable<SportsStore.Domain.Concrete.Category> Categories { get; set; }
    }
}

2. 修改控制器逻辑，填充ViewModel

在HomeController的Index方法中，同时获取产品分页数据和唯一分类列表（这里推荐直接从Category表查询，或者如果只想显示有产品的分类，可以从产品集合中去重）：

public ActionResult Index(int? page)
{
    // 获取并分页产品数据
    var productQuery = db.Products.OrderBy(p => p.ProductId);
    int pageNumber = page ?? 1;
    var pagedProducts = productQuery.ToPagedList(pageNumber, 10); // 每页10个产品，可按需调整

    // 获取唯一分类列表：两种方式选其一
    // 方式1：直接查询所有分类（适合所有分类都要显示的场景）
    var categories = db.Categories.ToList();
    // 方式2：只显示有产品的分类（从产品集合中去重）
    // var categories = productQuery.Select(p => p.Category).Distinct().ToList();

    // 填充ViewModel
    var viewModel = new HomeIndexViewModel
    {
        Products = pagedProducts,
        Categories = categories
    };

    return View(viewModel);
}

3. 更新主视图，绑定新的ViewModel

修改主视图的Model类型为HomeIndexViewModel，然后分别遍历分类列表渲染菜单，遍历产品列表显示产品：

@model SportsStore.WebUI.Models.HomeIndexViewModel
@using PagedList.Mvc;

<div class="page-header">
    <h3>Danh sách sản phẩm</h3>
</div>
<div class="col-xs-12 col-md-3 category">
    <!-- 遍历分类列表渲染菜单 -->
    @foreach (var category in Model.Categories)
    {
        Html.RenderPartial("~/Views/Home/_Category.cshtml", category);
    }
</div>
<div class="col-xs-12 col-md-9">
    <!-- 遍历产品分页列表显示产品 -->
    @foreach (var product in Model.Products)
    {
        <div class="col-xs-12 col-md-4 product">
            <a href="#" title="@product.ProductName">
                <div class="frame">
                    <img src="@product.ProductImage" class="img-responsive adaptor" />
                </div>
                <div class="title">
                    <h3>@product.ProductName</h3>
                </div>
                <strong>@product.Price $</strong>
                <div class="rate">
                    <div>
                        <p>
                            <i class="glyphicon glyphicon-star star1"></i>
                            <i class="glyphicon glyphicon-star star2"></i>
                            <i class="glyphicon glyphicon-star star3"></i>
                            <i class="glyphicon glyphicon-star star4"></i>
                            <i class="glyphicon glyphicon-star star5"></i>
                            <span>(15 nhận xét)</span>
                        </p>
                    </div>
                </div>
            </a>
        </div>
    }
    @Html.PagedListPager(Model.Products, page => Url.Action("Index", new { page }))
</div>
<script src="~/Scripts/Rating.js" type="text/javascript"></script>

备选方案：使用ViewBag传递分类列表（不推荐，但快速）

如果不想创建ViewModel，也可以临时用ViewBag传递分类列表，但这种方式缺乏类型安全，长期维护容易出问题：

控制器中添加：ViewBag.Categories = db.Categories.ToList();
视图中修改菜单部分：

<div class="col-xs-12 col-md-3 category">
    @foreach (var category in (IEnumerable<SportsStore.Domain.Concrete.Category>)ViewBag.Categories)
    {
        Html.RenderPartial("~/Views/Home/_Category.cshtml", category);
    }
</div>