Введение в WebMatrix

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

В этой статье я отвечу на эти и другие вопросы. Я начну с описания нескольких недавних изменений, внесенных в стек ASP.NET. Потом объясню, как установить WebMatrix и создать приложение «Hello Web». Затем мы поговорим о таких вещах, как разметка, вспомогательные пакеты, доступ к данным, отчеты и, конечно, развертывании. Но сначала я дам определение WebMatrix.

WebMatrix — это новый редактор веб-сайтов «все в одном» для создания и изменения веб-страниц ASP.NET. В отличие от остальных продуктов Microsoft он нацелен на другую группу веб-разработчиков и другую часть ASP.NET. WebMatrix не является конкурентом Visual Studio; это в большей мере дополняющий продукт, хотя некоторые его функции пересекаются с возможностями Visual Studio.

Установка WebMatrix проходит очень быстро и безо всяких проблем. Это объясняется тем, что весь пакет и его зависимости имеют объем менее 50 Мб. Пакет включает текстовый редактор, веб-сервер, механизм работы с базами данных и нижележащую инфраструктуру — по сути, практически все, что нужно для создания веб-сайта и его развертывания. Возможно, вас удивит то, что он не ограничен только ASP.NET. WebMatrix также поддерживает PHP и MySQL. В этой статье основное внимание будет уделено .NET-средствам WebMatrix.

Новый стек ASP.NET

За последние несколько лет стек ASP.NET подвергся заметной трансформации. В апреле 2009 года была выпущена ASP.NET MVC — новый вариант веб-разработки в ASP.NET. Новым был не сам шаблон MVC (Model-View-Controller), а его реализация поверх ASP.NET. Более того, Web Forms и MVC могут великолепно сосуществовать в пределах одного и того же сайта.

Чтобы обеспечить должную поддержку MVC в ASP.NET, эта инфраструктура была немного переработана так, чтобы эти детали LEGO можно было легко соединять друг с другом по выбору разработчика. Теперь быстро прокрутим время вперед, и вот Microsoft уже выпускает ASP.NET MVC 3 и WebMatrix. Это стало заметной вехой в развитии ASP.NET, так как в нее был введен ряд добавлений и усовершенствований. Я отметил бы три новых дополнения инфраструктуры: Razor Parser и View Engine (или просто Razor для краткости), ASP.NET Web Pages и IIS Express. Связи между всеми этими частями инфраструктуры ASP.NET показаны на рис. 1.

Рис. 1. Веб-стек

Изучая рис. 1, вы, возможно, заметили, что Razor, IIS Express, SQL Compact и Web Deploy являются допустимыми вариантами для других областей веб-разработки с использованием ASP.NET. Более того, Razor с появлением ASP.NET MVC 3 становится механизмом представлений по умолчанию. Подробнее о Razor я расскажу немного позже.

Напротив, ASP.NET Web Pages вводятся как равноценная замена Web Forms и MVC. Модель Web Pages — это модель выполнения, ориентированная на страницу, по аналогии с PHP. Разметка и код содержатся в самой странице, при этом для большей четкости кода используются вспомогательные пакеты (helpers). Эти страницы пишутся в Razor либо на Visual Basic, либо на C#.

Приступаем к работе с WebMatrix

Начать работу с WebMatrix весьма легко. Установка осуществляется с помощью Microsoft Web Platform Installer версии 3.0 (WebPI). Это клиентская программа, которая резко упрощает установку SQL Express, ASP.NET MVC и других продуктов. Подробнее о WebPI см. по ссылке microsoft.com/web/downloads/platform.aspx. Чтобы установить эту программу, зайдите на web.ms/webmatrix и щелкните кнопку Download Now. Это приведет к установке не только WebPI, но и WebMatrix. По окончании этого процесса в вашей системе будут установлены:

• Microsoft WebMatrix (редактор);
• ASP.NET Web Pages с Razor Syntax (ядро и инфраструктура);
• SQL Compact (СУБД);
• IIS Express (веб-сервер для разработок).

