Question

我正在使用ASP.NET MVC 5.我有一个viewstart.cshtml并为我的jquery导入了像这样的引用

<!-- jQuery and Bootstrap JS-->
<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>
<script src="~/Scripts/Bootstrap/js/bootstrap.min.js"></script>

在我对HomeController的看法中，我在文件就绪时有警报功能，但是有一个错误表示$未定义。

但是当我将jquery直接导入到HomeController的视图中时，它运行正常。这是为什么？我的HomeController的视图实际上是使用viewstart.cshtml，它具有jquery的引用。我是否以正确的方式导入Layout.cshtml中的所有js / css文件？谢谢你的帮助

在我的View for HomeController中，如果我直接引用jquery，则没有错误，并且它正常工作。但我想做一次，所以所有的观点都不需要引用它。

见下面的代码：

@{
    ViewBag.Title = "Welcome";
} 

 <script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>

 <script>
    $(function () {
        alert("hello francis!")
    })
</script>

<h2>WELCOME !!</h2>

Answer 1

看起来你在jquery之前加载自定义脚本。

请确保Layout.cshtml（_ViewStart.cshtml之间@RenderBody和</body>之间的<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script> <script src="~/Scripts/Bootstrap/js/bootstrap.min.js"></script> @RenderSection("scripts", required: false)（scripts}中有类似内容：

@section scripts {
    <script> 
       //your custom scripts here
   </script>
}

并且在视图中，您必须将您的脚本包含在RenderBody部分中，例如：

RenderSection

这将确保您在脚本之前加载jquery。

视图中放置到视图中的任何内容都不会在window.data_from_ajax中的视图渲染过程中呈现，并且只会在<?php echo 'php_data'; ?>中呈现。

所以jquery首先在布局文件中加载，然后才从包含使用jquery渲染的自定义脚本的视图中加载。

Answer 2

这一行：

<script src="~/Scripts/jQuery/jQuery-2.1.4.min.js"></script>

在客户端结束时运行。

代字号（〜）是到达服务器根目录的方式。

您可以在服务器上使用带有代字号（〜）的网址（例如，使用Server.MapPath），但不应该在客户端上使用＆＃39结束。

您可以在客户端上创建相对网址或绝对网址，但不要使用代字号（〜）。

您的错误（$未定义）表示尚未加载JQuery。之一：

您没有正确加载JQuery - 请检查您的网址（使用开发工具很容易）。
您在加载前使用JQuery。

Answer 3

通常你应该使用捆绑来让jquery工作。在App_Start文件夹中有一个名为BundleConfig.cs的文件。将所需的jquery库放在scripts文件夹中，并按如下所示更新bundle配置文件：

public static void RegisterBundles(BundleCollection bundles)
{
        // The jQuery bundle
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        //"~/Scripts/jquery-1.9.1.*",
                        "~/Scripts/jquery.min.js"
                        //"~/Scripts/jquery-ui-1.10.2.custom.js"
                        ));

bundles.IgnoreList.Clear();
bundles.IgnoreList.Ignore("*.intellisense.js");
bundles.IgnoreList.Ignore("*-vsdoc.js");
bundles.IgnoreList.Ignore("*.debug.js", OptimizationMode.WhenEnabled);
}

在<head>标记区域右侧的Layout.cshtml中，放置以下代码片段来定义您的包：

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

您现在应该能够按预期使用jQuery。

Answer 4

转到Views / Shared / _Layout.cshtml并移动这段代码：

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

从body标签到head标签，它应该如下所示：

...
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - My ASP.NET Application</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")/
    @RenderSection("scripts", required: false)
</head>
...

...对于我个人来说，这很好，没有必要在每个html页面中嵌入对jquery的直接引用。

视图中未定义$

4 个答案: