如何点击视图按钮调用控制器方法清空购物车并解决空对象错误？

1. 修复控制器逻辑并新增清空接口 #

首先在CartController中添加专门处理清空购物车的Action，同时修正现有代码中的错误：

新增清空购物车Action #

public ActionResult ClearCart()
{
    // 从Session获取购物车，不存在则初始化新实例
    var myCart = HttpContext.Session.GetJson<MyCart>("mycart") ?? new MyCart();
    myCart.Clear();
    HttpContext.Session.SetJson("mycart", myCart);
    // 清空后重定向到首页
    return RedirectToAction("Index", "Home");
}

修正现有错误代码 #

• 修改MyCart中的RemoveLine方法，适配传入Product Id的场景：

// 替换原RemoveLine方法
public void RemoveLine(string productId) =>
    Lines.RemoveAll(l => l.Item.Product.Id.Equals(productId));

• 修复CartController的Remove方法，修正参数匹配问题：

public ActionResult Remove(string id)
{
    var myCart = HttpContext.Session.GetJson<MyCart>("mycart") ?? new MyCart();
    myCart.RemoveLine(id);
    HttpContext.Session.SetJson("mycart", myCart);
    return RedirectToAction("Index");
}

• 修复isExist方法的无效逻辑：

private int isExist(string productId, MyCart cart)
{
    for (int i = 0; i < cart.Lines.Count; i++)
        if (cart.Lines[i].Item.Product.Id.Equals(productId))
            return i;
    return -1;
}

2. 修改视图表单与按钮 #

前端无法直接调用后台C#方法，必须通过HTTP请求触发控制器逻辑，因此调整视图代码：

方案1：直接提交表单到清空接口 #

如果不需要单独处理表单数据，可让表单直接提交到清空购物车的Action：

<form action="@Url.Action("ClearCart", "Cart")" method="post">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <br />
    <div class="form-group">
        <label for="exampleInputPassword1">Credit Card</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Fake Credit Cart Information">
    </div>
    <br />
    <button type="submit" class="btn btn-secondary">Check Out</button>
</form>

方案2：先提交表单数据再清空购物车 #

如果需要先处理邮箱、信用卡等表单数据，再清空购物车，使用AJAX分步处理：

<form id="checkoutForm" action="@Url.Action("Index", "Home")" method="post">
    <div class="form-group">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    </div>
    <br />
    <div class="form-group">
        <label for="exampleInputPassword1">Credit Card</label>
        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Fake Credit Cart Information">
    </div>
    <br />
    <button type="button" class="btn btn-secondary" id="checkoutBtn">Check Out</button>
</form>

<script>
document.getElementById('checkoutBtn').addEventListener('click', function() {
    const form = document.getElementById('checkoutForm');
    // 提交表单数据到Home/Index
    fetch(form.action, {
        method: form.method,
        body: new FormData(form)
    }).then(response => {
        if(response.ok) {
            // 表单提交成功后调用清空购物车接口
            return fetch('@Url.Action("ClearCart", "Cart")');
        }
        throw new Error('表单提交失败');
    }).then(() => {
        // 清空完成后跳转首页
        window.location.href = '@Url.Action("Index", "Home")';
    }).catch(error => {
        console.error(error);
    });
});
</script>

3. 错误原因说明 #

之前添加onclick出现“无法将null转换为对象”，核心原因是前端JS不能直接调用后台C#类的方法——你可能试图在onclick中直接访问MyCart的Clear()，这不符合前后端交互逻辑，要么是代码中引用了不存在的前端对象，要么是错误的跨端调用导致null引用。

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