JS文件没有链接到asp.net MVC视图

Question

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

我有一个名为＆＃34;接收＆＃34;它放在Views / Main文件夹中。

我正在尝试添加js文件。

在intellisense中，我可以访问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文件结构

Answer 1

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

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

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

在渲染视图时会发生什么，脚本的第一行是尝试将.click()事件附加到具有id="btn"的元素，但此时该元素不存在于DOM（它在页面的下方）所以你实际上将事件附加到一个未定义的元素（一个不存在的元素）。

除非您将脚本放在结束</body>标记之前，否则应始终将脚本包装在$( document ).ready()

中

Answer 2

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

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

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

使用以下内容替换视图中的脚本标记：

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

Answer 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>

将波形符转换为Web应用程序的根路径，以便您可以指定相对于该路径的路径。

Answer 4

创建并呈现视图时，所有脚本都发布在网站根目录的文件夹中，因此当您引用脚本时，必须引用此文件夹。脚本的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")这样的网址助手，你将根据你定义的路线获得框架生成的网址。

<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")

这将生成一个类似您正在使用的脚本标记。