Как поместить Javascript в вид ASP.NET MVC - PullRequest
4 голосов
/ 02 апреля 2010

Я действительно новичок в ASP.NET MVC, и я пытаюсь интегрировать Javascript в веб-сайт, который я создаю в качестве теста этой технологии.

У меня такой вопрос: как я могу вставить код Javascript в View?

Допустим, я начинаю с шаблона 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> здесь не работает. Где и как мне это сделать?

П.С .: У меня такое ощущение, что я упускаю что-то очень простое ... Заранее спасибо!

Ответы [ 4 ]

2 голосов
/ 24 января 2014

Просто наткнулся на этот вопрос и хотел бы добавить комментарий, что в 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 в представлении.

2 голосов
/ 02 апреля 2010

Одной вещью, которую вы можете рассмотреть, является добавление заполнителя содержимого «сценарии» на главную страницу, который загружает сценарии в конце тела. Таким образом, вы загружаете свои скрипты в конце страницы, чтобы не замедлять загрузку элементов 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>

View

  <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>
1 голос
/ 02 апреля 2010

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

1 голос
/ 02 апреля 2010

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...