'How To Update _Layout After a Ajax Call

I'm doing a small project where I'm having problem while updating _layout file where I have my navbar which contains a element where I'm showing a Item count which I'm taking from session storage

Flow : - So I'm showing multiple products on home screen with add to cart button once user click on it the navbar which is in _layout file is should get updated with the count of items

right now I need to refresh the page to get the latest count

item count I'm taking from session

_layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Books Store</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                @Html.ActionLink("Books Store", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav" style="float: right">
                    @*<li>@Html.ActionLink("Home", "Index", "Home")</li>*@
                    <li><a href="@Url.Action("checkOut", "Home")" id="cart_count">Cart [@Session["itemCount"]]</a></li>
                    @*<li>@Html.ActionLink("Contact", "Contact", "Home")</li>*@
                </ul>
            </div>
        </div>
    </div>
    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>Demo Project By Simranjeet & Paresh</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Add to cart method

        public ActionResult AddToCart(int id, int qty)
        {
            //Code stuff here
            Session["cartMessage"] = "Added to cart!";
            return View("Index");
        }

Ajax in Index.cshtml

function AddToCart(id) {
            $.ajax({
                url: "/Home/AddToCart",
                data: { "id": id, "qty": 1 },
                success: function (result, textStatus, jqXHR) {
                    var error = jqXHR.getResponseHeader('error');
                    if (error != null) {
                        alert("out of stock");
                    } else {
                        alert("Added to cart");
                    }
                }
            })
        }

Index.cshtml

@model IEnumerable<BookStoreAssginment.Models.book>

@{
    ViewBag.Title = "Home Page";
}
<link href="~/Content/StyleSheet.css" rel="stylesheet" />
    <div class="container body-content">
        <div class="jumbotron table-container">
            <h2>Cart - [@Session["itemCount"]]</h2>
            <h2>Books Store</h2>
            <table class="table table-striped table-bordered" id="booksTable">
                <thead>
                    <tr>
                        <th>
                            <h4><strong>Name</strong></h4>
                        </th>
                        <th>
                            <h4><strong>Description</strong></h4>
                        </th>
                        <th>
                            <h4><strong>Price</strong></h4>
                        </th>
                        <th>
                            <h4><strong>Packed Date</strong></h4>
                        </th>
                        <th>
                            <h4><strong>Add To Cart</strong></h4>
                        </th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table> 
        </div>


    </div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How To Update _Layout After a Ajax Call

Sources

Related Questions