Question

我想在单击后禁用asp = action链接我有一个foreach循环，以我的观点在桌子上显示我的书我在购物车中添加书本的asp动作处于循环中，但我想仅禁用已经在购物车中的书，而不是禁用所有书本

 <a asp-action="AcheterLivre" asp-Controller="Achat" asp-route-id="@item.Isbn" id="disabled" onclick="return myFunction(this);"> Ajouter

我尝试使用jquery进行操作，但效果不佳

我尝试过

 <script>
function myFunction() {
    $("#disabled").one("click", function () {
        alert("this book is already in the cart");
    });
}

我班上有这个功能它会验证书籍是否在购物车中，也许我应该使用它？

public bool IsPresent(string isbn)
    {
        //rechercher si l'isbn correspond a un livre de la liste
        AchatLivreViewModel livre = ListeElements.Find(element => element.Isbn == isbn);
        if (livre != null)
        {
            return true;
        }
        else
        {
            return false;
        }
    }

Answer 1

尝试一下：

<a href="/Home/About" target="_blank" yetClickable="1" onclick="return foo(this);">  Ajouter </a>

还有您的Javascript：

    function foo(input) {
        if ($(input).attr('yetClickable') === '1') {
            $(input).attr('yetClickable', '0');
            return true;
        }
        else {
            // this false returning will counteract the effect of click event on the anchor tag
            return false;
        } 
    }

一旦将商品从购物车中移除，您同样需要JavaScript来通过其ID选择该商品并将yetClickable属性更改回1（以便可以点击）。

注意：上面的这个想法（根据您的情况）将一直起作用，直到不重新加载页面为止。否则，您需要通过Ajax处理购物车上的ADD / Remove操作。

希望这会有所帮助。

Answer 2

为什么不尝试这种简单的方法：

<tbody>
    @foreach (var item in Model)
            {            
                <tr>
                    <td>
                        @item.Isbn
                    </td>                
                    <td>
                        @item.Titre
                    </td>
                    <td>
                        <label class="btn btn-primary" style="padding:0"><a href="/Home/About" class="ADD2CART" style="display:block">Add to Cart</a></label>
                    </td>
                    <td>
                        <label class="btn btn-danger" style="padding:0"><a href="/Home/About" class="RemoveFromCART" style="display:block">Remove From Cart</a></label>
                    </td>

                </tr>                    
        }
</tbody>

在您的JavaScript中，如果您不想使用Ajax，则可以使用对象数组在客户端上全部管理购物车商品，我们将其命名为CartItems：

    var CartItems = [];

    $('.ADD2CART').click(function () {
            if ($(this).closest('tr').hasClass("ExistingInCart")) {
                alert('Already in Cart !!');                
            }
            else {
                // add this item to the Cart through Ajax or 
                // local javascript object: e.g.: 
                CartItems.push({
                    ISBN: $(this).closest('tr').find('td:eq(0)').text().trim(),
                    Title: $(this).closest('tr').find('td:eq(1)').text().trim(),
                });
                $(this).closest('tr').addClass("ExistingInCart");                
            }

            return false; //to prevent <a> from navigating to another address
        });





        $('.RemoveFromCART').click(function () {

            $(this).closest('tr').removeClass("ExistingInCart");

            var isbn = $(this).closest('tr').find('td:eq(0)').text().trim();
            CartItems = CartItems.filter(x => x.ISBN !== isbn);

            return false;
        });

一旦您需要提交或发布页面，您将在CartItems数组中拥有所有已经选择的书。

要将此javascript代码添加到视图中，请选择以下选项之一：

将此代码块放在视图的底部，并将上面的脚本复制到<script></script>标记内：

@部分脚本{ <script> .... copy it here ... </script> }
将脚本代码复制到newFile.js中并将其添加到视图中

<script src="~/Scripts/jquery-3.3.1.min.js"></script>

<script src="~/Scripts/newFile.js"></script>
您可能决定捆绑此newFile.js

一键后如何禁用asp动作链接

2 个答案: