如何基于数据模型属性值禁用购物CMS项目的加入购物车按钮

问题原因&修改方案 #

你当前代码有3个核心问题导致功能不生效：

• 循环内重复声明相同id addToCartButton，原生DOM要求id全局唯一，导致元素选择逻辑完全失效
• 库存判断的@if (item.Quantity == 0)块为空，没有编写任何业务逻辑
• 你定义的DisableBtn函数从未被调用，且函数内id拼写错误（多写了大写U，写成addToCartBUtton），同时a标签原生不支持disabled属性，需要配合样式和事件拦截才能实现真正的禁用效果

第一步：修改循环内的渲染逻辑 #

替换原来的加购按钮代码和空的库存判断块，完整的循环内col-4代码如下：

<div class="col-4">
  <div class="ajaxbg d-none">
    <img src="~/Images/ajax_loader.gif" />
    <p class="lead alert alert-success text-center d-none">
      The product has been added!
    </p>
  </div>
  <img src="~/Media/Products/@item.Image" class="img-fluid" alt="" />
  <h4>@item.Name</h4>
  <div>
    @Html.Raw(item.Description)
  </div>
  <p>
    @item.Price.ToString("C2")
  </p>
  <p>
    @if (item.Quantity > 0)
    {
        <!-- 移除重复的id，你已经用class选择器绑定点击事件，id完全多余 -->
        <a asp-controller="Cart" asp-action="Add" asp-route-id="@item.Id" data-id="@item.Id" class="btn btn-primary addToCart">Add to cart</a>
    }
    else
    {
        <!-- 库存为0时显示缺货提示，按钮设为禁用状态 -->
        <span class="text-danger font-weight-bold mr-2">缺货</span>
        <a class="btn btn-secondary disabled" aria-disabled="true">Add to cart</a>
    }
  </p>
</div>

第二步：修改JS点击逻辑，拦截禁用按钮的点击事件 #

删除无用的DisableBtn函数，在加购点击事件开头加禁用判断，修改后的脚本如下：

@section Scripts {
  <script>
    $(function() {
      $("a.addToCart").click(function(e) {
        // 新增：如果按钮是禁用状态，直接拦截事件
        if ($(this).hasClass('disabled')) {
          e.preventDefault();
          return false;
        }
        e.preventDefault();
        let ajaxDiv = $(this).parent().parent().find("div.ajaxbg");
        ajaxDiv.removeClass("d-none");
        let id = $(this).data("id");
        
        $.get('/cart/add/' + id, {}, function(data) {
          $("div.smallcart").html(data);
          ajaxDiv.find("img").addClass("d-none");
          ajaxDiv.find("p").removeClass("d-none");
          setTimeout(() => {
            ajaxDiv.animate({
              opacity: 0
            }, function() {
              $(this).addClass("d-none").fadeTo(.1, 1);
              $(this).find("img").removeClass("d-none");
              $(this).find("p").addClass("d-none");
            });
          });
        });
      });
    });
  </script>
}

补充建议 #

前端限制可以被用户手动修改DOM绕过，建议在后端CartController的Add接口中新增库存校验逻辑，判断对应商品的Quantity是否大于0再执行加购操作，避免恶意请求。

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