使用布局时如何在视图内添加脚本src

我想包含一个JavaScript参考，例如：

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

如果我有一个Razor视图，什么是包括它而不必将其添加到布局中的正确方法（我只需要在一个特定的视图中，而不是所有视图中都需要）

在aspx中，我们可以使用内容占位符。我在mvc中找到了使用aspx的旧示例，但在Razor视图中却没有。

asp.net-mvc razor

— 费拉罗
source

只需将脚本标签添加到视图中即可。

— jrummell 2013年

我只想在我的视图中添加脚本，但是当我在创建的页面上查看源代码时，它会将脚本标记放在html的<body>而不是<head>内？

— dferraro

对于最新的浏览器，不需要type =“ text / javascript”

— Mark Schultheiss

Answers:

169

根据您要实现的方式（如果有特定位置需要脚本），您可以在@section内部实现_Layout，这将使您能够从视图本身添加其他脚本，同时仍保留结构。例如

_布局

<!DOCTYPE html>
<html>
  <head>
    <title>...</title>
    <script src="@Url.Content("~/Scripts/jquery.min.js")"></script>
    @RenderSection("Scripts",false/*required*/)
  </head>
  <body>
    @RenderBody()
  </body>
</html>

视图

@model MyNamespace.ViewModels.WhateverViewModel
@section Scripts
{
  <script src="@Url.Content("~/Scripts/jqueryFoo.js")"></script>
}

否则，您所拥有的就好了。如果您不介意它与输出的视图“内联”，则可以将<script>声明放置在视图中。

— 布拉德·克里斯蒂
source

顺便说一句，部分实际上就是您所指的contentplaceholders。请参阅默认的MVC Web项目以及它们如何在页面上放置标题。

— 布拉德·克里斯蒂

谢谢。这就是我一直在寻找的-但是如果没有RenderSection，是否可以做到这一点？您说“您拥有的一切都很好”-但我还没有任何东西...我尝试将脚本引用放在.cshtml的顶部，但结果是引用位于<body>中，但它们应该在头脑中

— dferraro

@dferraro：然后您需要添加RenderSection("Scripts")到布局中（就像@section Scripts {}放置占位符一样），然后在视图中定义一个。在某些时候，即将对“ master”（_ layout）进行修改。您不能只是在视图中定义某些内容并告诉它“在<head>我之间放置它”（除非您想进入添加脚本的脚本）

— Brad Christie

+1。@dferraro更好的方法是将对jQuery和RenderSection的引用放在</ body>之前，而不是放在头部。旧但相关的读物：developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_5

— MikeSmithDev 2013年

如果您的脚本不在Scripts文件夹中，那么您可能还需要启用对其的访问：stackoverflow.com/questions/24763493/…–

— Homer

如果您使用的是Razor视图引擎，请编辑_Layout.cshtml文件。将页脚中显示的@ Scripts.Render（“〜/ bundles / jquery”）移至标头部分，并根据需要编写javascript / jquery代码：

@Scripts.Render("~/bundles/jquery")
<script type="text/javascript">
    $(document).ready(function () {
        var divLength = $('div').length;
        alert(divLength);
    });
</script>

— Dilip Nannaware
source

您可以像在asp.net中使用脚本标记一样添加脚本标记，同时进行如下所示的客户端验证。

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<script type="text/javascript" src="~/Scripts/jquery-3.1.1.min.js"></script>
<script type="text/javascript">
    $(function () {
       //Your code
    });
</script>

— 桑索什·库玛·瓦德拉玛尼
source

type="text/javascript"不需要最新的浏览器

— Mark Schultheiss