4

我真的是 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>标签不起作用。我应该在哪里以及如何做？

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

4

4 回答 4

2

您可能要考虑的一件事是在您的母版页中添加一个“脚本”内容占位符，该占位符在正文的末尾加载脚本。通过这种方式，您可以在页面末尾加载脚本，这样它就不会减慢 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>
于 2010-04-02T01:24:52.247 回答
2

只是偶然发现了这个问题，并想添加一条评论，在 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 代码的 <script>...</script> 部分放入视图中的 @section 脚本块中。

于 2014-01-24T07:33:32.790 回答
1

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

于 2010-04-02T01:07:20.397 回答
1

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

于 2010-04-02T01:07:32.350 回答