Учебный курс по WebMatrix, глава 4. Знакомство с синтаксисом Razor. Рекомендации по программированию

  • Article

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

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

8 основных рекомендаций по программированию

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

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

Дополнительные сведения о большинстве программных методов см. далее в этой главе.

1. Добавление кода на страницу с помощью символа @

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

<!-- Блок с одним выражением -->

@{ var total = 7; }

@{ var myMessage = "Привет Razor и ASP.NET"; }

 

<!-- Встроенное выражение -->

<p>Значение переменной total: @total </p>

<p>Значение переменной myMessage: @myMessage</p>

 

<!—Блок с несколькими выражениями -->

@{

    var greeting = "Добро пожаловать на страницу!";

    var weekDay = DateTime.Now.DayOfWeek;

    var greetingMessage = greeting + " Сегодня: " + weekDay;

}

<p>Приветствие: @greetingMessage</p>

При запуске страницы в браузере эти операторы будут выглядеть следующим образом:

image

2. Заключение блоков кода в скобки

Блок кода состоит из одного или нескольких операторов и заключается в фигурные скобки.

<!-- Блок из одного оператора. -->

@{ var theMonth = DateTime.Now.Month; }

<p>Номер текущего месяца: @theMonth</p>

<!-- Блок из нескольких операторов. -->

@{

var outsideTemp = 12;

var weatherMessage = "Здравствуйте, температура " + outsideTemp + " градусов.";

}

<p>Погода сегодня: @weatherMessage</p>

Результат, который получится в браузере:

image

3. Завершение каждого оператора внутри блока точкой с запятой

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

<!-- Блок из одного оператора. -->

@{ var theMonth = DateTime.Now.Month; }

<p>Номер текущего месяца: @theMonth</p>

<!-- Блок из нескольких операторов. -->

@{

var outsideTemp = 5;

var weatherMessage = "Здравствуйте, температура " + outsideTemp + " градусов.";

}

<p>Погода сегодня: @weatherMessage</p>

4. Использование переменных для хранения значений

Переменные можно использовать для хранения разных значений, включая строки, числа и даты. Новая переменная создается с помощью ключевого слова var. Переменные можно вставлять непосредственно на страницу с помощью символа @.

<!-- Сохранение строки -->

@{ var welcomeMessage = "Добро пожаловать, новые участники!"; }

<p>@welcomeMessage</p>

<!-- Сохранение даты -->

@{ var year = DateTime.Now.Year; }

<!-- Вывод переменной -->

<p>Добро пожаловать в число наших новых участников, подключившихся в @year!</p>

Результат, который получится в браузере:

image

5. Заключение строковых литералов в двойные кавычки

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

@{ var myString = "Это строковый литерал"; }

