是否有将自定义 Javascript 添加到 ASP.NET MVC 5 页面的正确方法？答案

【问题标题】：Is there a correct way to add custom Javascript to an ASP.NET MVC 5 page?是否有将自定义 Javascript 添加到 ASP.NET MVC 5 页面的正确方法？
【发布时间】：2014-11-01 10:28:03
【问题描述】：

目前，我已将 jQuery 源文件添加到我的 ASP.NET 项目的 Scripts 文件夹中。在 _Layout.cshtml 页面中，我包含了 ~/Scripts/jquery-2.1.1.min.js。现在，我可以在我这样制作的每个页面上包含 jQuery 代码：

If this page shows a popup I was succesfull.

<script>
$(document).ready(function(){
alert("works!");
});
</script>

但是，我不想在每个视图中都包含完整的脚本。我更喜欢创建一个单独的 JS 文件，将其放在我的 Scripts 文件夹中，然后使用 Razor 将其包含在内。

@{ 
    //Razor Magic inserting Javascript method!
 }

If this page shows a popup I was succesfull.

我该怎么做？为单个页面包含唯一的 Javascript 文件是“正确”的方式吗？

【问题讨论】：

只需在页面中包含`。
如果你想轻松调试你的 JS 代码，无论如何它都需要在一个单独的 js 文件中（调试器只允许你断点 either mvc code or 视图中的 JS 代码）。您可以在运行时出现在解决方案顶部的动态内容中对 JS 进行断点，但这很乏味。捆绑也是最好的方法（如下所述），因为它充分利用了浏览器缓存和 JS 的自动缩小。

标签： javascript jquery asp.net asp.net-mvc razor

【解决方案1】：

在 MVC 中解决问题的最佳且优雅的方法是使 Bundles 称为 Bundling and Minification。

在此处查看更多信息：- http://www.asp.net/mvc/tutorials/mvc-4/bundling-and-minification

【讨论】：

谢谢，这看起来很有趣。不过，我现在需要弄清楚如何在 MVC5 中进行这项工作。显然，我需要使用 nuget 来包含此功能。
@Bas...welcome..bundling 对于 mvc4 和 mvc5 是一样的，根本没有区别，也可以访问这个有用的链接 dotnet-tricks.com/Tutorial/mvc/…

【解决方案2】：

您可以将页面特定的 JS 代码放在单独的 JS 文件中，并可以使用以下代码引用您的特定视图：

1) 您需要将此部分放入您的 _Layout.cshtml

<head>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.1.1.min.js)">
    @RenderSection("JavaScript", required: false)
</head>

2) 您需要将@section 添加到要在其中引用您的 JS 文件的视图 - (_ABCDView.cshtml)

@section JavaScript
{
   <script type="text/javascript" src="@Url.Content("/Scripts/SampleScript2.js")"></script>

}

注意： @RenderSection，false，表示使用此母版页的视图不需要该部分，并且视图引擎将忽略您的视图中没有定义“JavaScript”部分的事实。如果为 true，除非定义了“JavaScript”部分，否则视图将不会呈现并抛出错误。

你可以走了！

希望这会对你有所帮助。

谢谢，斯瓦提

【讨论】：