Question

我知道stackoverflow上有一些类似的线程但我不会在我的情况下使用CDN。我检查了文件〜/ Scripts / flot / jquery.flot.js和〜/ Scripts / flot / jquery.colorhelpers.js是否存在而且确实存在。

这是我的观点

@{
    ViewBag.Title = "FlotChart";
}

<h2>FlotChart</h2>

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

<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="~/Scripts/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="~/Scripts/flot/jquery.colorhelpers.js"></script>
<script type="text/javascript" src="~/Scripts/flot/jquery.flot.js"></script>

<div id="flot-placeholder1" style="width: 300px; height: 150px"></div>

<script type="text/javascript">
    var data, data1, options, chart;
    data1 = [[1, 4], [2, 5], [3, 4], [4, 7], [5, 5], [6, 7], [7, 2], [8, 2], [9, 9]];
    data = [data1];
    options = {};

    $(document).ready(function() {
        chart = $.plot($('#flot-placeholder1'), data, options);
    });
</script>

这是我的_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My Website</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
    <div class="container body-content">
        ...
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>
</html>

Answer 1

您的_layout.cshtml和您的view.cshtml都有@Scripts.Render("~/bundles/jquery")所以第二次加载jQuery会“覆盖”添加了Flot的第一个和plot()函数可以找不到。

通常，您应该在头部加载所有外部JavaScript，而不是在页面底部。

Answer 2

我不仅加载了jQuery两次，而且我应该把我的javascript加入

@Section Scripts {
}

现在，在_Layout.html中使用以下行加载jQuery后呈现它：

@RenderSection("scripts", required: false)

这是正确的观点：

@{
    ViewBag.Title = "FlotChart";
}

<h2>FlotChart</h2>

<div id="flot-placeholder1" style="width: 300px; height: 150px"></div>

@section Scripts
{
    <!--[if lte IE 8]><script language="javascript" type="text/javascript" src="/Scripts/flot/excanvas.min.js"></script><![endif]-->
    @Scripts.Render("~/Scripts/flot")

    <script type="text/javascript">
        var data, data1, options, chart;
        data1 = [[1, 4], [2, 5], [3, 4], [4, 7], [5, 5], [6, 7], [7, 2], [8, 2], [9, 9]];
        data = [data1];
        options = {};

        $(document).ready(function() {
            chart = $.plot($('#flot-placeholder1'), data, options);
        });
    </script>
}

flot，jquery，asp.net - TypeError：$ .plot不是函数

2 个答案: