Поделиться через


Программирование веб-страницы ASP.NET (Razor) с помощью Visual Studio

; автор — Том ФитцМакен (Tom FitzMacken)

В этой статье объясняется, как использовать Visual Studio или Visual Web Developer Express для программирования веб-сайтов веб-страницы ASP.NET (Razor).

Что вы узнаете

  • Что необходимо установить (если что-либо) для работы с веб-страницы ASP.NET в вашей версии Visual Studio.
  • Как добавить поддержку веб-страницы ASP.NET в Visual Web Developer 2010 Express.
  • Использование функций Visual Studio для работы с ASP.NET страницАми Razor, включая IntelliSense и отладчик.

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

  • веб-страницы ASP.NET (Razor) 3
  • Visual Studio 2013
  • WebMatrix 3

Это руководство также работает с веб-страницы ASP.NET 2, Visual Studio 2012, Visual Studio 2010 и WebMatrix 2.

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

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

  • IntelliSense. Функция IntelliSense, встроенная в Visual Studio, является более комплексной, чем IntelliSense в WebMatrix.
  • Отладчик. Отладчик позволяет устранять неполадки кода, останавливая программу во время ее выполнения, проверяя переменные и выполняя построчное выполнение кода.

Использование Visual Studio с разными версиями веб-страницы ASP.NET

Для разработки ASP.NET веб-приложений в Visual Studio 2017 установите рабочую нагрузку ASP.NET и веб-разработка .

Visual Studio 2012 и Visual Studio 2013 включают поддержку веб-страницы ASP.NET. (Пакеты, необходимые для поддержки веб-страницы ASP.NET устанавливаются при установке Visual Studio.)

Visual Studio 2010 не включает поддержку по умолчанию для веб-страницы ASP.NET. Чтобы использовать веб-страницы ASP.NET с Visual Studio 2010, необходимо установить пакет MVC ASP.NET. Чтобы получить веб-страницы ASP.NET 2, установите ASP.NET MVC 4.

В следующей таблице приведены сведения о поддержке веб-страницы ASP.NET в разных версиях Visual Studio.

Visual Studio 2010 Visual Studio 2012 Visual Studio 2013
Веб-страницы ASP.NET 2 Установка ASP.NET MVC 4 (Включено) (Включено)
Веб-страницы ASP.NET 3 Обновление до веб-страницы ASP.NET 3 по NuGet (Включено)

Сведения о работе с Visual Studio 2010 см. в статье Установка поддержки веб-страницы ASP.NET в Visual Studio 2010.

Запуск Visual Studio из WebMatrix

Если вы запустили проект в WebMatrix и хотите переключиться на Visual Studio, WebMatrix предоставляет кнопку, чтобы легко открыть проект в Visual Studio. Чтобы эта кнопка была включена, на компьютере должна быть установлена среда Visual Studio. На следующем рисунке показана кнопка в WebMatrix.

запуск Visual Studio

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

Создание ASP.NET сайта Razor в Visual Studio

Чтобы создать веб-сайт ASP.NET Razor в Visual Studio, выполните следующие действия.

  1. Запустите Visual Studio.

  2. В меню Файл выберите пункт Создать веб-сайт.

    Создание веб-сайта

  3. В диалоговом окне Новый веб-сайт выберите язык для использования (Visual C# или Visual Basic).

  4. Выберите шаблон веб-сайт ASP.NET (Razor).

    сайт razor

  5. Нажмите кнопку ОК.

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

Using IntelliSense

Теперь, когда вы создали сайт, вы можете увидеть, как работает IntelliSense в Visual Studio.

  1. На только что созданном веб-сайте откройте страницу Default.cshtml .

  2. После тегов <h3> на странице введите @ServerInfo. (включая точку). Обратите внимание, что IntelliSense отображает доступные методы для вспомогательного ServerInfo средства в раскрывающемся списке.

    Intellisense

  3. Выберите метод из GetHtml списка и нажмите клавишу ВВОД. IntelliSense автоматически заполняет метод . (Как и в случае с любым методом в C#, после метода необходимо добавить () символы.) Готовый код для GetHtml метода выглядит следующим образом:

    @ServerInfo.GetHtml()
    
  4. Нажмите клавиши CTRL+F5, чтобы запустить страницу. Вот как выглядит страница при отображении в браузере:

    страница по умолчанию в браузере

  5. Закройте браузер.

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

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

    var myTime = DateTime.Now.TimeOfDay;
    
  2. В сером поле редактора слева от кода щелкните рядом с этой новой строкой, чтобы добавить точку останова. Точка останова — это маркер, который сообщает отладчику прекратить выполнение программы в этот момент, чтобы вы могли видеть, что происходит.

    Установка точки останова

  3. Удалите вызов ServerInfo.GetHtml метода и добавьте вызов переменной вместо нее @myTime . Этот вызов отображает текущее значение времени, возвращаемое новой строкой кода.

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

    точка останова отладки

  5. На панели инструментов Отладка нажмите кнопку Шаг с вводом (или нажмите клавишу F11), чтобы выполнить следующую строку кода. При каждом нажатии этой кнопки выполняется переход к следующей строке кода.

    Кнопка

  6. Проверьте значение переменной myTime , удерживая указатель мыши на нее или проверив значения, отображаемые в окнах Локальные и Стек вызовов . Visual Studio отображает значение переменной.

    показать значение времени

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

Дополнительные сведения об отладчике и отладке кода в Visual Studio см. в статье Пошаговое руководство. Отладка веб-страниц в Visual Web Developer.

Использование Razor в ASP.NET проектов MVC с Visual Studio

Синтаксис Razor также широко используется в ASP.NET проектах MVC. MVC — это мощный способ создания динамических веб-сайтов на основе шаблонов. Если ваш веб-страницы ASP.NET сайт становится трудно обслуживать, вы можете рассмотреть возможность преобразования его в приложение ASP.NET MVC. Пример создания приложения MVC см. в разделе начало работы с ASP.NET MVC 5.

Установка поддержки веб-страницы ASP.NET в Visual Studio 2010

В этом разделе показано, как установить Visual Web Developer Express 2010 и средства веб-страницы ASP.NET для Visual Studio.

  1. Если у вас еще нет установщика веб-платформы, скачайте его по следующему URL-адресу:

    https://www.microsoft.com/web/downloads/platform.aspx

  2. Запустите установщик веб-платформы.

  3. Перейдите на вкладку Продукты .

    Вкладка

  4. Найдите ASP.NET MVC 4 (для веб-страницы ASP.NET 2) и нажмите кнопку Добавить. К этим продуктам относятся средства Visual Studio для создания ASP.NET веб-сайтов Razor.

    Параметры установки WebPi

  5. Нажмите кнопку Установить, чтобы завершить установку.