WebMatrix – простое создание веб-сайтов. Часть 2 – Синтаксис Razor

Итак, после “небольшого” затишья можно продолжать серию про WebMatrix !!
В данной статье хочу приделить побольше внимания тому, как использовать синтаксис Razor. Потому как благодаря ему можно с легкостью использовать “сильные стороны” технологии ASP.Net .
Что же это за синтаксис такой?
Синтаксис программирования «Razor» – это упрощенный синтаксис для вставки в веб-страницу серверного кода, он основан на языке программирования «C#», также поддерживает язык «Visual Basic». Короче говоря, упрощенный ASP.Net.
По сути, содержимое веб-страницы,  которая использует этот синтаксис, можно разделить на две фундаментальные части:
1)   Клиентский контент – это обычное наполнение веб страницы. Например, просто текст, элементы HTML разметки, сведения о стиле, скрипты.
2)   Серверный код – это код, который выполняется на сервере, благодаря чему  он может выполнять более сложные задачи, например, доступ к базам данных. Главная особенность  – это возможность динамически создавать клиентский контент. Серверный код с легкостью может создать HTML разметку  или какое-нибудь другое содержимое «на лету», смешать это с любым статическим HTML кодом который уже имеется на странице. И потом все это «творение» без проблем отобразить в браузере.
Один из главных признаков присутствия серверного кода на  ASP.NET странице есть специальное расширение – «СSHTML» или  «VBHTML». Сервер распознает расширение, ищет и выполняет код,  отмеченный синтаксисом Razor, и после отправляет страницу в браузер.
Синтаксис Razor основывается на технологии ASP.NET, которая, как и многие другие технологии Майкрософт, основывается на платформе .NET Framework :
Итак, давайте теперь непосредственно рассмотрим базовый пример создания веб-страницы ASP.NET  и добавления серверного кода в разметку HTML. Также, для только начинающих разработчиков, рассмотрим самые самые фундаментальные принципы написания кода ASP.NET с помощью синтаксиса Razor.
Для начала создадим «Пустой сайт» в WebMatrix`e. Для этого запускаем WebMatrix, в разделе «Сайт на основе шаблона», выбираем «Пустой сайт» и называем его, допустим, – «Наш Тест Сайт»:
В результате мы получили пустой сайт, который называется «Наш Тест Сайт»:
Теперь давайте создадим файлик «Index.cshtml», в котором будем тестировать синтаксис Razor:
Итак, первое, что нужно знать, это то, что серверный код всегда начинается с символа «. Если у нас есть блок кода, то он заключается в фигурные скобки:
@{
var Privetstvie = “Всем привет с нашего сайта!”;
<h1> @Privetstvie </h1>
}
Результат выполнения:
Внутри блока после каждого оператора должна быть точка с запятой (кроме встроенных выражений):
@{
var kolichestvo = 30;
var Message = “Привет, сегодня на паре было “ + kolichestvo + ” студентов!”;
<h1> @Message </h1>
}
Результат выполнения:
Если комментарии находятся в блоке кода, они обозначаются как в С#, если поза блоком кода, тогда просто как в НTML:
<! – – Наш комментарий поза блоком кода – – >
@{
//Комментарий в блоке кода
/*Второй комментарий в блоке кода*/
}
Как Вы уже заметили на примерах выше, в блок кода можно вставлять HTML разметку.  Если мы хотим вывести строчку кода в блоке, можно использовать команду @: .
Пример:
@{
var str = “Вторая строчка”;
@: Всего лишь одна строчка
@: @str
<h1> HTML </h1>
}
В результате:
Также мы можем использовать дескриптор <text></text> :
@{
var  str = ” Привет! “;
<text> @str Здесь размещен любой текст!!
!!!  Символы – @@ : \ / “
</text>
}
Результат:
Обратите внимание все вывелось в одну строку, то есть все что помечено дескриптором <text></text>  –  воспринимается сугубо как текст, кроме символа @, Потому что можно вывести переменную.
Как и в любом языке программирования, можно использовать переменные для хранения различных данных:
@{
int i = 0;
float f = 0.23f;
decimal d = 7.456m;
string s = “Hello World”;
bool b = true;
DateTime date = DateTime.Now;
var abc = “ASP.Net сам определит тип данной переменной!”;
<p>@i</p>
<p>@f</p>
<p>@d</p>
<p>@s</p>
<p>@b</p>
<p>@date</p>
<p>@abc</p>
}
Тип var позволяет нам объявлять переменные неявно, то есть компилятор определит тип за нас.
В результате выполнения:
Хочу обратить ваше внимание на то, чтобы вывести на экран символ @ с помощью HTML , необходимо в коде написать @@ . Также если мы создаем и выводим строку, в которой есть спец символы ( \ , “), нам надо перед описанием строки поставить @, и при этом если надо вывести “ – пишем “”. Пример:
@{
var str = “Обычная строка с символом @ “;
var str2 = @” В этой строке есть спец символы – \, “” , @ ” ;
<p> @str </p>
<p> @str2 </p>
<p> Просто строка с символом @@</p>
}
Результат выполнения:
Если нам надо конвертировать  переменную с одного типа в другой, используем методы AsInt(), ToString и др. Пример:
@{
string message;
int suma;
int a = 5;
string b = “7”;
suma = a + b.AsInt();
message = “Привет! “+ a.ToString() + ” + ” + b + ” = ” + suma.ToString();
@: @message
}
В результате:
В следующей таблице приведены примеры самых распространенных методов преобразования и тестирования для переменных: NET Framework :
Метод Описание
AsInt(),

IsInt()
Преобразует строку, представляющую целое число
(например “31”), в целое число.
AsBool(),

IsBool()
Преобразует строку “true” или
“false” в логический тип Boolean.
AsFloat(),

IsFloat()
Преобразует строку, содержащую десятичное
значение, например “1.3” или “7.439”, в число с плавающей
запятой.
AsDecimal(),

IsDecimal()
Преобразует строку, содержащую десятичное
значение, например “1.3” или “7.439”, в десятичное число.
(Десятичное число более точное, чем число с плавающей запятой.)
AsDateTime(),

IsDateTime()
Преобразует строку, представляющую значение даты
и времени, в тип ASP.NET DateTime.
ToString() Преобразует любой  тип данных в строку.
Для введения в код логики, используем операторы if и else :
@{
bool myBool = true;
if (myBool) // то же что и –  if(myBool == true)
{
@: @myBool
}
else
{
@: Бывает
}
}
Можно добавлять несколько условий:
@{
int a = 2;
int b = 10, c = 20, d = 30;
if (a == 0)
{
@: A= @b
}
else if (a == 1)
{
@: A = @c
}
else
{
@: A = @d
}
}
Результат:
Также, при большом количестве условий мы можем использовать switch:
@{
var Name = “Sergey”;
var Message = “Привет “;
switch (Name.ToString())
{
case “Ivan”:
Message =
Message + ” Иван!”;
@: @Message
break;
case “Sergey”:
Message =
Message + ” Сергей!”;
@: @Message
break;
}
}
Результат:
Ну и наконец, рассмотрим как организовывается цикл.
Если нам известно точно, сколько раз нам надо выполнить определенный блок кода, то мы используем цикл for:
@{
for(var i = 1; i < 4; i++ )
{
<h@i> Заголовок @i</h@i>
}
}
Результат выполнения:
При работе с коллекцией или массивом часто используется цикл foreach:
@{
int[] mas = {1,2,3,4,5};
foreach (var i in mas)
{
@:@i
}
}
Мы указали, что есть массив mas целых чисел, а потом с помощью цикла foreach и переменной i «пробежались» по массиву и каждый раз выводили і на экран.
Результат:
Есть еще один способ организации цикла. Это цикл while:
@{
var i = 1;
while (i<6)
{
@: @i </br>
if (i==5)
{
@: Вышел заяц погулять!
}
i++;
}
}
Результат:
Ну что же, пожалуй на этом можно вторую часть закончить!
Всего хорошего! Тренеруйтесь с WebMatrix! И конечно, же, успехов!🙂
P.S. Продолжение следует…

WebMatrix – простое создание веб-сайтов. Часть 2 – Синтаксис Razor: Один коментар

Залишити відповідь

Заповніть поля нижче або авторизуйтесь клікнувши по іконці

Лого WordPress.com

Ви коментуєте, використовуючи свій обліковий запис WordPress.com. Log Out / Змінити )

Twitter picture

Ви коментуєте, використовуючи свій обліковий запис Twitter. Log Out / Змінити )

Facebook photo

Ви коментуєте, використовуючи свій обліковий запис Facebook. Log Out / Змінити )

Google+ photo

Ви коментуєте, використовуючи свій обліковий запис Google+. Log Out / Змінити )

З’єднання з %s