将脚本放在MVC _layout页面的位置

时间:2011-07-19 08:00:15

标签: asp.net-mvc

您好我从本网站的阅读建议中了解到脚本应该放在_layout页面的底部。我的问题是我不确定'底部'究竟在哪里。有些人说它就在标签之前,但这对我不起作用。我试过把脚本放在很多地方,但似乎无处可去。有人可以告诉我我做错了什么。

这是我的关于页面

@{
    ViewBag.Title = "About Us";
}

<h2>About</h2>
<p>
     Put content here.
</p>

<script type="text/javascript">
  $(function () {
    alert("Hello World");
  });
</script>

这是我的_Layout页面

<!DOCTYPE html>
<html>
<head>
  <title>@ViewBag.Title</title>
  <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
  @* jQuery works if this line is here but not if it is at the bottom
   <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
  *@
</head>
<body>
  <div class="page">
    <div id="header">
      <div id="title">
        <h1>
          My MVC Application</h1>
      </div>
      <div id="logindisplay">
        @Html.Partial("_LogOnPartial")
      </div>
      <div id="menucontainer">
        <ul id="menu">
          <li>@Html.ActionLink("Home", "Index", "Home")</li>
          <li>@Html.ActionLink("About", "About", "Home")</li>
        </ul>
      </div>
    </div>
    <div id="main">
      @RenderBody()
    </div>
    <div id="footer">
    </div>
  </div>
  @* jQery does not work if the script is here! *@
  <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
</body>
</html>

2 个答案:

答案 0 :(得分:12)

一些替代品

绝对可以将你的jquery放在body标签的末尾。理想情况下,你头脑中唯一的js是modernizrhtml5shiv等。

选项1

将jQuery @RenderSection("scripts", required: false)元素后面的<script...作为body元素中的最后一行。然后在您的任何视图中,您将使用

@section scripts
{
  <script type="text/javascript">
    $(function () {
      // page specific js code here
    });
  </script>
}

选项2

在您的jQuery script元素和body元素的结尾之间有一个script元素指向相关操作/视图的相关js文件:

<script 
  src="@Url.Content("~/Scripts/" + ViewContext.RouteData.GetRequiredString("action") + ".js")" 
  type="text/javascript">
</script>

答案 1 :(得分:1)

在文档中找到第一次引用jquery之前,必须包含Jquery文件。因此,为了解决这个问题,我把jquery文件放在head部分,并且在关闭body标签之前包含了在视图中没有使用但在其他脚本文件中的所有其他脚本