如何将JavaScript包含到MVC4页面头部

Question

如何将JavaScript包含到MVC4页面头部

7

可能是重复问题：
ASP.Net MVC 3 Razor：在Head标签中包含JS文件

我不想将大量的JS代码放入某些布局中，而且我需要为某些特定页面这样做，我的意思是将一些JS代码包含在它们的页眉中。

我尝试了这样的方法，但它并没有像应该那样工作。

@{
    Layout = "~/Views/Shared/_LayoutInner.cshtml";
    @Scripts.Render("~/Scripts/farbtastic/farbtastic.js")
    @Styles.Render("~/Scripts/farbtastic/farbtastic.css")
    @Scripts.Render("~/Scripts/jquery.tinycarousel.min.js")
    @Scripts.Render("~/Scripts/jquery-ui-1.8.11.min.js")
}
<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $('#slider1').tinycarousel();
        $("#accordion").accordion();
        $('#picker').farbtastic('#color');
    });
</script>

我尝试过这样做。

@{
    Layout = "~/Views/Shared/_LayoutInner.cshtml";
  <script type="text/javascript" src="@Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
}

我一直在尝试使用IT技术，但一直没有成功。

我应该怎样做才能达到目标呢？

- NoWar

1

你能否在页面中定义一个头标签并引用JS？ - ssilas777

3

请看这个问题：https://dev59.com/gW855IYBdhLWcg3wfUZM 我认为这就是你需要的。 - nemesv

4

顺便提一下，“Scripts.Render”和“Styles.Render”用于绑定和压缩，而不是用于引用单个文件。 - nemesv

1

这并不是一个答案，我对于在尝试将Modernizr放入头部时遇到的System.Web.Optimization问题感到厌烦，有时它并没有包含新的Javascript文件，所以我转而使用http://getcassette.net/。虽然有一点学习曲线，但在我看来，它比内置的捆绑工具有很多好处。 - Matt Sieker

@ssilas777 那最终的代码是什么？你能把它作为答案提供吗？ - NoWar

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ssilas777 · Accepted Answer

我确定你在你的_LayoutInner.cshtml文件中应该类似这样引用JS文件

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
</head>

为了实现你的目标，你需要在你的_LayoutInner.cshtml页面头部添加两个命名的区域，就像这样-

<head>
<link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")"></script>
 @RenderSection("JavaScript", required: false)
 @RenderSection("CSS", required: false)
</head>

现在，在您的其他页面中包含额外的JavaScript或CSS页面，请使用这些命名部分。

@section JavaScript
{
   <script type="text/javascript"src="@Url.Content("~/Scripts/farbtastic/farbtastic.js")"></script>
   <script type="text/javascript" src="@Url.Content("~/Scripts/jquery.tinycarousel.min.js")"></script>
}

@section CSS
{
  <link href="@Url.Content("~/Scripts/farbtastic/farbtastic.css")" rel="stylesheet" type="text/css" />
}

是否包含不同命名的javascript和css部分取决于您自己。

希望对您有所帮助！