• Статья
Глава 1. Начало работы с WebMatrix бета-версии и веб-страницами ASP.NET

[Это предварительная документация, которая может изменяться.]

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

В этом руководстве

  • Основные сведения о WebMatrix.
  • Установка WebMatrix.
  • Как начать создание простого веб-сайта с помощью WebMatrix.
  • Создание динамической веб-страницы с помощью 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 можно воспользоваться установщиком веб-платформы Майкрософт — свободно распространяемым приложением, облегчающим установку и настройку веб-технологий.

  1. При отсутствии установщика веб-платформы загрузите его со следующего URL-адреса:
    https://go.microsoft.com/fwlink/?LinkId=195938
  2. Запустите установщик веб-платформы, выберите пункт «Начало работы» и нажмите «Установить сейчас».

Начало работы с бета-версией WebMatrix

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

  1. Запустите WebMatrix.
  2. Выберите пункт «Site From Template» («Сайт из шаблона»). Шаблоны включают предварительно построенные файлы и страницы для разных типов веб-сайтов.
  3. Выберите «Empty Site» (Пустой сайт) и дайте новому сайту имя «HelloWorld».
  4. Нажмите кнопку ОК. WebMatrix создает и открывает новый сайт.

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

  1. Выберите рабочее пространство Files (Файлы). В этом рабочем пространстве можно работать с файлами и папками. В левой области отображается файловая структура сайта.
  2. В ленте нажмите кнопку «New» (Создать) и выберите пункт «New File…» (Создать файл...).

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

    Как можно видеть, это обычная разметка HTML.
  5. Добавьте в страницу следующий выделенный код HTML и контент.

    <!DOCTYPE html>

    <html>

        <head>

            <title>Страница "Здравствуй, мир!"</title>

        </head>

        <body>

        <h1>Страница "Здравствуй, мир!"</h1>

        <p>Здравствуй, мир!</p>

        </body>

    </html>
  6. В панели быстрого доступа нажмите кнопку «Save» (Сохранить).
  7. В ленте нажмите кнопку «Run» (Выполнить).
  8. WebMatrix запускает веб-сервер (IIS Developer Express), который можно использовать для тестирования страниц на компьютере разработчика. Страница отображается в браузере по умолчанию.
  9. В следующем разделе будет показано, насколько просто добавить код на страницу HelloWorld.cshtml, чтобы создать динамическую страницу.

Использование кода веб-страниц ASP.NET

В этой процедуре будет создана страница, использующая простой код для отображения серверной даты и времени на странице. В этом примере используется синтаксис Razor, позволяющий включать код в HTML на веб-страницах ASP.NET. (Более подробно это будет рассматриваться в следующей главе.) Также в этом коде вводится вспомогательный модуль — одна из мощных концепций в ASP.NET. Вспомогательные модули позволяют выполнять сложные задачи с помощью одной строки кода. В ASP.NET доступен большой набор вспомогательных модулей. Они будут использоваться во всех разделах этого руководства, а список всех вспомогательных модулей можно найти в приложении.

  1. Откройте файл HelloWorld.cshtml.

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

    <!DOCTYPE html>

    <html>

        <head>

            <title>Страница "Здравствуй, мир!"</title>

        </head>

        <body>

        <h1>Страница "Здравствуй, мир!"</h1>

        <p>Здравствуй, мир!</p>

        <p>Сейчас @DateTime.Now</p>

        </body>

    </html>

    Страница содержит обычную разметку HTML с одним дополнением: символ @ помечает программный код, который задает вспомогательный модуль.

  3. Сохраните страницу и запустите ее в браузере. Теперь на странице можно видеть текущую дату и время.

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

Предположим, что планируется сделать нечто более сложное, например отобразить прокручиваемый список сообщений от выбранного пользователя Twitter. Для этого также можно использовать вспомогательный модуль.

  1. Создайте новый CSHTML-файл и дайте ему имя TwitterFeed.cshtml.

  2. В TwitterFeed.cshtml добавьте следующий выделенный код.

    <!DOCTYPE html>

    <html>

        <head>

            <title>Веб-канал Twitter</title>

        </head>

        <body>

            <h1>Веб-канал Twitter</h1>

            <form action="" method="POST">

            <div>

                Введите имя другого веб-канала Twitter для отображения:

                &nbsp;

                <input type="text" name="TwitterUser" value=""/>

                &nbsp;

                <input type="submit" value="Отправить" />

            </div>

            <div>

                @if (Request["TwitterUser"].IsEmpty()) {

                    @Twitter.Profile("microsoft")

                }

                else {

                    @Twitter.Profile(Request["TwitterUser"])

                }   

            </div>

        </form>

        </body>

    </html>

    Этот HTML создает форму, отображающую текстовое поле для ввода имени пользователя и кнопку «Отправить». Это то, что находится между первой парой тегов <div>.

    Между второй парой тегов <div> находится некоторый код. (Для отметки кода в веб-страницах ASP.NET используется символ @.) При первом отображении этой страницы, или если пользователь нажал кнопку «Отправить» при незаполненном текстовом поле, условное выражение Request["TwitterFeedName"] == null будет иметь значение true. В этом случае страница будет показывать веб-канал Twitter для пользователя microsoft. В других случаях страница будет показывать веб-канал Twitter для имени пользователя, указанного в текстовом поле.

  3. Запустите эту страницу в браузере. Веб-канал Twitter отображает записи пользователя microsoft.
  4. Введите новое имя пользователя Twitter и нажмите кнопку «Отправить». Отображается новый веб-канал. (Если будет указано несуществующее имя, то веб-канал Twitter будет отображаться, но пустым.)

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

Создание и тестирование страниц ASP.NET с помощью собственного текстового редактора

Для создания и тестирования веб-страницы ASP.NET не обязательно использовать редактор WebMatrix. Создать страницу можно в любом редакторе, включая Блокнот. Необходимо только проверить, что страница сохраняется с расширением CSHTML (или VBHTML, если планируется использовать Visual Basic).

Самый простой способ тестирования CSHTML-страниц — запустить веб-сервер (IIS Developer Express) с помощью кнопки «WebMatrix Run» (Запустить WebMatrix). Если не планируется использовать средство WebMatrix, веб-сервер можно запустить в командной строке и связать его с определенным номером порта. Затем этот порт указывается при запросе CSHTML-файлов в браузере.

В Windows откройте командную строку с правами администратора и перейдите в следующую папку:

C:\Program Files\Microsoft WebMatrix

В 64-разрядных системах используйте следующую папку:

C:\Program Files (x86)\Microsoft WebMatrix

Введите следующую команду, указав соответствующий путь к сайту:

iisexpress.exe /port:35896 /path:C:\BasicWebSite

Не имеет значения, какой номер порта используется, если этот порт не был зарезервирован каким-либо другим процессом (порты с номерами больше 1024 обычно свободны).

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

После выполнения этой команды можно открыть браузер и перейти к CSHTML-файлу, как показано ниже.

https://localhost:35896/HelloWorld.cshtml

Чтобы получить справку по параметрам командной строки IIS Developer Express, введите iisexpress.exe /? в командной строке.