Учебный курс по WebMatrix, глава 1. Начало работы с WebMatrix и веб-страницами ASP.NET

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

Основные сведения о WebMatrix

WebMatrix – это свободно распространяемый и простой в использовании комплект средств веб-разработки, предоставляющий самый простой путь построения веб-сайтов. В этот комплект входит IIS Developer Express (веб-сервер разработки, запускаемый системой по необходимости), ASP.NET (веб-инфраструктура) и SQL Server Compact (встроенная база данных). В комплект также входит простой редактор с подсветкой синтаксиса поддерживаемых языков программирования и средств разметки, ускоряющий разработку веб-сайтов и упрощающий запуск веб-сайтов из популярных приложений с открытым кодом. Навыки и разрабатываемый с помощью WebMatrix код можно применять и в Visual Studio, и в SQL Server.

Создаваемые с помощью WebMatrix веб-страницы могут быть динамическими, т.е. они могут изменять свое содержимое и стиль в зависимости от введенных пользователем данных или от других сведений, например содержащихся в базе данных. Для программирования динамических веб-страниц используется ASP.NET с синтаксисом Razor и языки программирования C# или Visual Basic.

Если у разработчика уже имеются подходящие средства разработки, он может создавать веб-сайты, использующие ASP.NET, с их помощью или попробовать применить средства WebMatrix.

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

Установка WebMatrix

Для установки WebMatrix можно воспользоваться установщиком веб-платформы Майкрософт (текущая версия 3.0) — свободно распространяемым приложением, облегчающим установку и настройку веб-технологий.

1. При отсутствии установщика веб-платформы загрузите его со следующего URL-адреса: https://www.microsoft.com/web/gallery/install.aspx?appid=webmatrix

2. Запустите установщик веб-платформы, дождитесь загрузки последних продуктов веб-платформы,

после чего Вы увидите окно с кратким описанием WebMatrix.

3. Вы можете просмотреть список устанавливаемых элементов, ознакомиться с лицензионными соглашениями и общим размером загружаемых файлов, кликнув на ссылку «Устанавливаемые элементы». Пройдя по ссылке «Настройки», Вы можете выбрать дополнительный Web-канал, настроить язык и выбрать тип используемого веб-сервера. Там же Вы можете очистить папку кэша установщика веб-платформы. В большинстве случаев изменять настройки не требуется, и Вы можете смело нажать кнопку «Установить».

4. После нажатия кнопки «Установить», Вы должны принять лицензионное соглашение и, по желанию, отправить данные о настройке и использовании приложения. Дождитесь загрузки и установки компонентов и нажмите копку «Готово». Теперь у Вас есть установленный WebMatrix.

Начало работы с WebMatrix

Для начала создадим новый веб-сайт и простую веб-страницу.

1. Запустите WebMatrix.

2. Выберите пункт «Сайт на основе шаблона». Шаблоны включают предварительно построенные файлы и страницы для разных типов веб-сайтов, как на Русском, так и на Английском, языках.

3. Выберите «Пустой сайт» и дайте новому сайту имя «Привет мир», затем нажмите кнопку ОК. WebMatrix создаст и откроет новый сайт.

Вверху находится панель быстрого доступа и лента, как в Microsoft Office 2010. В левом нижнем углу находится селектор рабочего пространства, содержащий кнопки, которые определяют, что появляется над ними в левой области. Справа находится область контента, в которой можно просматривать отчеты, редактировать файлы и т.п. Наконец, внизу расположена панель уведомлений, по мере необходимости показывающая сообщения.

По умолчанию, после открытия, Вы находитесь в рабочем пространстве «Сайт». Выберите рабочее пространство «Файлы». В этом рабочем пространстве можно работать с файлами и папками. В левой области отображается файловая структура сайта. На примере ниже видно, что в только что созданной папке нашего сайта, присутствует автоматически созданный WebMatrix файл robots.txt

4. В ленте нажмите кнопку «Новый» и выберите пункт «Новый файл…» в выпадающем меню, после чего WebMatrix отобразит список типов файлов. Большая часть из них, скорее всего, хорошо знакома, например HTML, CSS и TXT.

5. Выберите CSHTML, затем в поле «Имя» введите HelloWorld.cshtml. Мы настоятельно рекомендуем использовать в названиях файлов латиницу, хотя WebMatrix корректно обрабатывает и русскоязычные наименования страниц и папок. CSHTML-страница — это особый тип страницы в WebMatrix, которая может содержать как обычный контент веб-страницы, например код HTML и JavaScript, так и код для программирования веб-страниц. (Более подробно CSHTML-файлы будут рассматриваться далее.)

Нажмите кнопку ОК. WebMatrix создает страницу и открывает ее в редакторе. Как можно видеть, это обычная разметка HTML, причем, сокращенное написание тега <!DOCTYPE html>, ненавязчиво намекнет Вам на то, что WebMatrix корректно распознает и синтаксис последней версии языка разметки - HTML 5

6. Добавьте в страницу следующий выделенный код HTML.

<!DOCTYPE html>

<html>

<head>

<title>Страница "Привет мир!"</title>

</head>

<body>

<h1>Страница "Привет мир!"</h1>

<p>Привет мир!</p>

</body>

</html>

7. В панели быстрого доступа нажмите кнопку «Сохранить» с изображением дискеты, либо комбинацию клавиш (Ctrl+S).

8. В ленте нажмите кнопку «Запуск», после чего WebMatrix запустит веб-сервер (IIS Developer Express), который можно использовать для тестирования страниц на компьютере разработчика и откроет страницу в браузере по умолчанию. Если Вы хотите изменить браузер на другой, установленный в системе, Вы можете нажать на стрелку под кнопкой «Запуск» и в выпадающем меню выбрать любой из браузеров, либо открыть во всех одновременно.

Результат нашего кода в браузере Internet Explorer 9

9. В следующем разделе будет показано, насколько просто добавить код на страницу HelloWorld.cshtml, чтобы создать динамическую страницу.

Благодарности

Благодарим Виталия Коробцева, руководителя инновационных проектов “ООО Валькирия”, за неоценимую помощь в подготовке этого руководства.