logo标签列表

ASP.NET MVC 3如何将Javascript注入到主布局中

javascriptasp.net-mvc-3razor
4

我正在尝试使用MVC 3中的新剃刀视图引擎。我遇到的问题是，我有一些特定于页面的Javascript代码。通常情况下，我会将所有的Javascript代码放在</body>标签关闭之前。我考虑在主布局的</body>标签关闭之前添加一个部分。具体做法如下：

<script type="text/javascript">
   @RenderSection("JavaScript")
</script>

但是VS2010会用绿色的下划线标出它。因此，无论哪个页面使用这个主布局，都可以在这里注入JavaScript。你们会怎么做呢？我之所以想这样做，是因为我可以从主布局中添加JavaScript到这里，否则我将不得不在@RenderSection下面定义一个单独的脚本标记。

当我执行以下操作时，VS会给我一个警告（我不喜欢警告）：

Validation (HTML 4.01): Element 'link' cannot be nested within element 'link'.

以下是针对上述警告的代码：

这是我的代码：

@section HeadSection
{
    <link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css">
    <link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css">
}

我该如何消除这些警告？
4个回答
5

根据最佳实践，我会将脚本放在页面底部。以下是我的建议：

_Layout.cshtml

<html>
    <head>
        @* ... *@
    </head>
    <body>
        @* ... *@        
        @RenderSection("Scripts", false)
    </body>
</html>

MyView.cshtml

@section Scripts
{
    <script src="@Url.Content("~/Scripts/myScript.js")"
            type="text/javascript"></script>
}
这与问题无关。 - Brendan Vogt
问题内容如下：“ASP.NET MVC 3 如何将Javascript注入到主布局中”，为什么我的回答与问题无关？您可能需要在标题中写下具体的问题。 - Esteban
3
我会在我的_layout页面中使用@RenderSection("head", false)。 然后您可以在页面的头部注入任何内容（包括脚本）...并且通过使用false，您可以使其在所有视图页面上是可选的。
根据雅虎的团队所说，将 JavaScript 放在页面底部是最佳实践。 - Brendan Vogt
是的，这只是确保在脚本触发之前加载了整个DOM。我经常使用jQuery，并且有一个辅助方法可以做到这一点，使得将其添加到底部变得无关紧要。但是，如果是这种情况，只需添加RenderSection（“footerscript”，false），并将所有内容放在其中即可。 - Ryan Eastabrook
2
你没有自动关闭链接标签 ;) 你需要在 <link/> 元素的末尾加上斜杠。 - Ryan Eastabrook
我如何在MVC 3中不使用Razor视图引擎来完成相同的事情？ - Zacho
我完全按照这个建议去做，但是在我的视图页面上我仍然收到了警告，而我在那里定义了@section。 - Chris Thompson
@Ryan：将JavaScript放在底部的原因是，如果您的脚本不必先下载，页面将更快地呈现。http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5/ - Darren Griffith
0

你需要关闭 link 标签。

像这样：

@section HeadSection
{
    <link href="http://yui.yahooapis.com/2.8.2r1/build/button/assets/skins/sam/button.css" rel="stylesheet" type="text/css" />
    <link href="http://yui.yahooapis.com/2.8.2r1/build/datatable/assets/skins/sam/datatable.css" rel="stylesheet" type="text/css" />
}

然后按照Ryan的答案操作。

doctype与问题无关。我正在使用HTML 4.01。 - Brendan Vogt
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接