Новые возможности ASP.NET и веб-разработки в Visual Studio 2012

Статья
07/13/2023

В новой версии Visual Studio представлен ряд усовершенствований, направленных на улучшение взаимодействия и производительности при работе с веб-технологиями. Редакторы Visual Studio для CSS, JavaScript и HTML были полностью обновлены, чтобы включить многие из наиболее востребованных средств кода, таких как IntelliSense и автоматическое отступы. Что касается производительности, объединение и минификация теперь интегрированы как встроенные функции, чтобы легко сократить время загрузки страницы.

Visual Studio позволяет работать с новейшими технологиями веб-сайтов. Вы можете использовать фрагменты CSS3 в разных браузерах, чтобы обеспечить работу сайта независимо от клиентской платформы, а также воспользоваться преимуществами новых элементов и функций HTML5.

Написание и профилирование кода JavaScript должно быть проще в этой версии Visual Studio. Списки IntelliSense, интегрированная XML-документация и функции навигации теперь доступны для кода JavaScript. Теперь у вас есть каталог JavaScript. Кроме того, вы можете проверка соответствие ECMAScript5 сценариям и обнаружить синтаксические ошибки на раннем этапе.

Наконец, эта версия Visual Studio реализует встроенные функции объединения и минификации. Файлы скриптов и таблицы стилей будут упакованы и сжаты, чтобы сайт выполнялся быстрее.

В этом задании описаны усовершенствования и новые функции, описанные ранее, путем применения незначительных изменений к образцу веб-приложения, предоставленному в папке Source.

Задачи

В этом практическом задании вы узнаете, как:

Использование новых возможностей и улучшений в редакторе CSS
Использование новых возможностей и улучшений в редакторе HTML
Использование новых функций и улучшений в редакторе JavaScript
Настройка и использование объединения и минификации

Предварительные требования

Microsoft Visual Studio Express 2012 для Web или более поздней версии (инструкции по установке см. в приложении А).
Windows PowerShell (для сценариев установки , уже установленных в Windows 8 и Windows Server 2008 R2)
Internet Обозреватель 10 или браузер, совместимый с HTML5

Упражнения

Это практическое занятие включает в себя следующие упражнения:

Упражнение 1. Новые возможности редактора CSS
Упражнение 2. Новые возможности редактора HTML
Упражнение 3. Новые возможности редактора JavaScript
Упражнение 4. Объединение и минификация

Предполагаемое время выполнения этого задания: 60 минут.

Упражнение 1. Новые возможности редактора CSS

Веб-разработчики должны быть знакомы со многими трудностями, связанными с редактированием CSS. Одной из самых больших проблем стилей CSS является кроссбраузерная совместимость. Часто бывает, что после применения стилей к сайту вы заметите, что он выглядит по-другому, если открыть его в другом браузере или на другом устройстве. Таким образом, вы можете потратить значительное время на исправление этих визуальных проблем, чтобы понять, что, когда вы, наконец, заставить его работать в одном браузере, он нарушается в других.

Visual Studio теперь включает функции, которые помогают разработчикам получать доступ к таблицам стилей CSS, эффективно работать и упорядочивать их. В этом упражнении вы получите новые возможности для эффективной организации и выпуска, а также фрагменты кода CSS3 для совместимости между браузерами.

Задача 1. Новые возможности редактора

В этой задаче вы узнаете о новых возможностях редактора CSS. Этот новый редактор поможет повысить производительность, используя новые интеллектуальные отступы, улучшенные комментарии к коду и расширенный список IntelliSense.

Запустите Visual Studio и откройте решение WhatsNewASPNET.sln , расположенное в папке Source\WhatsNewASPNET этой лаборатории.
В Обозреватель решений откройте файл Site.css, расположенный в папке Стили. Убедитесь, что средства текстового редактора отображаются на панели инструментов. Для этого выберите пункт меню Просмотр | панелей инструментов и проверка параметры Текстового редактора. Вы заметите, что с этой новой версии для редактора CSS также включены кнопки "Комментарий " ( ) и " Раскомментировать " ( ).

Включение редактора и средств CSS
Прокрутите код и выберите любое определение класса CSS. Нажмите кнопку Комментарий ( ), чтобы закомментировать выбранные строки. Затем нажмите кнопку Раскомментировать ( ), чтобы отменить изменения.
Нажмите кнопки Свернуть ( ) и Развернуть ( ), расположенные в левом поле текста. Обратите внимание, что теперь можно скрыть стили, которые не используются для более чистого представления.

Свертывание классов CSS
Убедитесь, что включена функция интеллектуального отступа. Выберите пункт меню Сервис | Параметры, а затем выберите страницуФорматированиеCSS | текстового редактора | в левой области экрана. Установите флажок Иерархический отступ .

Включение иерархического отступа
Найдите определение класса main (.main) и добавьте стиль к элементам div. Вы заметите, что код выравнивается автоматически, помогая пользователям быстро найти родительские классы.

CSS
```
.main
{
  padding: 0px 12px;
  margin: 12px 8px 8px 8px;
  min-height: 420px;
}
  .main div
  {
    border: 0px;
  }
```
Иерархическое выравнивание в CSS
В классе div .main найдите курсор в конце границы 0px и нажмите клавишу ВВОД, чтобы отобразить список IntelliSense. Начните вводить сверху и обратите внимание, как список фильтруется по мере ввода. В списке будут отображаться элементы, содержащие верхнюю часть слова (в предыдущих версиях Visual Studio список фильтруется по элементам, начинающимся с термина ).

Усовершенствования IntelliSense в CSS

Задача 2. Выбор цвета

В этой задаче вы узнаете о новом инструменте выбора цвета CSS, интегрированном в Visual Studio IntelliSense.

