Adding Toast in the ASP.Net Core Razor page

Question

I am currently building my first ASP.Net core application with Razor pages, where I am trying to add the toast to screen on when an item is successfully added to cart which is a click event on the Add to Cart link. I added the logic but is not working as expected. I followed link and below is the Index.cshtml where I am trying to show toast

<div class="toast">
   <div class="toast-body">
    Successfully added item to the cart
   </div>
</div>
 .............
 <td>
  .....
   <a href="#" id="buyNow" data-id="@item.InventoryId">Add to Cart</a>
  ......
 </td>
 .........
  <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "#buyNow", (function (e) {
                e.preventDefault();
                e.stopImmediatePropagation();
                 var id=$(this).data("id");
                onBuyNow(id);
            }));

            function onBuyNow(id) {
               .........
                $.ajax({
                    type: 'POST',
                    url: '@Url.Action("OrderItem", "Inventories")',
                    data: data,
                    dataType: "json",
                    success: function (result) {
                        if (result !== "")
                        {
                            //showing validation errors
                            .........
                        }
                        else {
                           // Navigates to the same page back and thats where I am trying to show toast
                            var url = '@Url.Action("Index", "Inventories")';
                            window.location.href = `${url}?id=${customerId}&rmID=${@HttpContextAccessor.HttpContext.Request.Query["rmID"]}`;
                            // trying to show toast on success
                            $('.toast').toast('show');
                        }
                    },
                    error: function (error) {
                        alert(error);
                    }
                });
                };
            });
    </script>

No toast shows up when the item got added to cart successfully. I already have references to the bootstrap in the _Layout.cshtml

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>App Name</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.0/font/bootstrap-icons.css">
</head>

Any help is greatly appreciated

Answer 1

I have checked your code. Seems problem on your script library references. It's not correct. The link you have followed they shared the link as well which you haven't used. So the take away is, for toast it requires particular library that's why you are not getting it.

Your Sample Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="toast">
        <div class="toast-body">
            Successfully added item to the cart
        </div>
    </div>

    <td>

        <a href="#" class="btn btn-primary" id="buyNow" data-id="5">Add to Cart</a>

    </td>
    <script>
        $(document).ready(function () {
            $("#buyNow").click(function (e) {
         
                var id = 5;
                onBuyNow(id);
            });
            function onBuyNow(id) {
                alert("Your Product Id is : " +id);
                $('.toast').toast('show');
            }
        });
    </script>

</body>
</html>

Output:

Note: Remember to add required script link. Additionally, for internal link make sure you have those script library locally. Other than toast will not work. You can have a look official document here

Adding Toast in the ASP.Net Core Razor page

Question

1 answers

solution1
0 2021-11-23 06:26:34

Adding Toast in the ASP.Net Core Razor page

Question

1 answers

solution1 0 2021-11-23 06:26:34

solution1
0 2021-11-23 06:26:34