Using jQuery.jScroll with MVC 5

I'm trying to implement infinite scrolling with the jScroll plugin y Philip Klauzinski. I have included the jScroill js file along with jQuery and nothing is happening. Here's my view:

@model IEnumerable<AccessorizeForLess.ViewModels.DisplayProductsViewModel>

@{
    ViewBag.Title = "Products";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jQuery-jScroll.js"></script>
<link href="~/Content/Site.css" rel="stylesheet" />

<script type="text/javascript">
    $(function () {
        $('.scroll').jscroll({
            autoTrigger: true
        });
    });
</script>
<h2>Products - Necklaces</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div id="container">
    <div class="scroll">
        @foreach (var item in Model)
        {

            <div class="itemcontainer">

                @Html.ActionLink(@item.Name, "Details", new { id = item.Id })
                <br />

                <div>@Html.DisplayFor(modelItem => item.Price)</div>
                <div><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" /></div>
                <div>&nbsp;</div>
                <div>
                    Quantity: <input type="text" id="quantity" style="width:50px;" />&nbsp;
                    <button id="AddToCart" type="button" data-id="@item.Id" class="btn btn-default">Add to Cart</button>
                </div>
                <div style="height:35px;"></div>
                <hr />
            </div>

        }
    </div>
</div>

Has anyone ever used this plugin and know what I'm doing wrong?

EDIT

When I check the javascript console in Google Chrome is gives an error that jscroll is not a function

EDIT

Here is the Details code from the controller

public async Task<ActionResult> Details(int? id)
{
    if (id == null)
    {
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }
    Product product = await entities.Products.FindAsync(id);
    if (product == null)
    {
        return HttpNotFound();
    }

    DisplayProductDetailsViewModel model = new DisplayProductDetailsViewModel()
    {
        Id = product.ProductId,
        Name = product.ProductName,
        Description = product.ProductDescription,
        Price = string.Format("{0:C}",product.ProductPrice),
        Image = product.ProductImage
    };
    return View(model);
}

Solution

MVC 5 you need to use @section scripts { }. And you should load the jquery-1.10.2.min.js at the bottom of your layout. then render your scripts.

Layout:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title> @ViewBag.Title</title>


    @if (ViewBag.MetaDescription != null)
    {
        <meta name="description" content="@ViewBag.MetaDescription" />
    }
    else
    {
        <meta name="description" content="" />
    }
    @if (ViewBag.MetaKeywords != null)
    {
        <meta name="keywords" content="@ViewBag.MetaKeywords" />
    }
    else
    {
        <meta name="keywords" content=""/>
    }
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/themes/base/css")



</head>
<body>

            @Html.Partial("_LayoutHeader")

            @Html.Partial("_LayoutNav")






            @RenderBody()
            <hr />
            @Html.Partial("_LayoutFooter")




    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")

    @Scripts.Render("~/bundles/jqueryui")




            @RenderSection("scripts", required: false)


</body>

</html>

Your View:

@model IEnumerable<accessorizeforless.viewmodels.displayproductsviewmodel>

@{
ViewBag.Title = "Products";
Layout = "~/Views/Shared/_Layout.cshtml";
}



<h2>Products - Necklaces</h2>
<p>
    @Html.ActionLink("Create New", "Create")
</p>
<div id="container">
    <div class="scroll">
        @foreach (var item in Model)
        {

        <div class="itemcontainer">

            @Html.ActionLink(@item.Name, "Details", new { id = item.Id })
            <br />

            <div>@Html.DisplayFor(modelItem => item.Price)</div>
            <div><img src="@item.Image.ImagePath" alt="@item.Image.AltText" title="@item.Image.AltText" /></div>
            <div>&nbsp;</div>
            <div>
                Quantity: <input type="text" id="quantity" style="width:50px;" />&nbsp;
                <button id="AddToCart" type="button" data-id="@item.Id" class="btn btn-default">Add to Cart</button>
            </div>
            <div style="height:35px;"></div>
            <hr />
        </div>

        }
    </div>
</div>

@section scripts {
<script src="~/Scripts/jQuery-jScroll.js"></script>
}

@section scripts {
<script type="text/javascript">
    $(function () {
        $('.scroll').jscroll({
            autoTrigger: true
        });
    });
</script>
}

the @section scripts will place the script at the very bottom of the page before the </body> tag and after the jquery loads. Jquery will load first before any scripts placed in a @section scripts on any view.

Hope this helps