Asp.Net Core实现分类名称与商品展示，解决分类名重复循环问题

方案一：直接在视图中获取分类名称（简单快捷） #

因为当前查询的是同一个分类下的所有商品，所有商品的分类信息完全一致，无需循环遍历，直接取列表中第一个商品的分类名称即可：

修改商品展示视图代码：

<!-- 仅显示一次分类名称 -->
@if (Model.Any())
{
    <h1>@Model.First().Categories.CategoriesName</h1>
}

<div class="card_contanier">
    @foreach (var item in Model)
    {
        <div class="card">
            <img class="bg_img_card" src="~/img/site_img/Header_1.jpg" alt="">
            <img src="~/Uploads/Products/@item.Image" alt="" class="img_card">
            <h4 class="crad_mian_title">@item.Product_Name</h4>
            <p class="card_title">@item.Description</p>
            <div class="cards_description">
                <h6>@item.Price ريال</h6>
                <a href="">اطلبه الان</a>
            </div>
        </div>
    }
</div>

注：用Model.Any()判断列表是否有数据，避免空列表时调用First()引发报错。

方案二：优化控制器，单独传递分类信息（更规范） #

若希望视图逻辑更清晰，可在控制器中单独获取分类信息，通过ViewData传递给视图：

1. 更新控制器代码 #

public async Task<IActionResult> Categries(int id)
{
    // 获取目标分类信息
    var category = await _db.Categories.FindAsync(id);
    // 获取该分类下的所有商品
    var products = await _db.Products.Include(s => s.Categories)
                                     .Where(X => X.CategoriesId == id)
                                     .ToListAsync();
    // 将分类名称存入ViewData
    ViewData["CategoryName"] = category?.CategoriesName;
    
    return View(products);
}

2. 修改商品展示视图代码 #

<!-- 从ViewData中读取分类名称，仅显示一次 -->
@if (!string.IsNullOrEmpty(ViewData["CategoryName"]?.ToString()))
{
    <h1>@ViewData["CategoryName"]</h1>
}

<div class="card_contanier">
    @foreach (var item in Model)
    {
        <div class="card">
            <img class="bg_img_card" src="~/img/site_img/Header_1.jpg" alt="">
            <img src="~/Uploads/Products/@item.Image" alt="" class="img_card">
            <h4 class="crad_mian_title">@item.Product_Name</h4>
            <p class="card_title">@item.Description</p>
            <div class="cards_description">
                <h6>@item.Price ريال</h6>
                <a href="">اطلبه الان</a>
            </div>
        </div>
    }
</div>

注：此方式将分类信息的获取逻辑放在控制器中，视图仅负责展示，更贴合MVC职责分离的设计原则。

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