JS 文件未链接到 asp.net MVC 视图答案

【问题标题】：JS files are not linking to asp.net MVC viewJS 文件未链接到 asp.net MVC 视图
【发布时间】：2015-05-22 18:18:18
【问题描述】：

我正在创建一个 asp.net MVC 应用程序。

我有一个名为“receive”的视图，它放在 Views/Main 文件夹中。

我正在尝试添加 js 文件。

在智能感知中，我可以访问 js 文件函数。

但是当我运行应用程序时，js文件没有链接。

我的看法如下

 @model dSite.Models.MModels
 <script type="text/javascript" src="../../Scripts/Jquery-2.1.js">        </script>
 <script>         
   $("#btn").click(function () 
       { alert("aa"); 
    });

</script>
@{
     ViewBag.Title = "receive";
 }
<h2>
receive</h2>
<input type="text" id="txtname" placeholder="enter name" />
<input type="button" id="btn" value="click here" />

我的 Scripts 文件夹位于根目录下。

如何将我的 js 文件链接到我的视图？以上方法我都试过了，还是不行

以下是文件结构

js文件结构

【问题讨论】：

在脚本src中，尝试用~/替换../../
@Alex 哦，亲爱的，请展开那个 Scripts 文件夹 :)
@Alex 好吧，好像脚本确实在那里。如果您在页面中检查浏览器控制台，当它尝试加载脚本时是否看到 404？如果您尝试浏览到 (root-address)/Scripts/Jquery-2.1.js 会怎样？
是什么让你觉得它没有加载？如果您希望看到一个带有“aa”的警告框，那么它与 jquery 无关 - 因为 $("#btn") 是 undefined （你真的应该使用波浪号 <script src="~/Scripts/jquery-2.1.js"></script>
首先 jquery 总是在加载！如果没有在浏览器控制台中定义 $.，您会看到它。真正的问题是脚本位于页面顶部，而不是在 document.ready 中。当视图被渲染时会发生什么，你有 $("#btn").click(function () 但此时带有 id="btn" 的元素不存在（它在页面的下方）所以你实际上将 .click() 附加到不存在的东西上（它是undefined)

标签： javascript .net asp.net-mvc

【解决方案1】：

首先 jquery 正在加载！如果不是，您会在浏览器控制台中看到 $ is not defined 错误。

真正的问题是页面顶部有以下脚本，但 document.ready 内没有。

<script>         
    $("#btn").click(function () { 
        alert("aa"); 
    });
</script>

当视图被渲染时，脚本的第一行试图将.click() 事件附加到带有id="btn" 的元素，但此时该元素在 DOM 中不存在（它进一步在页面下方），因此您实际上将事件附加到未定义的元素（不存在的元素）。

除非你把你的脚本放在</body>结束标签之前，你应该总是把你的脚本包装在$( document ).ready()中

【讨论】：

【解决方案2】：

在您的 css 和 js 文件上使用内置的 MVC 捆绑。

在您的 App_Data/BundleConfig.cs 中执行以下操作：

 bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

将视图中的脚本标签替换为：

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

【讨论】：

我认为在这种情况下不需要捆绑。另外，OP似乎是初学者，所以多解释一下会很有趣。
我正在使用 mvc 3。你确定 BundleConfig 在 mvc3 中可用。我试过但无法将此文件添加到应用数据文件夹

【解决方案3】：

将您的脚本标签更新为：

<script type="text/javascript" src="@Url.Content("~/Scripts/Jquery-2.1.js")"></script>

我相信在 MVC 4+ (Razor 2) 中您可以将其简化为

<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>

波浪号被翻译成您的网络应用程序的根路径，以便您可以指定相对于该路径的路径。

【讨论】：

【解决方案4】：

创建和渲染视图时，所有脚本都发布在您网站根目录下的 Scripts 文件夹中，因此当您引用脚本时，您必须引用此文件夹。脚本的 scr atribute 引用绝对或相对 url。 这些可以直接用字符串引用，也可以使用框架为你生成一个。

查看Absolute urls, relative urls, and...? 了解有关绝对和相对网址的更多信息。

上面的一些例子使用字符串来引用脚本的地址

<script type="text/javascript" src="/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="~/Scripts/Jquery-2.1.js"></script>
<script type="text/javascript" src="http://mysite/Scripts/Jquery-2.1.js"></script>

你也可以使用像@Url.Content("~/Scripts/Jquery-2.1.js")这样的url助手，你会得到一个由框架根据你定义的路由生成的url。

<script type="text/javascript" src='@Url.Content("~/Scripts/Jquery-2.1.js")'></script>

我个人建议您使用 MVC 捆绑和缩小功能，这将在生产环境中派上用场。它位于 BundleConfig.cs 中，您必须指定要生成的文件。

bundles.Add(new ScriptBundle("~/bundles/myscript").Include("~/Scripts/myscript.js"));

myscript 指向您要包含的 javascript 文件并在以后使用它来引用它

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

这将生成一个脚本标签，就像您正在使用的那样。

【讨论】：