Учебный курс по WebMatrix, часть 16. Разработка ASP.NET WebPages и Razor в Visual Studio

  • Article

Это завершающая глава учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:

В этой главе будет рассказано, как использовать Visual Studio 2010 или Visual Web Developer 2010 Express для разработки сайтов на базе ASP.NET Web Pages и синтаксиса Razor.

Вы научитесь тому, как установить бесплатную среду Visual Web Developer 2010 Express и инструменты ASP.NET Razor Tools, а так же как использовать функции Visual Studio, такие как IntelliSense и отладку.

Зачем использовать Visual Studio?

Вы можете разрабатывать веб-сайты на базе ASP.NET Web pages и синтаксиса Razor с помощью WebMatrix или многих других редакторов кода. Например, вы можете использовать Microsoft Visual Studio 2010, которая является полнофункциональной интегрированной средой разработки (IDE) предлагающей мощный набор инструментов для создания приложений разных типов (не только веб-сайтов). Для того чтобы работать со страницами ASP.NET Razor, вы можете использовать как полную редакцию Visual Studio, так и ее бесплатную редакцию Visual Web Developer Express.

Есть две полезные функции Visual Studio, которыми располагает Visual Studio для программирования веб-страниц на ASP.NET Razor:

  • IntelliSense – увеличивает вашу продуктивность с помощью автозавершения кода и вывода информации о класса и методах, с которыми вы работаете в редакторе (WebMatrix включает в себя IntelliSense для некоторых языков, например HTML и CSS, но не для C#. В будущем, с выходом второй версии, WebMatrix получит улучшения, сравнимые по функционалу с Visual Studio);
  • Отладчик – позволяет вам исследовать причины неправильной работы кода, останавливая программу во время ее работы и исследуя состояние программы в данный момент, перемещаясь по коду от строки к строке.

Эти функции пока доступны только в Visual Studio.

Установка ASP.NET Razor Tools

В этой части руководства будет показано, как установить бесплатную редакцию Visual Web Developer Express 2010 и пакет инструментов ASP.NET Web Pages Tools for Visual Studio.

Установите Web Platform Installer, загрузив его по адресу:
https://www.microsoft.com/web/downloads/platform.aspx.

Запустите Web Platform Installer. Если вы еще не установили Visual Studio или Visual Web Developer Express, то найдите в списке Visual Web Developer Express и нажмите «добавить» (Add). Найдите в списке ASP.NET MVC 3 и нажмите «добавить». Этот пакет содержит инструменты для Visual Studio, которые позволяют строить сайты на базе ASP.NET Razor.

image

Нажмите «Установить» (Install) для завершения установки.

Использование ASP.NET Razor Tools for Visual Studio

Для того чтобы использовать IntelliSense или отладчик, вам необходимо создать в Visual Studio веб-сайт на базе ASP.NET Razor.

Запустите Visual Studio или Visual Web Developer. В меню File нажмите New Web Site. В диалоговом окне выберите язык программирования, который вы будете использовать для сайта (C# или Visual Basic). Выберите шаблон проекта ASP.NET Web Site (Razor). В ниспадающем меню выберите «File System» укажите путь для создания сайта.

image

Нажмите OK.

Использование IntelliSense

После того как вы создали сайт, вы можете увидеть как IntelliSense работает в Visual Studio. Откройте страницу Default.cshtml вашего сайта. После закрывающего тега </p> наберите @ServerInfo. (включая точку). Обратите внимание, как IntelliSense отображает доступные методы для хелпера ServerInfo в ниспадающем списке.

image

Выберите метод GetHtml из списка и нажмите Enter. IntelliSense автоматически добавит метод (как и для любого метода в C#, вы должны добавить скобки в конце). Финальный код будет выглядеть так:

@Server.GetHtml()

Нажмите Ctrl+F5 для запуска страницы. В своем браузере вы увидите следующее:

image

Закройте браузер и сохраните обновленную страницу Default.cshtml.

Использование отладчика

Вверху страницы Default.cshtml, после линии, которая начинается с Page.Title добавьте следующую линию кода:

var myTime = DateTime.Now.TimeOfDay;

Щелкните слева от кода в сером поле для того, чтобы добавить точку остановки (breakpoint) при отладке. Точка остановки (останова) – это метка, которая говорит отладчику, где нужно остановить выполнение программы для того, чтобы вы могли оценить состояние программы в нужный вам момент.

Удалите вызов метода ServerInfo.GetHtml и добавьте вызов переменной @myTime в этом месте. Этот вызов показывает текущее время. Обновленная страница будет выглядеть следующим образом:

image

Нажмите F5 для того, чтобы запустить страницу в режиме отладки. Выполнение страницы остановится в том месте где была установлена точка остановки. На картинке показано как будет выглядеть страница в редакторе вместе с точкой остановки (желтым), панелью отладки и кнопкой Step Into.

image

Нажмите Step Into (или кнопку F11). Это позволит перейти к следующей линии кода, нажатие F11 будет переводить вас дальше и дальше. Обратите внимание на значение переменной myTime, которое вы можете узнать наведя на нее мышью или же воспользовавшись панелями Locals и Call Stack.

Когда вы завершите изучение переменных нажмите F5 для продолжения работы вашей страницы уже без остановки на каждой линии кода. Так ваша страница будет выглядеть в браузере:

image

Для того чтобы узнать больше об отладчике и том, как отлаживать код в Visual Studio обратитесь к руководству Walkthrough: Debugging Web Pages in Visual Web Developer.