Ранее я упомянул, что WebMatrix также поддерживает разработку на PHP. Однако, если вы решите создать сайт на PHP с нуля, вам понадобится дополнительно установить исполняющую среду PHP.

Hello World Web

Почти в каждой книге по программированию есть классический пример «Hello World», поэтому давайте создадим с помощью WebMatrix сайт «Hello Web». При открытии WebMatrix появится диалог с четырьмя вариантами. В каждом варианте своя отправная точка:

• My Sites;
• Site From Folder;
• Site From Template;
• Site From Web Gallery.

My Sites просто включает сайты, над которыми вы работали в прошлом. Site From Folder будет открывать любую папку как корень сайта. Все, что находится в этой папке, будет показываться как часть активов сайта. Кроме того, вы можете щелкнуть правой кнопкой мыши какую-нибудь папку и выбрать Open as a Web Site with Microsoft WebMatrix, что даст тот же эффект, что и Site From Folder.

WebMatrix поставляется с набором веб-шаблонов для быстрого создания сайтов. При выборе Site From Template будет создана структура папок со всем исходным кодом, необходимым для разработки сайта на основе указанного шаблона. На момент написания этой статьи было пять шаблонов: Empty Site, Starter Site, Bakery, Photo Gallery и Calendar. В будущем станут доступными дополнительные шаблоны.

Вариант Site From Gallery может оказаться самым интересным. Вот уже несколько лет вы могли бы использовать WebPI, скачивать такие приложения, как Umbraco или WordPress, настраивать их как угодно и развертывать у вашего провайдера хостинга. Увы, комплексной, интегрированной инфраструктуры для этого не было. Теперь с помощью WebMatrix вы можете начать разработку с существующего приложения вроде Umbraco. WebMatrix и WebPI подготовят все, что требуется для создания вашего сайта из одного из приложений, присутствующих в галерее. После этого вы можете внести любые необходимые изменения и средствами WebMatrix развернуть этот сайт у провайдера хостинга.

Чтобы создать наш сайт «Hello Web», откроем WebMatrix и выберем Start from Template. Укажем шаблон Empty Site и присвоим сайту какое-либо имя — в нашем случае HelloWeb. WebMatrix создаст пустую папку с выбранным именем. Теперь откроем вкладку Files, а затем выберем Add a file to your site из основного окна. Первое, что вы должны заметить, — новое расширение файлов. В ASP.NET WebPages два новых формата файлов: CSHTML и VBHTML. Первые две буквы расширения указывают язык, который должен использовать анализатор Razor при разборе кода: C# и Visual Basic соответственно. Я выберу формат CSHTML и присвою файлу имя HelloWeb.cshtml. Это приведет к автоматическому открытию этого файла с предварительным его заполнением HTML по умолчанию.

Добавив текст Hello Web к существующему элементу body, вы закончите Hello Web. WebMatrix автоматически распознает все установленные у вас веб-браузеры. Вы можете запустить свой сайт в любом из них (или во всех) простым щелчком кнопки. Щелкнув Run на ленте, вы запустите браузер по умолчанию, в котором будет открыта и визуализирована страница, где находился фокус ввода. Конечно, в случае Hello Web вы увидите слова «Hello Web».

Кодирование в Razor

Как я уже говорил, Razor — это механизм создания шаблонов кода и разметки. На деле это означает, что вы пишете некий синтаксис, который позднее интерпретируется и посылается инициатору запроса (requestor). Вот HTML для нашей простой веб-страницы со строкой кода, из которой вызывается @DateTime.Now:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
     <title>Hello World</title>
  </head>
  <body>
    Hello Web it's @DateTime.Now
  </body>
</html>

Этот код вызывает метод Now из .NET-класса System.DateTime. В результате вы получаете страницу, показанную на рис. 2.

Рис. 2. Hello Web в браузере

Можно пойти немного дальше: давайте создадим некоторые свойства, введем цикл, добавим немного HTML и тщательно это размешаем забавы ради. Листинг на рис. 3 как раз таковым и является, причем часть HTML опущена для краткости. А на рис. 4 показаны результаты визуализации.

