.NET Core MVC 如何在_Layout布局页展示购物车且不与视图冲突

以下是3种无侵入、高复用的实现方式，适配不同版本的.NET框架：

方案1：使用视图组件（View Component，ASP.NET Core场景推荐） #

这是ASP.NET Core专门为布局页复用模块设计的功能，完全独立于业务Controller，不会和页面原有@model、ViewBag产生冲突：

• 首先创建购物车视图组件类，比如CartViewComponent.cs，在InvokeAsync方法中实现购物车数据查询逻辑，返回对应视图即可

public class CartViewComponent : ViewComponent
{
    private readonly YourDbContext _dbContext;
    // 构造函数直接注入所需的数据库上下文或者自定义购物车服务
    public CartViewComponent(YourDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    public async Task<IViewComponentResult> InvokeAsync()
    {
        // 自行实现查询逻辑：比如获取当前登录用户的购物车总数量、商品列表
        var userId = UserClaimsPrincipal.FindFirstValue(ClaimTypes.NameIdentifier);
        var cartInfo = await _dbContext.Carts
            .Where(c => c.UserId == userId)
            .GroupBy(c => c.UserId)
            .Select(g => new CartViewModel
            {
                TotalCount = g.Sum(x => x.Quantity),
                Items = g.ToList()
            }).FirstOrDefaultAsync() ?? new CartViewModel { TotalCount = 0, Items = new List<Cart>() };
        return View(cartInfo);
    }
}

• 然后创建对应的组件视图，路径固定为Views/Shared/Components/Cart/Default.cshtml，在视图中编写购物车数量、商品列表的展示代码，直接强类型绑定CartViewModel即可，不会和其他业务页面的Model产生冲突
• 最后在_Layout.cshtml需要展示购物车的位置添加调用代码即可：

@await Component.InvokeAsync("Cart")

方案2：使用子操作（Child Action，.NET Framework MVC场景适配） #

如果是老版本的.NET MVC框架，可以用子操作实现和视图组件等效的效果：

• 新建公共Controller比如CommonController，添加标注了[ChildActionOnly]的Action，内部实现购物车查询逻辑，返回分部视图

public class CommonController : Controller
{
    [ChildActionOnly]
    public ActionResult CartInfo()
    {
        // 实现查询购物车的逻辑，返回分部视图
        var cartInfo = GetCartInfoFromDb();
        return PartialView("_CartInfo", cartInfo);
    }
}

• 创建_CartInfo.cshtml分部视图编写购物车展示逻辑，最后在_Layout中调用即可：

@Html.Action("CartInfo", "Common")

方案3：布局页直接注入服务（轻量场景可选） #

如果你的购物车逻辑非常简单，不想额外创建多类文件，可以直接在_Layout.cshtml顶部注入封装好的购物车服务，直接调用方法获取数据：

@inject ICartService CartService
@{
    // 直接在布局页获取数据，不需要经过业务Controller处理
    var userId = User.Identity.GetUserId();
    var cartCount = await CartService.GetUserCartCount(userId);
    var cartItems = await CartService.GetUserCartItems(userId);
}
<!-- 后续直接使用cartCount和cartItems渲染页面即可 -->

注意该方案尽量不要把复杂逻辑写在布局页中，所有数据查询、处理逻辑都要封装到注入的服务内，避免视图层代码过于混乱。

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