Содержание
При изучении представлений в ASP.NET Core MVC невозможно обойти стороной такую тему как разметка Razor. Razor позволяет достаточно легко переходить от разметки html в представлении к коду C#, вычислять выражения C# и отрисовывать их в выходных данных в виде HTML-разметки.
Разметка Razor
Разметка Razor начинается с символа @. Например, если мы посмотрим на файл представления, который мы создали в предыдущей части, то увидим следующие код:
@*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<h2>Последние записи блога</h2>
@{
}
здесь мы видим, что комментарии в представлениях с Razor обрамляются символами @*. Также, в этом представлении уже обозначен блок, в котором мы можем использовать C#-код:
@{
}
Используя символ @ мы можем легко переключаться с html на C#. Например, изменим код нашего представления следующим образом:
@*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<h2>Последние записи блога на момент @DateOnly.FromDateTime(DateTime.Now)</h2>
@{
}
здесь мы использовали так называемое неявное выражение Razor, которое начинается с @ и сразу за этим символом идёт выражение C#. В данном случае, мы пытаемся вывести текущую дату пользователю. В рабочем приложении это будет выглядеть следующим образом:
В свою очередь, явные выражения Razor располагаются внутри @(). Например, добавим в наше представление новый блок:
@*
For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
<h2>Последние записи блога на момент @DateOnly.FromDateTime(DateTime.Now)</h2>
@*Здесь будут выводиться записи за прошлую неделю*@
<h2>Записи за прошлую неделю: с @((DateTime.Now - TimeSpan.FromDays(7)).ToShortDateString()) по @DateOnly.FromDateTime(DateTime.Now)</h2>
@{
}
здесь мы определили явное выражение Razor:
@((DateTime.Now - TimeSpan.FromDays(7)).ToShortDateString())
явные выражения Razor позволяют уже выполнять какие-то действия C#. Например, как в нашем случае — мы отнимаем от текущей даты семь дней.
Также, бывает необходимо не просто вывести какое-либо значение на страницу, но перед этим, произвести какие-либо вычисления с переменной. В этом случае, мы можем использовать следующую конструкцию Razor — @{} где внутри фигурных скобок мы можем осуществлять какие-либо вычисления. Например,
@{
DateOnly date = DateOnly.FromDateTime(DateTime.Now);
DateOnly lastweekStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
}
здесь мы объявили две переменные типа DateOnly и присвоили им значения. Теперь мы можем изменить наше представление следующим образом:
@*Здесь располагается код C#*@
@{
DateOnly date = DateOnly.FromDateTime(DateTime.Now);
DateOnly lastweekStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
}
<h2>Последние записи блога на момент @date</h2>
@*Здесь будут выводиться записи за прошлую неделю*@
<h2>Записи за прошлую неделю: с @lastweekStart по @date</h2>
Результат выполнения рендеринга этого представления будет выглядеть следующим образом:
Также, Razor поддерживает различные конструкции с помощью которых мы можем осуществлять перебор элементов в циклах, проверять условия и т.д. Кратко рассмотрим эти конструкции.
Условные конструкции
Конструкция if..else
Для использования условного оператора if..else непосредственно в коде представления можно использовать одноименную конструкцию Razor. Например, добавим в наше представление следующий код:
@if ((date.DayOfWeek == DayOfWeek.Saturday) || (date.DayOfWeek == DayOfWeek.Sunday))
{
<h2 style="color: red;">Последние записи блога на момент @date</h2>
}
else
{
<h2>Последние записи блога на момент @date</h2>
}
здесь мы проверяем, если день недели суббота или воскресенье, то заголовок последних записей блога будет выводиться красным цветом, иначе — черным. Так как этот код был написан в субботу, то результат будет таким:
Конструкция switch
Перепишем код выше следующим образом:
@switch (date.DayOfWeek)
{
case DayOfWeek.Sunday:
case DayOfWeek.Saturday:
{
<h2 style="color: red;">Последние записи блога на момент @date</h2>
break;
}
default:
{
<h2>Последние записи блога на момент @date</h2>
break;
}
}
результат выполнения будет тот же, что и на рисунке выше.
Циклы
С помощью циклов удобно формировать различные списки в HTML-коде. Например, выведем заголовки последних записей блога на странице, используя различные виды циклов.
Цикл for
@{
DateOnly date = DateOnly.FromDateTime(DateTime.Now);
DateOnly lastweekStart = DateOnly.FromDateTime(DateTime.Now.AddDays(-7));
//Условная БД с заголовками статей блога
string[] Titles = new[]
{
"Hello, world!",
"Знакомство с Razor в ASP.NET Core MVC",
"Разметка Razor"
};
}
@switch (date.DayOfWeek)
{
case DayOfWeek.Sunday:
case DayOfWeek.Saturday:
{
<h2 style="color: red;">Последние записи блога на момент @date</h2>
break;
}
default:
{
<h2>Последние записи блога на момент @date</h2>
break;
}
}
<ul>
@for (int i = 0; i < Titles.Length; i++)
{
<li>@Titles[i]</li>
}
</ul>
здесь мы определили условную БД, содержащую заголовки последних записей блога и, ниже, в цикле for выводим эти заголовки на странице:
<ul>
@for (int i = 0; i < Titles.Length; i++)
{
<li>@Titles[i]</li>
}
</ul>
результат:
Цикл foreach
<ul>
@foreach (var title in Titles)
{
<li>@title</li>
}
</ul>
Результат работы будет такой же, как на рисунке выше.
Цикл while
@{
int i = 0;
}
<ul>
@while (i<Titles.Length)
{
<li>@Titles[i]</li>
i++;
}
</ul>
Цикл do..while
@{
int i = 0;
}
<ul>
@do
{
<li>@Titles[i]</li>
}
while (++i < Titles.Length);
</ul>
Обработка исключений
Также, мы можем использовать блоки try...catch:
@try
{
int data = 0;
var res = 10 / data;
}
catch
{
<p style="color: red">Здесь произошла ошибка</p>
}
Функции
Директива @functions позволяет определить функции, которые могут применяться в представлении. Например:
@functions
{
public string Print(IEnumerable<string> titles)
{
return string.Join(" ", titles);
}
}
Результат
Итого
В этой части мы познакомились в общих чертах с разметкой Razor и её применении для создания представлений в ASP.NET Core MVC. Используя Razor, мы можем создавать циклы, использовать условные операторы, производить вычисления на языке C#, а затем выводить эти представления в виде HTML.