Рис. 3. CodingRazor.cshtml

@{
  var cars = new string [] { "Camaro", "Avalanche", "Honda"};
  var emailAddress = "cars@something.com";
}

<ul>
  @foreach ( var car in cars ) {
    <li>
      <a href="http://@(@car).something.com">@car</a>

      @if ( car == "Camaro" ) {
        @: Is my favorite!
        }
    </li>
  }
</ul>

To comment on this list of cars e-mail us at @emailAddress.

Рис. 4. Код страницы, визуализированный в браузере

Посмотрим повнимательнее на некоторый код, приведенный на рис. 3. Начнем с гиперссылки http://@(@car).something.com. Вы видите @(@car)». Здесь я должен явно указать Razor, что @car — это переменная, так как она встроена в URL. Далее идет блок контента, определенный «@:». Внутри цикла есть выражение If, содержащее текстовый контент «Is my favorite!». Если вы уберете «@:», Razor не сможет выполнить компиляцию, поскольку текстовый контент не обернут в HTML. В самом конце мы вызываем @emailAddress, но заканчиваем фразу точкой. Razor достаточно «сообразителен», чтобы понять: @emailAddress — переменная, а не класс. И это еще далеко не все. Просматривая разметку страницы в браузере, вы увидите, что чистый HTML был передан в браузер в следующем виде:

<ul>
  <li><a href="http://Camaro.something.com">Camaro</a> Is my favorite! </li>
  <li><a href="http://Avalanche.something.com">Avalanche</a> </li>
  <li><a href="http://Honda.something.com">Honda</a> </li>
</ul>

To comment on this list of cars e-mail us at cars@something.com

Разметка

Razor вводит новый способ структуризации контента сайта с возможностью повторного использования. Если вы знакомы с идиомой эталонных страниц (Master Pages) в ASP.NET Web Forms, то увидите, что в Razor принят для тех же целей другой подход. Важно понимать, что эти два подхода к разметке не работают совместно, т. е. Master Pages не применимы в качестве механизма разметка для Razor и наоборот.

Чтобы разметить структуру, я создам страницу, которая начинается со знака подчеркивания, например _MasterLayout.cshtml. Страницы со знаком подчеркивания нельзя визуализировать напрямую в браузере — на них должны ссылаться другие, общедоступные страницы. В каком-то смысле, страница со знаком подчеркивания подобна классу в сборке, помеченной как внутренняя (internal). В этой странице я указываю, как и где будут вставляться различные части. В структуризации страниц вам помогут три основных класса: RenderSection, RenderPage и RenderBody. Простая страница с эталонной разметкой, где используются все три класса, показана на рис. 5.

Рис. 5. Классы RenderSection, RenderPage и RenderBody

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    @RenderSection("ClientScripts", required: false)
  </head>
  <body>
    @RenderPage("~/layout/shared/_header.cshtml")
    @RenderBody()
    @RenderPage("~/layout/shared/_footer.cshtml")
  </body>
</html>

На эту эталонную страницу должны ссылаться любые дочерние страницы, на которых нужно наследовать определенную в ней разметку. Как видите, в первой строке делается именно это:

@{ Layout = "~/layout/shared/_MasterLayout.cshtml"; }

@section ClientScripts {
  Custom Script Here </br>
}

Some body content

На разметочной странице я определил необязательный раздел (@RenderSection) в разделе head. Поскольку он не обязателен, в дочерней странице можно реализовать его по желанию. Для реализации какого-либо раздела используйте @@section, за которым следует имя, указанное в вызове @RenderSection. Остальная часть страницы (в этом примере) считается контентом. Он будет использоваться @RenderBody. Более подробный пример см. в полном исходном коде, который можно скачать для этой статьи.

Запустив default.cshtml (из папки layout в исходном коде для статьи), вы получите вывод, как на рис. 6. Рендеринг всех разделов осуществляется корректно, и они преобразуются в чистый HTML для браузера.

