电商项目中创建CartVM用于头部购物车显示时出现加载错误

我正在开发一个电商项目，已实现商品的添加与展示功能。目前编写了通过购物车局部视图将商品添加到购物车的功能，但页面加载时出现NullReferenceException（对象引用未设置到对象的实例），错误指向局部视图中的@Model.Quantity。移除该代码后页面可正常加载，但这并非正确的解决方式。

相关代码 #

CartVM 模型类 #

public class CartVM
{
    public int Id { get; set; }
    public string PrdName { get; set; }
    public int Quantity { get; set; }
    public decimal Price { get; set; }
    public decimal Total { get { return Quantity * Price; } }
}

Cartpartial 控制器方法 #

public IActionResult Cartpartial()
{
    // Init CartVM
    CartVM model = new CartVM();

    // Init Quantity
    int qty = 0;

    // Init Price
    decimal price = 0;

    // Check for cart Session
    var cart = HttpContext.Session.GetString("cart");

    if (cart != null)
    {
        // Get total qty and price
        List<CartVM> dataCart = JsonConvert.DeserializeObject<List<CartVM>>(cart);

        foreach(var item in dataCart)
        {
            qty += item.Quantity;
            price += item.Price;
        }
    }
    else
    {
        // Or set qty and price to 0
        model.Quantity = 0;
        model.Price = 0m;
    }

    // Return partial view with model
    return PartialView();
}

Cartpartial 局部视图 #

@model BuySell.Models.Cart.CartVM

<div class="ajaxcart">
    Your cart: @Model.Quantity
</div>

_Layout.cshtml 调用代码 #

@await Html.PartialAsync("~/Views/Home/Cartpartial.cshtml")

错误原因及修复方案 #

核心问题 #

1. 控制器未传递模型到视图：返回局部视图时未传入构建好的model，导致视图中的Model为null，访问@Model.Quantity触发空引用异常。
2. 购物车有数据时未赋值给模型：Session存在购物车数据时，计算出的总数量和价格未赋值给model，即使传递模型也会显示默认值。
3. 直接渲染视图未触发控制器逻辑：使用PartialAsync直接渲染视图文件，不会调用控制器方法，模型从未被初始化。

修复步骤 #

1. 完善控制器逻辑，传递模型
   修改控制器方法，计算完成后赋值给模型，并返回时传入模型：

   public IActionResult Cartpartial()
   {
       CartVM model = new CartVM();
       int qty = 0;
       decimal price = 0;
       var cart = HttpContext.Session.GetString("cart");
   
       if (cart != null)
       {
           List<CartVM> dataCart = JsonConvert.DeserializeObject<List<CartVM>>(cart);
           foreach(var item in dataCart)
           {
               qty += item.Quantity;
               price += item.Price;
           }
           // 将计算结果赋值给模型
           model.Quantity = qty;
           model.Price = price;
       }
       else
       {
           model.Quantity = 0;
           model.Price = 0m;
       }
   
       // 传入模型返回局部视图
       return PartialView(model);
   }
   

2. 修改_Layout中的调用方式
   使用ActionAsync调用控制器方法，确保触发逻辑并获取正确模型：

   @await Html.ActionAsync("Cartpartial", "Home")
   

完成修改后，页面加载时会正确初始化模型，局部视图可正常显示购物车数量。

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