如何将 Javascript 放入 ASP.NET MVC 视图中答案

【问题标题】：How to Put Javascript into an ASP.NET MVC View如何将 Javascript 放入 ASP.NET MVC 视图中
【发布时间】：2011-02-03 14:33:23
【问题描述】：

我真的是 ASP.NET MVC 的新手，我正在尝试将一些 Javascript 集成到我正在制作的网站中，以测试这项技术。

我的问题是：如何将 Javascript 代码插入到视图中？

假设我从默认的 ASP.NET MVC 模板开始。就视图而言，这将创建一个母版页、一个“主页”视图和一个“关于”视图。名为 Index.aspx 的“主页”视图如下所示：

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2><%= Html.Encode(ViewData["Message"]) %></h2>
    <p>
        To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
    </p>
    <p>Welcome to this testing site!</p>
</asp:Content>

在此处添加 <script> 标记不起作用。我应该在哪里以及如何做？

P.S.：我感觉我错过了一些非常基本的东西......提前谢谢！

【问题讨论】：

标签： asp.net javascript asp.net-mvc asp.net-mvc-views

【解决方案1】：

在您的母版页的<head> 内创建一个额外的<asp:ContentPlaceHolder>，然后您的视图将有第三个<asp:Content> 部分供您注册外部.js 文件、自定义<script> 块、外部@987654326 @ 文件和自定义 <style> 块。

【讨论】：

完美运行，谢谢！听起来是一个非常合乎逻辑的解决方案。

【解决方案2】：

<script> 标签需要放在<asp:Content> 块内。（否则，它会在哪里结束？）

【讨论】：

【解决方案3】：

您可能需要考虑的一件事是向您的母版页添加一个“脚本”内容占位符，该占位符在正文末尾加载脚本。通过这种方式，您可以在页面末尾加载脚本，这样它就不会减慢加载 DOM 元素的速度（一旦脚本开始加载，它一次只会执行一个请求，因为代码会影响 DOM）。这对 PartialView 来说有点棘手——如果你在其中包含代码，你需要想办法在这些脚本加载后延迟执行任何依赖于后面脚本的东西。一个折衷方案可能是在标题中加载 jQuery 之类的内容，在正文末尾加载其余的常用脚本。

Site.Master

   <body>

   ...
   <asp:ContentPlaceHolder runat="server" id="MainContent"></asp:ContentPlaceHolder>

   ...

   <script type="text/javascript" src="<%= Url.Content( "~/scripts/jquery-1.4.1.min.js" ) %>"></script>
   <asp:ContentPlaceHolder runat="server" id="ScriptContent"></asp:ContentPlaceHolder>
   </body>
   </html>

查看

  <asp:Content runat="server" ID="mainContent" ContentPlaceHolderID="MainContent">

     ... HTML ...
  </asp:Content>

  <asp:Content runat="server" ID="scriptContent" ContentPlaceHolderID="ScriptContent">

  <script type="text/javascript">
     $(function() {
       $('.selector').click( function() {
            ...
       });
     });
  </script>

  </asp:Content>

【讨论】：

【解决方案4】：

刚刚偶然发现这个问题，想添加一条评论，在 Visual Studio 2013 中可以以更优雅的方式完成。

在您的母版页中，只需将以下代码放在页面底部（在默认生成的母版页中，此代码已经存在）：

<body>
    ...
    @RenderSection("scripts", required: false)
</body>
</html>

然后在您的视图中，底部的代码如下：

@section scripts
{
    <script src="...script url..."></script>
}

或者如果你使用捆绑包

@section scripts {
    @Scripts.Render("~/bundles/<script id>")
}

或者您可以将带有 Javascript 代码的部分放入视图中的 @section 脚本块中。

【讨论】：