Рис. 6. Вывод, получаемый при выполнении default.cshtml

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title></title>
  Custom Script Here </br>
</head>
<body>
  <p>this was rendered from ~/layout/shared/_header.cshtml</p>
  Some body content
  <p>this was rendered from ~/layout/shared/_footer.cshtml</p>
</body>
</html>

Помоги мне помочь тебе

В индустрии программного обеспечения вы все время слышите: повторное использование. WebMatrix вводит концепцию, аналогичную модели плагинов (подключаемых модулей), которая применяется в WordPress или jQuery. В WebMatrix эти плагины известны как вспомогательные пакеты (helpers). Их концепция аналогична: это опубликованные пакеты повторно применяемой функциональности, или небольшие кусочки .NET-кода, которые скомпилированы и упакованы специально для простоты распространения и использования. Сам вспомогательный пакет — это NuGet-пакет (см. nuget.codeplex.com). Если вы создаете и используете вспомогательные пакеты в .NET, то для вас работа с ними ничем не отличается от работы с любым стандартным .NET-классом, потому что они фактически и являются .NET-классами.

Вспомогательные пакеты хранятся и извлекаются из облачного канала NuGet. Как же находить эти трудноуловимые пакеты? Открыв свой сайт в WebMatrix, щелкните Run. Ваш сайт будет открыт в браузере, например: http://localhost:53655/default.cshtml. Теперь перейдите на http://localhost:53655/_admin. Это единственная страница с именем, начинающимся со знака подчеркивания, для которой выполняется рендеринг, и она находится на вашем локальном компьютере. В этот момент вам будет предложено создать пароль, после чего вы попадете в Package Manager (рис. 7).

Рис. 7. ASP.NET Web Pages Administration Package Manager

Вы можете просматривать вспомогательные пакеты в одной из трех категорий: Installed, Online и Updates. Их также можно просматривать по источнику, из которого они исходят. Этот источник — канал NuGet. Каналом по умолчанию является официальный каталог вспомогательных пакетов WebMatrix, но вы вправе добавить и другие источники.

