MVC - Partial View for Layout loads, but does not trigger javascript

Question

My shared page layout,_CustomerLayout.cshtml has:

 <div class="navbar-collapse collapse">
      @Html.Partial("_LoginPartial")
 </div>

The _LoginPartial.cshtml has:

<ul class="nav navbar-nav navbar-right">
        <li>@Html.ActionLink("Hello, " + User.Identity.Name + "!", "UserProfile", "Home")</li>
        <li>
            <a href="~/ShoppingCart/Index" id="ShoppingCartSpace"><i class="fa fa-shopping-cart" aria-hidden="true" id="ShoppingCartIcon"></i></a>
            <span class="badge" id="BadgeIcon"></span>
        </li>
        <li>
            <a href="javascript:document.getElementById('logoutForm').submit()">Log off</a>
        </li>
    </ul>

The BadgeIcon is what I want to display in every View, so I made a script that would take the current user's shopping cart from database, calculate the total cart quantity on the fly, and then .ajax the return in the #BadgeIcon div

The script located at the end of _LoginPartial.cshtml is:

@section scripts
{
<script>     //never gets triggered

    $(document).ready(function () {
        $.ajax({
            type: "POST",
            url: '@Url.Action("getCartCount", "ShoppingCart")',
            success: function (data) {
                $('#BadgeIcon').html(data);
            }
        })
    });

</script>
}

Also posting this snippet from the ShoppingCartController:

[HttpPost]
    public ActionResult getCartCount()
    {
            var user = db.Users.FirstOrDefault(x => x.UserName == HttpContext.User.Identity.Name);
            var cartCount = user.ShoppingCarts.FirstOrDefault().ShoppingCartProducts.Sum(x => x.Quantity);

            return Json(cartCount);
    }

As you may tell, I am far from an expert on MVC, so any help on this would be greatly appreciated.

Are there any script errors in the debug console?

Jasen
– Jasen

2016-07-29 18:22:14 +00:00
Commented Jul 29, 2016 at 18:22 — Jasen
– Jasen, Commented Jul 29, 2016 at 18:22

bankey · Accepted Answer · 2016-08-01 11:48:33Z

3

Posting the answer which was found by Pravin Tukadiya and Jasen:

Added

<script src="~/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="~/Scripts/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>

to _LoginPartial.cshtml and removed

@section scripts{
}

answered Aug 1, 2016 at 11:48

bankey

18912 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pravin Tukadiya · Accepted Answer · 2016-07-29 17:47:36Z

2

partial view has no layout so section will not work. so,try to remove section element and write code of javascript directly in partial view.

@section scripts //remove this
{
}

answered Jul 29, 2016 at 17:47

Pravin Tukadiya

4874 silver badges21 bronze badges

7 Comments

bankey Over a year ago

Didn't mention this when I asked the question,but I have already tried this to no avail

Pravin Tukadiya Over a year ago

did you check console of browser ?

Pravin Tukadiya Over a year ago

what will be return if shopping cart is empty ? I think your error is in your code side..

Pravin Tukadiya Over a year ago

user.ShoppingCarts.FirstOrDefault()==null?0:user.ShoppingCarts.FirstOrDefault().ShoppingCartProducts.Sum(x => x.Quantity); write like this..

Jasen Over a year ago

$ is not defined means jquery.js was not loaded before your partial view script executed.

|

Collectives™ on Stack Overflow

MVC - Partial View for Layout loads, but does not trigger javascript

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related