Общие сведения о компонентах Razor

Прежде, чем мы перейдет к более глубокому изучению Blazor Hybrid, стоит хотя бы в общих чертах рассмотреть из чего складывается визуальный интерфейс нашего приложения, а именно — рассмотреть что из себя представляют компоненты Razor и как они компонуются в приложении.

Компоненты Razor

Во-первых, стоит сказать, что из себя представляет Razor, в принципе. Razor — это специальный язык разметки, позволяющие использовать инструкции и блоки кода C# внутри html-разметки. Все мы привыкли к тому, что на страницах веб-сайтов мы можем встретить смесь html+css+Js. Так вот, Razor позволяет при разработке приложения смешивать C# и HTML. В запущенном приложении разметка Razor будет преобразована в обычные элементы веб-страниц.

Компонент Razor — это автономная часть пользовательского интерфейса с логикой обработки, предназначенная для реализации динамического поведения. В физическом плане компонент Razor это, обычно, файл с расширением .razor. Вернемся к нашему первому приложению Blazor Hybrid и посмотрим на его структуру ещё раз:

Здесь мы видим семь файлов с расширением .razor и из них шесть — это компоненты Razor. Файл _Imports.razor используется для указания пространств имен, используемых во всех компонентах Razor и выглядит следующим образом:

@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Web.Virtualization
@using Microsoft.JSInterop
@using HelloBlazorHybrid
@using HelloBlazorHybrid.Components

Все компоненты Razor, условно, можно разделить на три категории — это страницы, макеты и, собственно, все прочие компоненты (элементы управления, компоненты таблиц и т.д.).

Элементы управления

Например, в нашем приложении определен компонент под названием NavMenu. Это то самое меню навигации, которое мы видим при запуске приложения в сайдбаре:

то есть, в данном случае, NavMenu.razor — это компонент элементу управления. Если посмотреть на код этого компонента, то мы увидим знакомую нам html-разметку документа:

При этом, обратите внимание, что некоторые тэги в разметке выделяются зеленым цветом — это так же компоненты Razor, которые встраиваются в компонент NavMenu

Таким образом, в приложениях Blazor в общем и в Blazor Hybrid, в частности, разбивать пользовательский интерфейс приложения на отдельные автономные части (компоненты) и создавать из этих частей пользовательский интерфейс, используя привычную нам html-разметку.

Макеты

Макет — это компонент Razor, который позволяет компоновать различные совместно используемые компоненты. Макеты наследуются от специального класса LayoutComponentBase. В нашем приложении определен компонент макета — MainLayout, а совместно используемым компонентом является NavMenu — мы видим этот компонент всегда, на какой странице мы бы не находились. Посмотрим содержимое макета:

Внутри макета в каком-либо месте разметки мы всегда можем увидеть специальное выражение:

@Body

строка, начинающаяся с символа @ внутри html-разметки  — это выражение Razor, которое вычисляет выражение C# и отрисовывает его содержимое в html-разметке. В случае макета мы отрисовываем содержимое свойства Body родительского класса LayoutComponentBase. То есть, вместо этого выражения будут выводиться страницы приложения с размещенными в них прочими компонентами Razor.

Так как макеты и совместно используемые компоненты Razor используются во всем приложении, то, обычно их размещаются в папке Shared или, как в нашем случае, в папке Layout.

Страницы

Страницы — это маршрутизируемые компоненты Razor. Такие компоненты отличает то, что у них определена директива @page в которой указывается путь к компоненту. В нашем приложении все страницы располагаются в папке /Components/Pages:

Посмотрим, например, код страницы Home.razor:

@page "/"

<h1>Hello, world!</h1>

Welcome to your new app.

Здесь мы, опять же, видим html-разметку, а также директиву @page в которой указан путь к странице. Если теперь сопоставить этот код с кодом макета приложения, то при работе приложения, если пользователь переходит по ссылке Home мы получаем следующее:

То есть, если представить этот рисунок в виде обычного html-кода, то мы получим следующую разметку:

<div class="page">
    <div class="sidebar">
        <div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">HelloBlazorHybrid</a>
    </div>
</div>

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="/" Match="NavLinkMatch.All">
                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="weather">
                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
            </NavLink>
        </div>
    </nav>
</div>
    </div>

    <main>
        <div class="top-row px-4">
            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <h1>Hello, world!</h1>
            Welcome to your new app.
        </article>
    </main>
</div>

Здесь, как мы видим, отсутствуют такие важные для html-страницы html-тэги, как <body>, <head> и так далее.

Стартовая страница index.html

Весь основной «скелет» html-страниц, которые мы загружаем в приложении, располагается в файле wwwroot/index.html

При первом запросе любой страницы приложения именно этот файл преобразовывается для просмотра и возвращается в ответе. В файле index.html, помимо всего прочего,  указывается место отрисовки корневого компонента App. Посмотрим на код этого файла:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <title>HelloBlazorHybrid</title>
    <base href="/" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="css/app.css" />
    <link rel="stylesheet" href="HelloBlazorHybrid.styles.css" />
    <link rel="icon" href="data:,">
</head>

<body>

    <div class="status-bar-safe-area"></div>

    <div id="app">Loading...</div>

    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>

    <script src="_framework/blazor.webview.js" autostart="false"></script>

</body>

</html>

Как мы видим — это обычная html-страница, содержащая основные html-тэги. Здесь мы подключаем необходимые нам css, включая и css-фреймворк bootstrap, определяем кодировку содержимого и т.д. Внутри тэга <body> это страницы размещаются два важных для нас элемента, а именно:

1. Скрипт <script src="_framework/blazor.webview.js" autostart="false"></script> который используется, в том числе, для обработки различных событий в приложении, например, клики по кнопкам
2. Элемент <div id="app">Loading...</div>внутри этого тэга выводится содержимое нашего приложения.

Например, запустите приложение в Windows и нажмите клавишу F12 — запустятся инструменты разработчика где мы можем увидеть всю структуру DOM:

То есть, вместо строки «Loading…» было загружено содержимое макета, включая все компоненты Razor.

Таким образом, в общих чертах, пользовательский интерфейс в приложении Blazor складывается следующим образом:

Компонент Routes

Отдельно стоит обратить внимание также на компонент Routes. Его код выглядит следующим образом:

<Router AppAssembly="@typeof(MauiProgram).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
        <FocusOnNavigate RouteData="@routeData" Selector="h1" />
    </Found>
</Router>

Здесь расположен специальный компонент Router, который отвечает за маршрутизацию в приложении. В атрибуте AppAssembly указывается сборка внутри которой необходимо искать маршрутизируемые компоненты. У компонента Router определено свойство Found которое возвращает (или задает) содержимое, соответствующее определенному URI. С этим компонентом мы обязательно разберемся более детально в одной из следующих частей руководства.

Итого

Пользовательский интерфейс приложения Blazor Hybrid строится с использованием языка разметки Razor, который позволяет использовать C# внутри разметки html. Используя Razor мы можем создавать компоненты — автономные части пользовательского интерфейса из которых складывается визуальная часть приложения. Маршрутизируемые компоненты Razor (страницы) размещаются внутри макета и содержат необходимые для работы элементы управления, которые также могут выделяться в отдельные компоненты Razor.