Теперь, располагая списком пакетов, давайте установим для демонстрационных целей и изучим вспомогательный пакет Url Shortener Helper (см. Теперь, располагая списком пакетов, давайте установим для демонстрационных целей и изучим вспомогательный пакет Url Shortener Helper (см. UrlShortenerHelper.CodePlex.com). Это пакет, созданный мной для сокращения URL; он использует провайдера bit.ly. Их концепция аналогична: принимаем URL и сокращаем его, скрывая взаимодействие с выбранным провайдером, который и обеспечивает это сокращение. Давайте переключимся на Online и выберем Install для UrlShortener. Это приведет к скачиванию, установке и настройке вспомогательного пакета на вашем сайте.

В настоящее время вспомогательные пакеты либо пишутся непосредственно в Razor, либо помещаются в скомпилированную сборку. Какой способ лучше? Конечно же, все зависит от того, что именно вы делаете. В случае моего Url Shortener код просто взаимодействует с API внешнего провайдера; он не генерирует никакого HTML. Поэтому в моем случае вспомогательный пакет лучше помещать в сборку. С другой стороны, вспомогательный пакет для Facebook генерирует большой объем разметки и, как таковой, пишется в виде пакета CSHTML. Но вообще для вспомогательных пакетов, в которых нужно обертываться API-вызовы и генерировать разметку, также применим гибридный подход, где часть функциональности пишется в Razor, а часть помещается в сборку.

Соответствующий пример можно найти в UserVoiceHelper на UserVoiceHelper.codeplex.com.

Вернувшись к нашему сайту, мы видим теперь несколько новых активов. В корне этого сайта появилась папка /bin с двумя новыми сборками. Это произошло в результате установки нашего пакета из NuGet. Кроме того, в корне находится файл ReadMe.UrlShortener.txt с инструкциями о том, как пользоваться этим пакетом. Другие вспомогательные пакеты, такие как Facebook Helper, добавляют свои папки и код в папку App_Code.

Data

Довольно трудно представить веб-сайт, не имеющей какого-то хранилища данных. WebMatrix поставляется с новой версией SQL Compact Server Compact Edition 4, или просто SQL Compact. Это бесплатная встраиваемая СУБД, которая не требует установки и поддерживает развертывание по команде xcopy. Поскольку SQL Compact — это компактная версия SQL Server, вы всегда можете перейти на более «продвинутые» версии SQL Server с минимальными усилиями. WebMatrix поставляется даже с инструментом, который помогает обновить вашу базу данных SQL Compact до SQL Server.

В WebMatrix встроен редактор для операций с вашей базой данных. Что бы вы ни создавали — таблицы или данные, все это можно делать из WebMatrix. После того как вы создали свою базу данных и все необходимые активы, они помещаются в файл базы данных с расширением SDF. На рис. 8 показан простой вызов для доступа к базе данных.

Рис. 8. Запрос данных, исходящий из Cars.cshtml

@{
  var db = Database.Open("Cars");
  var selectQueryString = "SELECT * FROM Models ORDER BY Year";
}
<!DOCTYPE html>
<html lang="en">
  ...
    <tbody>
      @foreach (var row in db.Query(selectQueryString))
      {
        <tr>
          <td>@row.Year</td>
          <td>@row.Maker</td>
          <td>@row.Model</td>
        </tr>
      }
    </tbody>
  ...
</html>

Я начинаю с открытия базы данных Cars, а потом выдаю запрос по этому соединению в цикле foreach. В этом же цикле я вывожу каждый результат в свою строку. После рендеринга страницы вы опять обнаружите чистый HTML. Части этого примера были опущены для краткости, но доступны в файле DataAccess.cshtml.

Обслуживание сайта

Ваш веб-сайт практически бесполезен, если у вас нет инфраструктуры для его обслуживания. На платформе Windows под этой инфраструктурой почти всегда подразумевают IIS. Подробнее о IIS см. по ссылке iis.net. Исторически сложилось так, что IIS стал частью операционной системы Windows. Веб-разработчики в Windows обычно использовали IIS или встроенный в Visual Studio веб-сервер Cassini. С выпуском WebMatrix и Visual Studio 2010 SP1 в появился дополнительный вариант — IIS Express, который сочетает в себе лучшие качества двух миров: мощь IIS и простоту Cassini.

IIS Express устанавливается с WebMatrix по умолчанию, но вы можете скачать его отдельно с WebPI. IIS Express в отличие от полной версии IIS устанавливается почти так же, как и любая другая программа пользовательского режима. Вы найдете этот сервер в каталоге C:\Program Files (x86)\IIS Express. Он состоит из двух программ: iisexpress.exe и iisexpresstray.exe. Первая — это сам IIS Express, а вторая — визуальный лоток (visual tray), который работает в области системных уведомлений Windows.

Запуск IIS Express, как правило, осуществляется из командной строки (cmd.exe). При запуске можно передать ряд параметров, таких как путь, порт, имя, версия инфраструктуры и др. Для вывода всех команд наберите: «> iisexpress.exe /?». Если бы я захотел запустить веб-сервер для своего нового сайта вне WebMatrix, то набрал бы следующую команду:

> iisexpress.exe /path:"c:\MySite" /port:81

После этого можно было бы открыть любимый веб-браузер и перейти к адресу http://localhost:81, по которому обслуживался бы ваш сайт, расположенный в C:\MySite.

WebMatrix скрывает все это от вас, но при желании вы можете получить доступ ко всем нижележащим возможностям. При щелчке Run WebMatrix запустит IIS Express в системном лотке и выполнит за вас всю необходимую настройку. При закрытии WebMatrix будет закрыт и IIS Express.

Релевантность поиска

Релевантность поиска (search relevance) сейчас важна как никогда. Вы не можете сложа руки дожидаться, когда Bing или Google адекватно проиндексируют ваш сайт. Чтобы помочь вам в этом «квесте релевантности», WebMatrix поддерживает отчеты по оптимизации для поисковых систем — Search Engine Optimization (SEO) Report.

Щелкните вкладку Reports в нижнем левом углу окна WebMatrix и вы сможете создать новый SEO Report. В ходе этого процесса WebMatrix «проходит» по вашему сайту и ищет те потенциальные области, в которых ваш сайт мог бы быть более релевантным для поисковых систем. Закончив, WebMatrix выдает детальный список любых нарушенных вами правил, а также рекомендации о том, как исправить эти нарушения. Пример SEO Report, созданного для демонстрационного кода в этой статье, показан на рис. 9.

Рис. 9. Отчет по оптимизации для поисковых систем

Этап развертывания

Вы провели бесчисленные часы в совершенствовании своего сайта. Теперь пора его развернуть. WebMatrix делает это в два этапа: сначала осуществляется настройка параметров развертывания, а потом уже собственно развертывание. На ленте WebMatrix вы найдете кнопку Publish. Настройка параметров развертывания, конечно, зависит от вашего провайдера хостинга и включенных вами средств. На рис. 10 показан диалог параметров публикации. WebMatrix изначально поддерживает как FTP, так и WebDeploy. Укажите соответствующие параметры и щелкните Publish.

Рис. 10. Настройка публикации

У вас нет провайдера хостинга? Щелкните Find Hosting Provider. В итоге вы попадете на страницу asp.net/webmatrix/hosts, где сможете выбрать хостера, сертифицированного для работы с WebMatrix. Если у вас уже есть какой-то сайт, WebMatrix «переварит» и его. В том же меню Publish вы найдете Download Published Site. Этот процесс обратен развертыванию. Вы настраиваете те же параметры развертывания, а затем скачиваете свой текущий сайт на локальный компьютер для редактирования. Закончив редактирование, просто повторите развертывание.

Масштабирование

Выбирая какую-либо инфраструктуру, разве не было бы приятно знать, что она будет способна к масштабированию по мере роста ваших потребностей и усложнения сайта? За прошедшие годы в ASP.NET появилось много частей в стиле LEGO, которые позволяют делать именно это. Сегодня мы располагаем полным конструктором и можем комбинировать детали в соответствии со своими требованиями. На рис. 1 вы видели, что все опирается на ASP.NET и, более того, на .NET. Фактически это означает, что возможен перенос вашего приложения WebMatrix в Visual Studio. Для этого достаточно щелчка кнопки.

Внимательно приглядевшись к ленте WebMatrix, вы обнаружите кнопку для открытия в Visual Studio; она расположена в правом верхнем углу. Нажав эту кнопку, вы откроете свой сайт как проект ASP.NET Web Site в Visual Studio. Но одним веб-сайтом дело не исчерпывается. Все шансы за то, что у вас есть еще и база данных. Вы можете вывести любую базу данных SQL Compact на более высокий уровень — в SQL Server. WebMatrix поможет вам выполнить этот процесс; для этого воспользуйтесь кнопкой Migration в меню базы данных.

Кратко суммируя сказанное в статье, WebMatrix разработана как инструмент для всех, и она отлично дополняет Visual Studio. Как вы используете WebMatrix, зависит от вашей текущей задачи, но в любом случае это полезный инструмент. Он позволяет автоматически выбирать требуемые части ASP.NET и при необходимости делает возможным безболезненный переход на Visual Studio и SQL Server. С появлением вспомогательных пакетов и новой подсистемы разметки повторное использование стало реальностью. Если вас не привлекает создание сайта с нуля, то WebMatrix поможет начать вам с проверенного временем приложения, перечисленного в WebPI, например Umbraco или WordPress, и развернуть его прямо на площадке хостинга вашего провайдера.

К сожалению, в этой статье я не сказал ни слова о многих других средствах, в том числе о кешировании, маршрутизации и отладке. Все это вы найдете по ссылкам на bit.ly/IntroToWebMatrix.