在MVC 5中使用jQuery.jScroll

Question

我正在嘗試使用jScroll插件y Philip Klauzinski實現無限滾動。 我已經將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 Chrome瀏覽器中檢查javascript控制台時出現錯誤，表明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加載之后的頁面底部。 在任何視圖上的@section scripts放置的任何腳本之前，Jquery都會首先加載。

希望這可以幫助

在MVC 5中使用jQuery.jScroll

問題描述

1 個解決方案

解決方案1
1 已采納 2015-07-24 19:52:53

在MVC 5中使用jQuery.jScroll

問題描述

1 個解決方案

解決方案1 1 已采納 2015-07-24 19:52:53

解決方案1
1 已采納 2015-07-24 19:52:53