在 MVC 5 中使用 jQuery.jScroll

Question

我正在尝试使用 Philip Klauzinski 的 jScroll 插件实现无限滚动。我已经将 jScroill js 文件与 jQuery 一起包含在内，但没有任何反应。这是我的观点：

@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>

有没有人用过这个插件并且知道我做错了什么？

编辑

当我在 Google 中检查 javascript 控制台时 Chrome 给出了一个错误，指出 jscroll 不是函数

编辑

这是来自控制器的详细代码

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);
}

Answer 1

您需要使用 MVC 5 @section scripts { }。您应该在布局底部加载 jquery-1.10.2.min.js 。然后渲染你的脚本。

布局：

<!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>

您的观点：

@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>
}

@section scripts 会将脚本放置在页面底部 </body> 标记之前和 jquery 加载之后。 Jquery 将在任何视图中放置在 @section scripts 中的任何脚本之前首先加载。

希望对您有所帮助

在 MVC 5 中使用 jQuery.jScroll

Using jQuery.jScroll with MVC 5

jquery

asp.net-mvc-5

jquery-jscroll