Если в строке содержится символ обратной косой черты (\) или двойные кавычки, то следует указывать перед этой строкой оператор @, который означает, что последующие символы следует воспринимать буквально. (В C# символ обратной косой черты (\) имеет особый смысл, если не указано, что его следует использовать буквально).

<!-- Включение обратной косой черты в строку -->

@{ var myFilePath = @"C:\MyFolder\"; }

<p>Путь: @myFilePath</p>

Чтобы включить в строку двойные кавычки, следует использовать оператор @, указывающий буквальный строковый литерал, и повторить двойные кавычки дважды:

<!-- Включение двойных кавычек в строку -->

@{ var myQuote = @"Человек сказал: ""Здравствуйте, сегодня понедельник."""; }

<p>@myQuote</p>

Результат, который получится в браузере:

image

Примечание. Символ @ используется как для указания буквальных строковых литералов в C#, так и для пометки кода на страницах ASP.NET.

Учет регистра в коде

В C# учитывается регистр символов в ключевых словах (var, true, if) и именах переменных. В следующих строках кода создаются две разные переменные, lastName и LastName.

@{

var lastName = "Иванов";

var LastName = "Петров";

}

Если переменная объявлена в виде «var lastName = "Иванов";», то при попытке обратиться к этой переменной в виде «@LastName» будет получена ошибка, поскольку имя LastName не будет распознано.

Примечание. В Visual Basic регистр символов не учитывается.

7. Включение в код объектов

Объект – это сущность, с которой можно работать при программировании, например страница, текстовое поле, файл, изображение, веб-запрос, сообщение электронной почты, запись клиента (строка базы данных) и т.п. Объекты имеют свойства, описывающие их качества, например текстовое поле имеет свойство Text (текст), объект запроса имеет свойство URL (URL-адрес), сообщение электронной почты имеет свойство From (от), а клиент имеет свойство FirstName (имя). У объектов также имеются методы, представляющие собой «команды», которые могут выполнять объекты. В примерах ниже, показаны объект-файл с методом Save, объект-изображение с методом Rotate и объект-сообщение электронной почты с методом Send.

Часто приходится работать с объектом Request (запрос), который предоставляет такие сведения, как значения полей формы на странице (т.е. текстовых полей), тип браузера, выполнившего запрос, URL-адрес страницы, удостоверение пользователя и т.п. В следующем примере показывается порядок доступа к свойствам объекта Request и вызова метода MapPath объекта Request для получения абсолютного пути к странице на сервере:

<table border="1">

<tr>

<td>Запрошенный URL-адрес</td>

<td>Относительный путь</td>

<td>Полный путь</td>

<td>Тип HTTP-запроса</td>

</tr>

<tr>

<td>@Request.Url</td>

<td>@Request.FilePath</td>

<td>@Request.MapPath(Request.FilePath)</td>

<td>@Request.RequestType</td>

</tr>

</table>

Результат, который получится в браузере:

image

8. Возможность написания кода, принимающего решения

Ключевой особенностью динамических веб-страниц является возможность определить, что следует выполнить, в зависимости от определенных условий. Самый распространенный способ сделать это состоит в использовании оператора if (и дополнительного оператора else).

@{

var result = "";

if(IsPost)

{

result = "Эта страница была отправлена с помощью кнопки Отправить.";

}

else

{

result = "Это был первый запрос данной страницы.";

}

}

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

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

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

<p>@result</p>

</form>

</body>

</html>

</body>

</html>

Оператор if(IsPost) представляет сокращенный вариант написания if(IsPost = true). Наряду с оператором if существует множество способов проверки условий, повторения блоков кода и т.п., которые описываются далее в этой главе.

При выполнении данного кода, если кнопка «Отправить» еще не нажималась, мы видим:

image

Результат, который получится в браузере после нажатия кнопки «Отправить»:

image

Методы HTTP GET и POST и свойство IsPost

Протокол, используемый для веб-страниц (HTTP), поддерживает весьма ограниченное количество методов («команд») для выполнения запросов к серверу. Наиболее распространенными методами являются GET, используемый для чтения страницы, и POST, используемый для отправки страницы. Как правило, при первом запросе пользователем страницы применяется метод GET. Если пользователь заполняет форму и нажимает кнопку «Отправить», то браузер выполняет запрос POST к серверу.

В веб-программировании часто бывает полезно знать, с помощью какого метода, GET или POST, запрашивается страница, чтобы определить порядок обработки этой страницы. В веб-страницах ASP.NET можно определить метод запроса GET или POST с помощью свойства IsPost. Если выполняется запрос POST, то свойство IsPost возвращает значение true, и можно выполнять такие действия, как чтение значений текстовых полей формы. В данном руководстве во множестве примеров показываются способы обработки страницы, отличающиеся в зависимости от значения свойства IsPost.

Пример простого кода

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

  1. Создайте в редакторе новый файл и назовите его AddNumbers.cshtml.
  2. Скопируйте следующий код и разметку и вставьте их в страницу. Код здесь выделен, чтобы легче было отличить его от разметки HTML.

@{

var total = 0;

var totalMessage = "";

if(IsPost) {

// Извлечение чисел, введенных пользователем.

var num1 = Request["text1"];

var num2 = Request["text2"];

// Преобразование введенных строк в целые числа и их сложение.

total = num1.AsInt() + num2.AsInt();

totalMessage = "Сумма = " + total;

}

}

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta http-equiv="content-type" content="text/html;charset=utf-8"/>

<style type="text/css">

body {background-color: beige; font-family: Verdana, Arial;

margin: 50px; }

form {padding: 10px; border-style: solid; width: 250px;}

</style>

</head>

<body>

<p>Введите два целых числа и нажмите кнопку <strong>Сложить</strong>.</p>

<form action=""method="post">

<p><label for="text1">Первое число:</label>

<input type="text" name="text1"/>

</p>

<p><label for="text2">Второе число:</label>

<input type="text" name="text2"/>

</p>

<p><input type="submit" value="Сложить" /></p>

</form>

<p>@totalMessage</p>

</body>

</html>

Символ @ начинает первый блок кода в странице, а также указывается перед переменной totalMessage, которая выводится в нижней области страницы. Блок вверху страницы заключен в фигурные скобки. Каждая строка в этом блоке заканчивается точкой с запятой. Переменные total, num1, num2 и totalMessage хранят определенные числа и строку. Строковый литерал, присвоенный переменной totalMessage, заключается в двойные кавычки. Поскольку в коде учитывается регистр, переменная totalMessage, указываемая внизу страницы, должна точно соответствовать переменной вверху.

Выражение num1.AsInt() + num2.AsInt() показывает порядок работы с объектами и методами. Метод AsInt в каждой переменной преобразует введенную пользователем строку в число (целое), чтобы можно было выполнять с ним арифметические действия.

Тег <form> включает атрибут method="post". Это указывает, что при нажатии пользователем кнопки «Сложить» страница будет отправляться на сервер с помощью метода HTTP POST. Когда страница отправляется, условие if(IsPost) оценивается как true, и выполняется условный код, отображающий результат сложения чисел.

Сохраните страницу и запустите ее в браузере. Введите два целых числа и нажмите кнопку «Сложить».

image

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

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