Новые возможности 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 для Интернета или более поздней версии (см . приложение A для инструкций по его установке).
Windows PowerShell (для сценариев установки — уже установлен в Windows 8 и Windows Server 2008 R2)
Internet Explorer 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) и добавьте стиль к элементам div. Вы заметите, что код выравнивается автоматически, помогая пользователям находить родительские классы на первый взгляд.

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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

В файле Site.css найдите определение класса CSS заголовка (.header) и поместите курсор под заполнителем /*border radius*/, чтобы добавить новый фрагмент кода. Нажмите клавишу ВВОД, чтобы отобразить список IntelliSense и радиус типа, чтобы отфильтровать список. Выберите параметр 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, введите поле тени и дважды нажмите клавишу 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
{

}
```
Введите преобразование и дважды нажмите клавишу TAB , чтобы вставить фрагмент преобразования. Затем введите поворот (-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. Обратите внимание, что изображения имеют закругленными углами и тенями полей. Наведите указатель мыши на изображения и посмотрите, как они поворачиваются.

Преобразование фрагмента кода поворота изображения

Примечание.

Если вы используете Internet Explorer 10 и не видите тени, убедитесь, что режим документа установлен в соответствии со стандартами IE10. Нажмите клавишу F12 , чтобы открыть средства разработчика Internet Explorer и нажмите кнопку "Режим документа", чтобы изменить стандарты IE10.

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

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

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

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

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

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

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

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

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

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

Сброс doctype на панели инструментов редактирования источника 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.

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

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

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

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

Добавьте новую папку с именем audio в корне папки веб-сайта. Откройте проводник Windows и скопируйте любой звуковой файл в папку звука решения 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

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

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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

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

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

Пункт меню "Извлечение в элемент управления пользователем"
Введите имя нового пользовательского элемента управления. Например, 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 , в которой хранится количество посещений страницы текущим пользователем. Локальное хранилище — это клиентская база данных key-value, представленная стандартом 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, такие как локальное хранилище и их внутренние методы.

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

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

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

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

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

Примечание.

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

Откройте ECMA5script5.js , расположенную в папке scripts\custom project. Теперь вы протестируете проверку для стандарта ECMAScript5.
```
"use strict";

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

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

В стандарте ECMAScript5 строковые значения и переменные также определяют строковые методы, такие как обрезка, верхний регистр, поиск и замена.

Список IntelliSense в JavaScript

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

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

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

Документация по XML JavaScript, интегрированная с IntelliSense
Ниже добавьте функцию в файл XMLDoc.js , создайте новую функцию с именем 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. Установка пакета Bundling и Minification из NuGet

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

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

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

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

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

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

Обратите внимание, что приложение использует несколько 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 из папки "Стили и скрипты", соответственно.

Вы можете использовать путь Scripts/custom/JS, как показано ниже, чтобы упаковать и миниифицировать все файлы JS внутри скриптов или настраиваемой папки. Это поведение по умолчанию с пакетами по умолчанию.
```
<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>
```
Откройте файл "Стили\Site.css".

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

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

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

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

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

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

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

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

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

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

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

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

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

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.
Раскомментируйте код динамического пакета, как показано в приведенном ниже коде.

Вы определяете динамический пакет папок, который будет использовать пользовательский обработчик минификации CoffeeMinify, который будет применяться только к файлам с расширением CoffeeScript (файлы 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 диспетчер пакетов. Для этого используйте меню "Вид | других окон | диспетчер пакетов консоли".
В консоли диспетчер пакетов введите 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 и найдите ссылки пакета.

Обратите внимание, что ссылка на динамический пакет JS ссылается на папку 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 , чтобы запустить приложение, а затем перейдите на страницу оптимизации .
Щелкните ссылку "Динамический пакет JS", чтобы открыть созданный файл.

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

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

Примечание.

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

Итоги

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

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

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

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

Перейдите в раздел [/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169](/iis/extensions/introduction-to-iis-express/iis-express-overview?linkid=9810169). Кроме того, если вы уже установили установщик веб-платформы, его можно открыть и найти в продукте Visual Studio Express 2012 для Интернета с помощью пакета SDK для Windows Azure.
Нажмите кнопку "Установить сейчас". Если у вас нет установщика веб-платформы, вы будете перенаправлены, чтобы скачать и установить его сначала.
После открытия установщика веб-платформы нажмите кнопку "Установить ", чтобы запустить настройку.

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

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

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

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

Плитка VS Express для веб-сайта

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

В этом приложении показано, как создать веб-сайт на портале управления 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 Server. Если у вас нет сервера, его можно создать с помощью кнопки "Добавить " на панели команд. Запишите имя сервера и URL-адрес, имя входа администратора и пароль, так как они будут использоваться в следующих задачах. Пока не создайте базу данных, так как она будет создана на более позднем этапе.

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

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

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

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

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

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

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

Примечание.

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

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

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

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

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

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

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