如何根据数据模型值禁用按钮?

Question

我正在构建一个拼贴的迷你网上购物CMS项目。

我完成了这个项目，现在我想添加一个功能，我的产品数量有限。当数量等于0时，产品显示为"缺货"，我的"添加到购物车"按钮被禁用。

我已经为我的产品类添加了一个'quantity'属性，现在我需要在产品的Index视图中更改一些内容。

我尝试了几个选项，它似乎不工作。
下面是索引的代码。页面cshtml。

@model IEnumerable
<Product>
@{ ViewData["Title"] = "Products"; }
<h1 class="display-4 pb-5">All Products</h1>
<div class="row">
@foreach (var item in Model) 
{
<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>
<a asp-controller="Cart" asp-action="Add" asp-route-id="@item.Id" data-id="@item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
</p>
@if (item.Quantity == 0) { }
</div>
} 

@if (ViewBag.TotalPages > 1) {
<div class="d-flex w-100 justify-content-center">
<pagination page-count="@ViewBag.TotalPages" page-target="/products" page-number="@ViewBag.PageNumber" page-range="ViewBag.PageRange"></pagination>
</div>
}
</div>

@section Scripts {
<script>
function DisableBtn() {
document.getElementById("addToCartBUtton").disabled = true;
}
$(function() {
$("a.addToCart").click(function(e) {
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>
}

Answer 1

试试这个

@If(Model!=null)
{
@foreach (var item in Model) 
{
..........
<p>
@if (item.Quantity == 0) { 
<a disabled  class="btn btn-primary addToCart">Add to cart</a>
}
else
{
<a asp-controller="Cart" asp-action="Add" asp-route-id="@item.Id" data-id="@item.Id" id="addToCartButton" class="btn btn-primary addToCart">Add to cart</a>
}
</p>
}
}