Как поместить Javascript в представление ASP.NET MVC

Я действительно новичок в 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.: У меня такое чувство, что я упускаю что-то очень простое... Заранее спасибо!


javascript asp.net asp.net-mvc asp.net-mvc-views
person Maxim Zaslavsky    schedule 02.04.2010    source источник

Ответы (4)


arrow_upward
1
arrow_downward

Создайте дополнительный <asp:ContentPlaceHolder> внутри <head> главной страницы, и тогда ваши представления будут иметь третий раздел <asp:Content> для регистрации внешних .js файлов, пользовательских <script> блоков, внешних .css файлов и пользовательских <style> блоков.

person Jaxidian    schedule 02.04.2010
comment
Работает отлично, спасибо! Звучит как очень логичное решение. - person Maxim Zaslavsky; 02.04.2010

arrow_upward
2
arrow_downward

Одна вещь, которую вы, возможно, захотите рассмотреть, — это добавить заполнитель содержимого «скрипты» на главную страницу, который загружает сценарии в конце тела. Таким образом, вы загружаете свои скрипты в конце страницы, чтобы не замедлять загрузку элементов DOM (как только скрипт начинает загружаться, он выполняет только один запрос за раз, потому что код может повлиять на DOM). Это становится немного сложнее с PartialView - если вы включаете в них код, вам нужно найти способ отложить выполнение всего, что зависит от более поздних сценариев после того, как эти сценарии загружены. Компромиссом может быть загрузка таких вещей, как jQuery, в заголовок, а остальные ваши общие скрипты — в конец тела.

Сайт.Мастер

   <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>
person tvanfosson    schedule 02.04.2010

arrow_upward
2
arrow_downward

Просто наткнулся на этот вопрос и хотел бы добавить комментарий, что в Visual Studio 2013 это можно сделать более элегантно.

На главной странице просто поместите следующий код внизу страницы (на главной странице, сгенерированной по умолчанию, этот код уже есть):

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

Затем, на ваш взгляд, внизу следующий код:

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

или если вы используете пакеты

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

или вы можете поместить раздел ‹script›...‹/script› с кодом Javascript в блок скриптов @section в представлении.

person Kirill Gribunin    schedule 24.01.2014

arrow_upward
1
arrow_downward

Тег <script> должен находиться внутри блока <asp:Content>. (Иначе, чем бы это закончилось?)

person SLaks    schedule 02.04.2010