使用 MVC Razor 加载 javascript答案

【问题标题】：Loading javascript with MVC Razor使用 MVC Razor 加载 javascript
【发布时间】：2017-02-18 20:41:28
【问题描述】：

以下视图显示“对象不支持 jCarouselLite 道具或方法”。我有一个使用纯 html 的几乎相同的页面。我是否正确加载了 javascript？

@using System.Web.Script.Services
@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script>
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

<script type="text/javascript">
    $(function () {
        // Add Carousel plugin to rotate images
        $(".anyClass").jCarouselLite({
            visible: 1,
            auto: 3000,
            speed: 800,
            btnNext: ".next",
            btnPrev: ".prev"
        });

    });
</script>

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li>
    </ul>
</div>

【问题讨论】：

我想你在下面得到了答案。我还想告诉你一个小窍门。它总是将您的自定义脚本添加到一个包中。它会让共享布局看起来很干净。

标签： asp.net-mvc razor

【解决方案1】：

可能你的 jcarouselite jquery 插件没有加载。一个可能的原因是它没有~签名

<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

应该是这样的：

<script src="@Url.Content("~/Scripts/jcarousellite_1.0.2.js")"></script>

如果您的页面不在站点的根目录中，则无法找到它。

您可以在浏览器开发者工具中查看 JQuery 的 url 是什么以及 jcarousellite 插件的 url 是什么。我想他们会有所不同。

【讨论】：

【解决方案2】：

@using System.Web.Script.Services
@{
    ViewBag.Title = "Home Page";
}

<script src="@Url.Content("~/Scripts/jquery-2.0.3.js")"></script>
<script src="@Url.Content("/Scripts/jcarousellite_1.0.2.js")"></script>

    enter code here

<script type="text/javascript">
    $(function () {
        // Add Carousel plugin to rotate images
        $(".anyClass").jCarouselLite({
            visible: 1,
            auto: 3000,
            speed: 800,
            btnNext: ".next",
            btnPrev: ".prev"
        });

    });
</script>

<button class="prev"><<</button>
<button class="next">>></button>
<div class="anyClass">
    <ul>
        <li><img src="/gallery/slide-1.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-2.jpg" width="250" height="150"></li>
        <li><img src="/gallery/slide-3.jpg" width="250" height="150"></li>
    </ul>
</div>

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。