Using jQuery.jScroll with MVC 5

我试图实现无限滚动与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>

有没有人用过这个插件，知道我做错了什么?

编辑

当我检查javascript控制台在谷歌浏览器是给出了一个错误，jscroll不是一个功能

编辑

下面是来自控制器

的Details代码

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

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中放置的任何脚本。

希望能有所帮助

相关内容

最新更新

热门标签：