MVC自定义脚本

当编写自定义的JavaScript代码时，我们可以把这些代码添加到Scripts目录下的新脚本文件中（除非想编写侵入性JavaScript,此时直接把脚本代码嵌入视图中，但是这样做我们可能会失去25个业绩积分)。

因为新项目的Scripts目录已经包含十几个不是我们编写的脚本文件（通常叫做供应商脚本)，所以为自定义脚本创建一个单独的、应用程序特定的子目录是一个好习惯。这样一来，我们自己和其他使用代码的开发人员就很容易知道哪些脚本是库，哪些是自定义的、应用程序特定的脚本。常见的约定是将自定义脚本放到/Scripts/App子目录中。

例如，如果想把本章开始部分的代码放到一个自定义脚本文件中，可以首先创建一个新的/Scripts/App子目录，然后右击添加一个名为MusicScripts.js的新JavaScript文件。MusicScripts.js.文件如下所示：

现在应用程序中就可以使用这个脚本了，但是要在应用程序中实际使用MusicScripts.js,还需要另一个script标签。这其实没有我们想象得那么简单。在渲染的文档中这个script标签必须出现在jQueryl的script标签后面，因为MusicScripts.js需要jQuery的支持，而浏览器会按照脚本在文档中出现的顺序进行加载。

如果脚本包含了整个应用程序要使用的功能，可以把script标签放在Layout视图中，但仍需要放在jQuery的script标签之后。在这个示例中，需要在应用程序的首页中使用这些脚本，我们可以把它添加到控制器HomeController中Index视图(Views/.Home/Index.cshtml)内。这就带来了一个问题：单独视图的内容在@RenderBody(调用中渲染，该调用出现在Layout视图末尾的脚本捆绑引用之前，但是自定义的脚本依赖于jQuery,必须出现在jQuery引用之后。

下面代码中添加到默认的Layout视图中的注释说明了这个问题：这个问题的解决方法是在预定义的scripts节中渲染自定义脚本，接下来将介绍这方面的内容。

注意为什么不在Layouti视图的顶部包含标准的脚本引用，以便任何视图的脚本都能使用jQuery？这么做是出于性能考虑。一般推荐的做法是将JavaScript引用放到HTML文档的结尾、body结束标签之前，这样脚本引用就不会妨碍并行下载其他页面资源（图片和CSS)。Yahoo的“Best Practices for Speeding Up Your WebSite”中讨论了这条指导原则：http:/developer.yahoo.com/performance/rules,html#js bottom.

在节中放置脚本

除了在单独的视图中内联写入脚本标签，向输出中注入脚本的另一种方法是定义用来放置脚本的Razor节。尽管我们可以添加自定义的节，但ASP.NET MVC5应用程序默认的Layout视图中包含有一个节，我们可以用来包含依赖jQuery的脚本。包含的节的名称是Scripts,它出现在jQuery加载后，以便我们的脚本依赖于jQuery。现在可以在引用布局的任何内容视图中添加脚本节来注入视图特定的脚本。下例显示了如何将这个脚本节添加到Views/Home/Index.cshtml视图的底部：

<u1 class="row list-unstyled"id="album-list">

@foreach (var album in Model)

｛

<li class="col-1g-2 col-md-2 col-sm-2 col-xs-4 container">

<a href="@Url.Action ("Details","Store",new id album.AlbumId ))"

<img alt="@album.Title"src="@Url.Content @album.AlbumArtUrl)"/>

<h4>@album.Title</h4>

</a>

</1i>

｝

</u1>

@section Scripts ｛

<script src="~/Scripts/App/Musicscripts.js"></script>

｝

</div>

上面介绍的方法可以设置脚本标签的具体位置，以确保需要的脚本以合适的顺序出现。默

认情况下，MVC5应用程序中的Layout视图把脚本渲染在页面底部，在body标签关闭之前。

Ajax辅助方法

ASP.NET MVC框架中的HTML辅助方法。我们可以使用HTML辅助方法创建表单和指向控制器操作的链接。在ASP.NET MVC框架中还包含一组Ajx辅助方法，它们也可以用来创建表单和指向控制器操作的链接，但不同的是它们是异步进行的。当使用这些辅助方法时，不用编写任何脚本代码来实现程序的异步性。在后台，这些Ajax辅助方法依赖于非侵入式MVC的jQuery扩展。如果使用这些辅助方法，我们就需要引入脚本文件jquery.unobtrusive-ajax.js,并在视图中添加此脚本引用。这与原来的MVC版本不同，原来会在项目模板中默认包含这个脚本，并在_Layout视图中包含该脚本引用。