В Site.css найдите определение класса заголовка (.header) и поместите курсор рядом с атрибутом background-color между символами ":" и "#" в этой строке кода .

Поиск курсора
Удаление двоеточия (:) и напишите его еще раз, чтобы отобразить средство выбора цвета. Обратите внимание, что первые цвета, которые вы увидите, являются наиболее частыми цветами вашего сайта. Если щелкнуть белый цвет, код html-цвета (#fff) заменит текущий код цвета в таблице стилей.

Палитра
Нажмите кнопку Развернуть ( ) в палитре цветов, чтобы отобразить градиент цвета, а затем перетащите курсор градиента, чтобы выбрать другой цвет. После этого нажмите кнопку Пипетка и выберите любой цвет на экране. Обратите внимание, что значение цвета фона динамически изменяется при перемещении курсора.

Градиент выбора цвета
В ползунке Непрозрачность переместите селектор в центр панели, чтобы уменьшить прозрачность. Обратите внимание, что теперь значение цвета фона изменяет масштаб на RGBA.

Непрозрачность средства выбора цвета

Примечание

Определение цвета RGBA (красный, зеленый, синий, альфа) в CSS3 позволяет определить значение непрозрачности цвета для одного элемента. В отличие от непрозрачности , цвета RGBA аналогичного атрибута - CSS также совместимы с последними браузерами.

Задача 3. Фрагменты кода, совместимые с CSS

В этой задаче вы узнаете, как использовать фрагменты CSS3, совместимые с несколькими браузерами, чтобы реализовать некоторые функции на веб-сайте.

В файле Site.css найдите определение класса CSS заголовка (.header) и поместите курсор под заполнителем /*border radius*/ , чтобы добавить новый фрагмент. Нажмите клавишу ВВОД , чтобы отобразить список IntelliSense, и введите radius для фильтрации списка. Дважды щелкните параметр border-radius в списке, а затем нажмите клавишу TAB , чтобы вставить фрагмент. Затем введите размер радиуса в пикселях и нажмите клавишу ВВОД. Например, введите 15 пикселей.

Атрибуты CSS3, добавленные во фрагменте кода, будут отображать скругленные границы в большинстве браузеров соответствия HTML5, включая браузеры на основе Mozilla и WebKit.

Использование фрагмента радиуса границы

Примените те же фрагменты границы в стиле страницы (.page).

CSS

.page
{
    width: 960px;
    background-color: #fff;
    margin: 20px auto 0px auto;
    border: 1px solid #496077;
    /*border radius*/
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
}

Чтобы запустить решение, нажмите клавишу F5. Обратите внимание, что каждая страница теперь имеет скругленные границы.

Скругленные углы
Закройте браузер и вернитесь в Visual Studio.
Откройте файл Custom.css , расположенный в папке Стили , и поместите курсор в определение класса div.images ul li img .
Нажмите клавишу ВВОД, чтобы отобразить список IntelliSense, введите box-shadow и дважды нажмите клавишу TAB , чтобы вставить фрагмент кода тени по умолчанию в определение класса. Задайте для теневых значений 10px 10px 5px #888. Затем введите border-radius и вставьте фрагмент кода. Введите 15 пикселей , чтобы задать размер радиуса, и нажмите клавишу ВВОД.

Скругленные углы с тенью

Примечание

В этот момент атрибут тени вставляется с соответствующим префиксом (moz, webkit, o) для поддержки браузеров Mozilla и Webkit (Chrome, Safari, Konkeror).
Создайте новый класс div.images ul li img:hover под определением класса div.images ul li img и поместите курсор в квадратные скобки .

CSS
```
div.images ul li img
{
  ...
}

div.images ul li img:hover
{

}
```
Введите transform и дважды нажмите клавишу TAB , чтобы вставить фрагмент преобразования. Затем введите rotate(-15deg), чтобы изменить значение угла поворота при наведении указателя на изображения.

CSS
```
div.images ul li img
{
  padding-top: 50px;
  padding-right: 15px;
  width: 150px;
  ...
}

div.images ul li img:hover
{
  -moz-transform: rotate(-15deg);
  -ms-transform: rotate(-15deg);
  -o-transform: rotate(-15deg);
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}
```
Нажмите клавишу F5 , чтобы запустить решение и перейти на страницу CSS3. Обратите внимание, что изображения имеют скругленные углы и тени прямоугольник. Наведите указатель мыши на изображения и watch их вращение.

Фрагмент преобразования, вращающий изображение

Примечание

Если вы используете Интернет Обозреватель 10 и не видите тени, убедитесь, что для режима документов заданы стандарты IE10. Нажмите клавишу F12, чтобы открыть интернет-Обозреватель средства разработчика, и щелкните Режим документа, чтобы перейти на стандарты IE10.

Упражнение 2. Новые возможности редактора HTML

В Visual Studio есть улучшенный редактор HTML. Некоторые из улучшений, включенных в эту версию, включают интеллектуальный отступ в HTML-документах, фрагменты HTML5, сопоставление начальных и конечных тегов HTML, а также проверку HTML. В этом упражнении вы увидите, как эти изменения улучшают беглость при работе с разметкой веб-сайта.

Как и редактор CSS, редактор HTML также был улучшен. Большинство из этих улучшений являются небольшими, которые упрощают жизнь веб-разработчика. Некоторые из этих улучшений, такие как дополнительные фрагменты кода для HTML5, интеллектуальный отступ, сопоставление тегов начала и окончания при редактировании и проверке документа HTML DOCTYPE.

Задача 1. Улучшенная проверка DOCTYPE

Редактор HTML теперь может проверка DOCTYPE страницы, даже если определение может находиться на странице master. В зависимости от DOCTYPE страницы редактор HTML будет проверять правильный набор правил и фильтровать список IntelliSense с учетом элементов DOCTYPE.

В этой задаче вы измените DOCTYPE страницы, чтобы увидеть, как меняется поведение редактора HTML.

Если это еще не открыто, запустите Visual Studio и откройте решение WhatsNewASPNET.sln , расположенное в папке Source\WhatsNewASPNET этого задания.
Откройте страницу Site.Master .
Обратите внимание на панель инструментов Целевая схема для проверки. Поведение редактора HTML (Проверка, IntelliSense и т. д.) изменится в соответствии с выбранным типом документа.

Использование doctype на панели инструментов редактирования источника HTML
Измените целевую схему на HTML 4.01.

Изменение типа документа на панели инструментов редактирования источника HTML
Поместите курсор под элемент body и начните вводить имя элемента HTML5 (например, video). Обратите внимание, что элемент недоступен в списке IntelliSense.

Элементы HTML5 отсутствуют в списке
Отмените изменения на панели инструментов Целевая схема для проверки, выбрав DOCTYPE: XHTML5 из раскрывающегося списка.

Сброс типа документа на панели инструментов редактирования источника HTML
Поместите курсор под элемент body и снова начните вводить элемент HTML5 (например, например, видео). Обратите внимание, что элементы HTML5 теперь доступны в списке IntelliSense.

Элементы HTML5 в списке

Задача 2. Автоматическое обновление тегов начала и окончания

Visual Studio теперь обновляет открывающий или закрывающий HTML-теги редактировать элемент в соответствии друг с другом. Эта новая функция повысит производительность при редактировании HTML-тегов.

На странице Default.aspx добавьте элемент H3 с заголовком (например, Visual Studio 2012 Rocks!).

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h3>Visual Studio 2012 Rocks!!</h3>
</asp:Content>

Измените тег H3 и введите H2 или H1.

Обратите внимание, что тег end обновляется автоматически. Вы также можете изменить тег end, чтобы увидеть, что начальный тег также обновляется соответствующим образом.

Автоматическое обновление конечного тега

Задача 3. Новые фрагменты кода HTML5

Visual Studio теперь включает несколько фрагментов кода HTML5. В этой задаче вы будете использовать некоторые из этих фрагментов.

Добавьте новую папку с именем audio в корень папки веб-сайта. Откройте Windows Обозреватель и скопируйте любой звуковой файл в папку audio решения WhatsNewASPNET.sln.
На странице Default.aspx найдите курсор под web11 Rocks!! Заголовок. Введите звук и нажмите клавишу TAB.

Новый редактор HTML содержит фрагменты кода для содержимого HTML5. Не забудьте использовать правильное определение DOCTYPE, чтобы включить фрагменты КОДА HTML5.

Вставка фрагментов кода HTML5

Обновите источник звука, чтобы он указывал на существующий звуковой файл.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
  <br />
  <asp:Image ImageUrl="~/images/Web11.JPG" runat="server" />
  <h2>Visual Studio 2012 Rocks!!</h2>
  <audio controls="controls">
    <source src="audio/Kalimba.mp3" />
  </audio>
</asp:Content>

Примечание

Вам потребуется добавить звуковой файл в решение.

Нажмите клавишу F5 , чтобы запустить сайт и воспроизвести звук.

Запуск элемента управления звуком

Примечание

Вы также можете попробовать другие фрагменты кода, включенные в Visual Studio, например видео, рисунок и т. д.
Теперь попробуйте вставить элемент управления в какую-то часть страницы. Например, попробуйте вставить элемент управления GridView , но вместо того, чтобы вводить <Gri, начните вводить <GV. Обратите внимание, что в списке IntelliSense отображается элемент управления asp:GridView .

IntelliSense в редакторе HTML теперь предоставляет поиск в регистре заголовка, а также частичное сопоставление (получение всех элементов, содержащих термин).

Вставка GridView со списками IntelliSense

При вводе <grid вы получите все элементы, соответствующие термину, но Visual Studio предложит элемент управления gridview :

Вставка GridView со списками IntelliSense и частичным сопоставлением

Задача 4. Смарт-теги редактора HTML

Еще одним улучшением редактора HTML является функция смарт-тегов. Смарт-теги упрощают выполнение распространенных или повторяющихся задач разработки для каждого элемента управления. Эта функция уже была доступна в html-Designer, но не в редакторе HTML.

Откройте Site.Master и найдите элемент asp:Menu . Поместите курсор на тег start и обратите внимание, что маленький глиф, отображаемый в нижней части элемента, щелкните его, чтобы открыть меню смарт-задач. Обратите внимание, что у вас есть быстрый доступ к некоторым задачам, связанным с элементом управления Меню.

Интеллектуальные задачи для элемента управления Меню

Задача 5. Интеллектуальный отступ

Одним из рекомендаций в HTML является отступ вложенных элементов, чтобы обеспечить удобочитаемый код. В Visual Studio 2012 вы заметите, что редактор автоматически отступает для элементов во время написания кода.

Примечание

В предыдущей версии Visual Studio интеллектуальный отступ был доступен в редакторе XML, но не в редакторе HTML.

Убедитесь, что для конфигурации отступа в редакторе HTML задано значение Интеллектуальный отступ. Для этого выберите Сервис | Пункт меню "Параметры" , а затем выберите текстовый редактор | HTML | Страница вкладок в левой области экрана. Выберите параметр Интеллектуальный отступ.

Параметры редактора HTML
На странице Default.aspx удалите все содержимое в элементе audio.
Поместите курсор в конец открывающегося звукового элемента и нажмите клавишу ВВОД.

Обратите внимание, что новое положение курсора имеет дополнительный уровень отступа.

Интеллектуальный отступ в редакторе HTML
Восстановите аудиотег с удаленным содержимым или закройте Файл Default.aspx без сохранения изменений.

Задача 6. Извлечение в пользовательский элемент управления

Средства рефакторинга, включенные в Visual Studio, такие как извлечение части кода в функцию, являются отличными функциями, которые упрощают улучшение и рефакторинг существующего кода. Аналогом для ASP.NET страниц будет извлечение HTML-кода в пользовательский элемент управления. Выполнение этого действия вручную потребует нескольких шагов, таких как создание нового пользовательского элемента управления, перемещение раздела кода в пользовательский элемент управления, регистрация префикса тега для пользовательского элемента управления и, наконец, создание экземпляра пользовательского элемента управления на страницах. Теперь новое средство "Извлечь в пользовательский контроль " автоматически выполняет все эти действия.

В этой задаче вы будете использовать новую контекстную операцию Извлечь в пользовательский элемент управления для создания нового пользовательского элемента управления на основе выбранного кода.

На странице Default.aspx выберите элементы H2 и audio .
Щелкните правой кнопкой мыши и выберите команду Извлечь в пользовательский элемент управления.

Пункт меню "Извлечь в пользовательский элемент управления"
Введите имя нового пользовательского элемента управления. Например, Jukebox.ascx и нажмите кнопку ОК.

Сохранение извлеченного пользовательского элемента управления
Обратите внимание, что выбранный код был извлечен в пользовательский элемент управления, а исходное расположение выбранного кода было заменено экземпляром нового пользовательского элемента управления.

Страница автоматически обновляется для использования нового пользовательского элемента управления
Нажмите клавишу F5 , чтобы запустить страницу и убедиться, что элемент управления работает.

Упражнение 3. Новые возможности редактора JavaScript

Написание или редактирование кода JavaScript не является легкой задачей, особенно когда размер приложения начинает увеличиваться и вы работаете с длинными файлами и сотнями функций. Разработчикам скриптов обычно приходится выполнять дополнительную работу, чтобы поддерживать удобочитаемость кода и перемещаться между файлами. Благодаря включению библиотек JavaScript, таких как jQuery, навигация по скриптам сама по себе стала сложной задачей из-за длины кода.

Visual Studio обновила редактор JavaScript с обещанием сделать режим кода доступным и организованным. Многие функции Visual Studio, которые уже существовали в редакторах C# или VB, теперь реализованы в редакторе JavaScript: переход к определению, автоматическое отступы, документация и проверка при написании. С обновленным списком IntelliSense у вас будет каталог функций JavaScript под рукой.

В этом упражнении вы узнаете о некоторых новых возможностях и улучшениях редактора JavaScript. Вы просматриваете примеры файлов и обнаруживаете каждую из новых характеристик, которые сделают программирование на JavaScript более эффективным в Visual Studio 2012.

Задача 1. Новые возможности редактора JavaScript

Эта задача познакомит вас с некоторыми новыми функциями редактора JavaScript, которые ориентированы на упорядочение кода и улучшение взаимодействия с пользователем.

Если это еще не открыто, запустите Visual Studio и откройте решение WhatsNewASPNET.sln , расположенное в папке Source\WhatsNewASPNET этой лаборатории.
Нажмите клавишу F5 , чтобы запустить приложение, а затем щелкните ссылку JavaScript на панели навигации. Обновите страницу несколько раз и проверка, как увеличивается счетчик.

Счетчик страниц
Закройте браузер и вернитесь в Visual Studio.
Откройте страницу JavaScript.aspx и найдите блок скрипта<> (показано ниже).

В следующем коде используется локальное хранилище HTML5 для хранения переменной pageLoadCount , которая хранит количество посещений страницы текущим пользователем. Локальное хранилище — это клиентская база данных "ключ-значение", представленная в стандарте HTML5. Данные сохраняются на локальном компьютере в браузере пользователя.
```
<script>
  addCount(1);
  document.getElementById('count').innerHTML = getCount();

  function getCount() {
    var storage = window.localStorage;
    if (!storage.pageLoadCount)
      storage.pageLoadCount = 0;

    return storage.pageLoadCount;
  }

  function addCount(value) {
    window.localStorage.pageLoadCount = parseInt(getCount(), 10) + value;
  }

  ...   
</script>
```
Примечание

Убедитесь, что параметру DOCTYPE присвоено значение XHTML5, прежде чем переходить к дальнейшим действиям.
Измените код и обратите внимание, что IntelliSense для JavaScript включает функции HTML5, такие как локальное хранилище, и их внутренние методы.

Функции Html5 JavaScript в JavaScript
Щелкните любую открывающую скобку ({) в коде скрипта и обратите внимание, что квадратные скобки выделены.

Выделены квадратные скобки
Раскомментируйте функцию testAutoAlign() (выделите три строки, и вы можете использовать клавиши CTRL + K; CTRL + U) и найдите курсор в коде функции. Нажмите клавишу ВВОД, чтобы добавить вторую строку. Обратите внимание, что код теперь выравнивается и автоматически с отступом.

Код JavaScript выравнивается автоматически

Задача 2. Проверка JavaScript

В этой задаче вы узнаете о новой проверке JavaScript для стандарта ECMAScript5. Эта функция поможет написать соответствующий код JavaScript, предотвращая проблемы со сценариями перед развертыванием сайта.

Примечание

В Visual Studio 2010 реализовано соответствие ECMAStript3, а Visual Studio 2012 обеспечивает соответствие ECMAScript5.

Откройте ECMA5script5.js в папке Скрипты\пользовательский проект. Теперь вы будете тестировать проверку стандарта ECMAScript5.
```
"use strict";

if (true) {
    function StrictModeError()
    {
    }
}
```
В первой строке файла можно проверка направление "use strict", что позволяет включить строгий режим ECMAScript5. Этот режим состоит из подмножества языка, который разъясняет неоднозначности из предыдущего выпуска и добавляет некоторые новые функции, такие как методы получения и задания, поддержка библиотеки для JSON и более полное отражение свойств объектов.
Откройте список ошибок , если он еще не открыт (меню "Вид" | Список ошибок). Обратите внимание, что объявление функции подчеркнуто. Это связано с тем, что в ECMA5 стандартные функции не могут быть вложены в языковые структуры. В списке ошибок ниже вы увидите сведения о предупреждении.

Сообщение

Сообщение об ошибке проверки JavaScript
Закомментируйте направление "использовать строгое" и обратите внимание, что ошибки исчезают, но предупреждения остаются.
В последней строке файла напишите любую строку, например test (добавьте кавычки, чтобы указать, что это строка). Напишите точку рядом со строкой, чтобы отобразить список IntelliSense, и выберите параметр обрезки .

В стандарте ECMAScript5 строковые значения и переменные также имеют определенные строковые методы, такие как trim, uppercase, search и replace.

Список IntelliSense в JavaScript

Задача 3. Xml-документация по JavaScript

В этой задаче вы изучите функции Visual Studio для XML-документации на JavaScript. Вы увидите, что в списке JavaScript IntelliSense теперь отображается XML-документация по каждой функции. Кроме того, вы обнаружите функцию навигации в JavaScript.

Откройте XMLDoc.js файл, расположенный в папке Скрипты/пользовательский проект. Этот файл содержит XML-документацию по каждой из функций JavaScript.

Xml-документация javaScript, интегрированная в IntelliSense
Ниже добавьте функцию в файлXMLDoc.js создайте новую функцию с именем test.
В функции test вызовите функцию умножения , которая получает два параметра. Обратите внимание, что в окне подсказки отображается документация по функции умножения .
```
function test() {
  multiply(
}
```
Xml-документация по функциям JavaScript
Выполните инструкцию вызова функции и введите точку , чтобы открыть список IntelliSense в возвращаемом значении. Обратите внимание, что Visual Studio обнаруживает возвращаемое значение в документации, рассматривая значение как число.

XML-документация по типам возвращаемых значений
Теперь вставьте вызов для добавления функции. Обратите внимание, что редактор JavaScript теперь поддерживает перегрузки функций. При написании имени функции вы сможете выбрать любую из доступных перегрузок, указанных в документации.

XML-документация по перегрузкам
Откройте GotoDefinition.js файл и найдите вызов функции $().html(). Найдите курсор в html.
Нажмите клавишу F12 и перейдите к определению. Обратите внимание, что теперь вы можете получить доступ к коду JavaScript и просматривать его без использования средства Поиска .
Найдите курсор в инструкции jQuery перед блоком подписи в нижней части файла кода. Нажмите клавишу F12. Вы перейдете к файлу библиотеки jQuery. Обратите внимание, что вы также можете перемещаться по файлам jQuery с помощью F12.

Переход к определениям jQuery

Примечание

Перед сохранением файла убедитесь, что в GotoDefinition.js нет синтаксических ошибок.

Упражнение 4. Объединение и минификация

Сколько раз ваши веб-сайты содержат несколько файлов JavaScript или CSS? Это очень распространенный сценарий, в котором объединение и минификация могут помочь уменьшить размер файла и ускорить работу сайта. Новая функция объединения в ASP.NET 4.5 упаковывает набор файлов JS или CSS в один элемент и уменьшает его размер за счет уменьшения содержимого (т. е. удаления не требующихся пробелов, удаления комментариев, уменьшения идентификаторов ).

Объединение и минификация в ASP.NET 4.5 выполняется во время выполнения, чтобы процесс мог определить агент пользователя (например, IE, Mozilla и т. д.) и, таким образом, улучшить сжатие путем нацеливания на пользовательский браузер (например, удаление элементов, относящихся к Mozilla, когда запрос поступает из IE).

В этом упражнении вы узнаете, как включить и использовать различные типы объединения и минификации в ASP.NET 4.5.

Задача 1. Установка пакета объединения и минификации из NuGet

Если это еще не открыто, запустите Visual Studio и откройте решение WhatsNewASPNET.sln , расположенное в папке Source\WhatsNewASPNET этой лаборатории.
Откройте консоль диспетчера пакетов NuGet. Для этого используйте меню Просмотреть | другуюконсоль диспетчера пакетов Windows | .

Открытие консоли диспетчера пакетов
В консоли диспетчера пакетов введите Install-Package Microsoft.Web.Optimization и нажмите клавишу ВВОД.

Задача 2. Пакеты по умолчанию

Самый простой способ использовать объединение и минификации — включить пакеты по умолчанию. Этот метод использует соглашения, позволяющие ссылаться на пакетную и минимифицированную версию для файлов JS и CSS в папке.

В этой задаче вы узнаете, как включить и сослаться на объединенные и минифицированные файлы JS и CSS, а также просмотреть выходные данные.

Если это еще не открыто, запустите Visual Studio и откройте решение WhatsNewASPNET.sln , расположенное в папке Source\WhatsNewASPNET этой лаборатории.
В Обозреватель решений разверните папки Стили, Скрипты\пользовательские и Скрипты\bundle.

Обратите внимание, что приложение использует несколько ФАЙЛОВ CSS и JS.

Несколько таблиц стилей и файлов JavaScript в приложении
Откройте файл Global.asax.cs .

Обратите внимание, что новое пространство имен Microsoft.Web.Optimization закомментировано в начале файла. Раскомментируйте директиву using, чтобы включить функции объединения и минификации.
```
using System;
using Microsoft.Web.Optimization;
```
Найдите метод Application_Start .

В этом методе раскомментируйте вызов EnableDefaultBundles, как показано в фрагменте кода ниже. Это позволяет нам ссылаться на объединенную коллекцию CSS-файлов в папке, используя путь к этой папке, а также суффикс "CSS" или "JS".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js 
    BundleTable.Bundles.EnableDefaultBundles();

    ...
}
```
Откройте файл Optimization.aspx и найдите элемент управления содержимым для HeadContent.

Обратите внимание, что CSS-файлы и JS-файлы имеют один тег, на который ссылается.
```
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
  <link href="Styles/CSS" rel="stylesheet" type="text/css" />
  <script src="Scripts/custom/JS"></script>
</asp:Content>
```
Примечание

Этот код предназначен для демонстрационных целей. В идеале вы будете ссылаться на пакеты в файле Site.Master. В этом примере кода вы увидите, что на некоторые из упакованных файлов также ссылается файл Site.Master, что делает эту последнюю ссылку избыточной.
Обратите внимание, что ссылки используют соглашения объединения в атрибуте href для получения всех файлов CSS или JS из папки Styles и Scripts\custom соответственно.

Вы можете использовать путь Scripts/custom/JS , как показано ниже, для объединения и уменьшения всех JS-файлов в папке Scripts/custom . Это поведение по умолчанию для пакетов по умолчанию.
```
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
```
Откройте файл Styles\Site.css .

Обратите внимание, что исходный CSS-файл содержит код с отступом, пробелы и комментарии, которые увеличивают файл. (Кроме того, файл JavaScript содержит пустые пробелы и комментарии.

Один из исходных CSS-файлов в папке Scripts
Нажмите клавишу F5 , чтобы запустить приложение и перейти на страницу Оптимизация .
Щелкните ссылку Пакет CSS, чтобы скачать и открыть файл.

Извлеките миниифицированный пакетный файл. Вы заметите, что все пробелы, примечания и символы отступов были удалены, что приведет к созданию файла меньшего размера.

Объединенные CSS-файлы
Теперь щелкните ссылку Пакет JS, чтобы открыть пакетный файл JavaScript. Предупреждение обозревателя можно проигнорировать. Обратите внимание, что файлы JavaScript в пользовательской папке также объединяются и миниифицируются.

Пакетные файлы JavaScript

В предыдущей версии ASP.NET включение сжатия для файлов CSS или JS было гораздо сложнее. Теперь, как вы уже видели, нужно просто добавить одну строку в файл Global.asax , чтобы включить объединение, а затем ссылаться на пакетные файлы с сайта.

Задача 3. Статические пакеты

Статический пакетный подход позволяет настроить набор файлов для пакета, ссылку и метод минификации, который будет использоваться.

В этой задаче вы настроите статический пакет, чтобы определить определенный набор файлов для объединения и уменьшения.

Закройте браузер.
Откройте файл Global.asax.cs и найдите метод Application_Start .

Раскомментируйте код статического пакета, как показано в приведенном ниже коде.

Вы определяете статический пакет, на который будет ссылаться виртуальный путь "~/StaticBundle", и использовать JsMinify для минификации всех указанных файлов с помощью метода AddFile . Наконец, вы добавляете статический пакет в BundleTable и включаете его.

Обратите внимание, что файлы находятся не в одном месте; это еще одно преимущество по сравнению с объединением по умолчанию.

void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    Bundle b = new Bundle("~/StaticBundle", typeof(JsMinify));
    b.AddFile("~/scripts/custom/ECMAScript5.js");
    b.AddFile("~/scripts/custom/GoToDefinition.js");
    b.AddFile("~/scripts/bundle/JScript1.js");
    b.AddFile("~/scripts/bundle/JScript2.js");

    BundleTable.Bundles.Add(b);

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it: http://localhost:54716/scripts/coffee
    // DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    // BundleTable.Bundles.Add(fb);
}

Откройте файл Optimization.aspx .

Обратите внимание, что ссылка на статический пакет JS использует путь, объявленный при настройке статического пакета в файле Global.asax.cs: /StaticBundle.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Нажмите клавишу F5 , чтобы запустить приложение, а затем перейдите на страницу Оптимизация .
Щелкните ссылку Статический пакет JS, чтобы открыть файл.

Обратите внимание, что минифицированный пакетный файл JavaScript является выходными данными для всех файлов JavaScript, настроенных в файле статического пакета по пути "/StaticBundle".

Пакет статических файлов JavaScript
Закройте браузер и вернитесь в Visual Studio.

Задача 4. Пакеты динамических папок

В этой задаче вы узнаете, как настроить динамические пакеты папок. Сила динамического объединения заключается в том, что вы можете включить статический JavaScript, а также другие файлы на языках, которые компилируются в JavaScript и, следовательно, требуют некоторой обработки перед выполнением объединения.

В этом примере вы узнаете, как использовать класс DynamicFolderBundle для создания динамического пакета для файлов, написанных на языке CofeeScript. CofeeScript — это язык программирования, который компилируется в JavaScript и предоставляет более простой синтаксис для написания кода JavaScript, повышая краткость и удобочитаемость JavaScript.

Откройте файл Global.asax.cs и найдите метод Application_Start .
Раскомментируйте код динамического пакета, как показано в приведенном ниже коде.

Вы определяете динамический пакет папок, который будет использовать пользовательский обработчик minification CoffeeMinify , который будет применяться только к файлам с расширением .coffee (файлы CoffeeScript). Обратите внимание, что вы можете использовать шаблон поиска, чтобы выбрать файлы для пакета в папке, например "*.coffee".
```
void Application_Start(object sender, EventArgs e)
{
    // Default behavior
    // Bundles all .js files in folders such as "scripts" if URL pointed to it: http://localhost:54716/scripts/custom/js
    BundleTable.Bundles.EnableDefaultBundles();

    // Static bundle.
    // Access on url http://localhosthost:54716/StaticBundle
    ...

    // Dynamic bundle
    // Bundles all .coffee files in folders such as "script" when "coffee" is appended to it:
         // http://localhost:54716/scripts/coffee
    DynamicFolderBundle fb = new DynamicFolderBundle("coffee", typeof(CoffeeMinify), "*.coffee");
    BundleTable.Bundles.Add(fb);
}
```
Откройте консоль диспетчера пакетов NuGet. Для этого используйте меню Просмотреть | другуюконсоль диспетчера пакетов Windows | .
В консоли диспетчера пакетов введите Install-Package CoffeeSharp и нажмите клавишу ВВОД.
Нажмите кнопку Показать все файлы в окне Обозреватель решений.

Отображение всех файлов
Щелкните правой кнопкой мыши файл CoffeeMinify.cs в Обозреватель решений и выберите Включить в проект.

Включение файла CoffeeMinify.cs в проект
Откройте файл CoffeeMinify.cs .

Этот класс наследует от JsMinify для уменьшения выходных данных JavaScript, полученных в результате компиляции кода CoffeeScript. Он вызывает компилятор CoffeeScript для создания кода JavaScript, а затем отправляет его в метод JsMinify.Process для минификации полученного кода.
```
public class CoffeeMinify : JsMinify
{
    public override void Process(BundleResponse bundle)
    {
        var compiler = new CoffeeScriptEngine();
        bundle.Content = compiler.Compile(bundle.Content);

        base.Process(bundle);
    }
}
```
Откройте файлы Script1.coffee и Script2.coffee из папки Scripts/bundle .

Эти файлы будут включать код CoffeScript, который будет скомпилирован при выполнении объединения с классом CoffeeMinify.

Для простоты предоставленные файлы CoffeeScript содержат только пример кода CoffeeScript. Примечания исключаются процессом JsMinify.

Файлы CoffeeScript

Примечание

CofeeScript предоставляет более простой синтаксис для написания кода JavaScript, повышая краткость и удобочитаемость JavaScript, а также добавляя другие функции, такие как понимание массива и сопоставление шаблонов.

Откройте файл Optimization.aspx и найдите ссылки на пакет.

Обратите внимание, что ссылка на Dynamic JS Bundle ссылается на папку Scripts/bundle с помощью суффикса /Coffee , настроенного для динамического пакета папок.

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
  <ul>
    <li>
      <h2><a href="Styles/CSS">CSS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/custom/JS">JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="StaticBundle">Static JS Bundle</a></h2>
    </li>
    <li>
      <h2><a href="Scripts/bundle/Coffee">Dynamic JS Bundle</a></h2>
    </li>
  </ul>
</asp:Content>

Нажмите клавишу F5 , чтобы запустить приложение, а затем перейдите на страницу Оптимизация .
Щелкните ссылку Dynamic JS Bundle (Динамический пакет JS ), чтобы открыть созданный файл.

Обратите внимание, что содержимое, которое было включено в этот пакет, содержит только файлы .coffee . Вы также можете увидеть, что код CoffeeScript был скомпилирован в JavaScript, а строки с закомментированными комментариями удалены.

Пакет динамических JS-файлов

Примечание

Кроме того, это приложение можно развернуть на веб-сайтах Windows Azure в соответствии с приложением Б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания.

Итоги

Это задание поможет вам понять, что такое новые возможности ASP.NET и веб-разработки в Visual Studio 2012 и как воспользоваться различными улучшениями в Visual Studio 2012.

Пройдя этот Hands-On Lab, вы узнали, как использовать новые функции и улучшения в редакторах Visual Studio 2012 для CSS, JavaScript и HTML. Кроме того, вы узнали, как Visual Studio 2012 реализует встроенные функции объединения и минификации.

Приложение А. Установка Visual Studio Express 2012 для Web

Вы можете установить Microsoft Visual Studio Express 2012 для Web или другую версию Express с помощью установщик веб-платформы Майкрософт. Ниже приведены инструкции по установке Visual Studio Express 2012 for Web с помощью установщик веб-платформы Майкрософт.

Перейдите к [https://go.microsoft.com/?linkid=9810169](https://go.microsoft.com/?linkid=9810169). Кроме того, если у вас уже установлен установщик веб-платформы, вы можете открыть его и найти продукт "Visual Studio Express 2012 for Web with Windows Azure SDK".
Щелкните Установить сейчас. Если у вас нет установщика веб-платформы , вы будете перенаправлены на его скачивание и установку.
После открытия установщика веб-платформы нажмите кнопку Установить , чтобы начать установку.

Установка Visual Studio Express
Ознакомьтесь со всеми лицензиями и условиями продуктов и нажмите кнопку Я принимаю , чтобы продолжить.

Принятие условий лицензии
Дождитесь завершения процесса скачивания и установки.

Ход установки
После завершения установки нажмите кнопку Готово.

Установка завершена
Щелкните Выйти , чтобы закрыть установщик веб-платформы.
Чтобы открыть Visual Studio Express для Интернета, перейдите на начальный экран и начните писать "VS Express", а затем щелкните плитку VS Express для Web.

Плитка VS Express для Web

Приложение Б. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

В этом приложении показано, как создать новый веб-сайт на портале управления Windows Azure и опубликовать приложение, полученное в ходе выполнения задания, используя функцию публикации веб-развертывания, предоставляемую Windows Azure.

Задача 1. Создание веб-сайта на портале Windows Azure

Перейдите на портал управления Windows Azure и выполните вход, используя учетные данные Майкрософт, связанные с вашей подпиской.

Примечание

С помощью Windows Azure вы можете разместить 10 ASP.NET веб-сайтов бесплатно, а затем масштабироваться по мере роста трафика. Вы можете зарегистрироваться здесь.

Войдите на портал управления Windows Azure.
Нажмите кнопку Создать на панели команд.

Создание нового веб-сайта
Щелкните Вычислительный | веб-сайт. Затем выберите параметр Быстрое создание . Укажите доступный URL-адрес для нового веб-сайта и нажмите кнопку Создать веб-сайт.

Примечание

Веб-сайт Windows Azure — это узел веб-приложения, работающего в облаке, которым можно управлять и управлять. Параметр Быстрое создание позволяет развернуть готовое веб-приложение на веб-сайте Windows Azure за пределами портала. Он не включает шаги по настройке базы данных.

Создание веб-сайта с помощью быстрого создания
Дождитесь создания нового веб-сайта .
После создания веб-сайта щелкните ссылку в столбце URL-адрес . Убедитесь, что новый веб-сайт работает.

Переход на новый веб-сайт

Запущенный веб-сайт
Назад на портал и щелкните имя веб-сайта в столбце Имя, чтобы отобразить страницы управления.

Открытие страниц управления веб-сайтом
На странице Панель мониторинга в разделе краткий обзор щелкните ссылку Скачать профиль публикации .

Примечание

Профиль публикации содержит все сведения, необходимые для публикации веб-приложения на веб-сайте Windows Azure для каждого включенного метода публикации. Профиль публикации содержит URL-адреса, учетные данные пользователей и строки для открытия базы данных, которые необходимы для проверки подлинности и подключения к каждой из конечных точек, соответствующей разрешенному методу публикации. Microsoft WebMatrix 2, Microsoft Visual Studio Express для Web и Microsoft Visual Studio 2012 поддерживают чтение профилей публикации для автоматизации настройки этих программ для публикации веб-приложений на веб-сайтах Windows Azure.

Скачивание профиля публикации веб-сайта
Скачайте файл профиля публикации в известное расположение. Далее в этом упражнении вы узнаете, как использовать этот файл для публикации веб-приложения на веб-сайтах Windows Azure из Visual Studio.

Сохранение файла профиля публикации

Задача 2. Настройка сервера базы данных

Если приложение использует SQL Server базы данных, необходимо создать сервер База данных SQL. Если вы хотите развернуть простое приложение, которое не использует SQL Server можно пропустить эту задачу.

Вам потребуется сервер База данных SQL для хранения базы данных приложения. Вы можете просмотреть серверы База данных SQL из своей подписки на портале управления Windows Azure напанели мониторингаСервера | баз данных | SQL. Если сервер не создан, его можно создать с помощью кнопки Добавить на панели команд. Запишите имя сервера и URL-адрес, имя входа администратора и пароль, так как они будут использоваться в следующих задачах. Пока не создавайте базу данных, так как она будет создана на более позднем этапе.

Панель мониторинга сервера База данных SQL
В следующей задаче вы протестируете подключение к базе данных из Visual Studio, поэтому необходимо включить локальный IP-адрес в список разрешенных IP-адресов сервера. Для этого нажмите кнопку Настроить, выберите IP-адрес в поле Текущий IP-адрес клиента и вставьте его в текстовые поля Начальный IP-адрес и Конечный IP-адрес . Введите имя правила и нажмите кнопку .

Добавление IP-адреса клиента
После добавления IP-адреса клиента в список разрешенных IP-адресов нажмите кнопку Сохранить , чтобы подтвердить изменения.

Подтверждение изменений

Задача 3. Публикация приложения ASP.NET MVC 4 с помощью веб-развертывания

Назад к решению ASP.NET MVC 4. В Обозреватель решений щелкните правой кнопкой мыши проект веб-сайта и выберите Опубликовать.

Публикация веб-сайта
Импортируйте профиль публикации, сохраненный в первой задаче.

Импорт профиля публикации
Щелкните Проверить подключение. После завершения проверки нажмите кнопку Далее.

Примечание

Проверка завершается, когда рядом с кнопкой Проверить подключение появится зеленая галочка.

Проверка подключения
На странице Параметры в разделе Базы данных нажмите кнопку рядом с текстовым полем подключения к базе данных (т. е. DefaultConnection).

Конфигурация веб-развертывания
Настройте подключение к базе данных следующим образом:
- В поле Имя сервера введите URL-адрес сервера База данных SQL, используя префикс tcp: .
- В поле Имя пользователя введите имя входа администратора сервера.
- В поле Пароль введите пароль для входа администратора сервера.
- Введите новое имя базы данных, например MVC4SampleDB.
  
  Настройка строки подключения назначения
Затем нажмите кнопку ОК. При появлении запроса на создание базы данных нажмите кнопку Да.

Создание базы данных
Строка подключения, используемая для подключения к База данных SQL в Windows Azure, отображается в текстовом поле Подключение по умолчанию. Нажмите кнопку Далее.

Строка подключения, указывающая на База данных SQL
На странице Предварительный просмотр нажмите кнопку Опубликовать.

Публикация веб-приложения
После завершения процесса публикации браузер по умолчанию откроет опубликованный веб-сайт.

Приложение, опубликованное в Windows Azure