Компоненты Razor в Blazor Hybrid

Теперь, когда вы настроили среду разработки, давайте рассмотрим структуру гибридного проекта Blazor и узнайте, как добавить новые страницы.

Что такое Razor?

Razor — это синтаксис разметки для внедрения в веб-страницы кода на основе .NET. Синтаксис Razor состоит из синтаксиса HTML, C# и Razor, который обычно начинается с символа @ . Файлы, содержащие Razor, обычно имеют .cshtml расширение файла (используется в разработке на стороне сервера с razor Pages и MVC) или .razor расширение при использовании в файлах компонентов Razor. Синтаксис Razor похож на механизмы шаблонов различных платформ одностраничных приложений JavaScript (SPA), таких как Angular, React, VueJs и Svelte.

Перечислите компоненты Razor.

Компонент Razor определяет повторно используемый элемент веб-интерфейса. Компоненты Blazor аналогичны компонентам React и Angular в платформах SPA.

Когда вы изучите проект, то увидите различные компоненты Razor, определенные в файлах с расширением .razor.

При компиляции все компоненты Razor встраиваются в класс .NET. Класс содержит общие элементы пользовательского интерфейса, такие как состояние, логика преобразования, методы жизненного цикла и обработчики событий.

Пример "Счетчик"

В работающем приложении перейдите на страницу счетчика, выбрав вкладку "Счетчик " на боковой панели слева. Затем должна отображаться следующая страница:

Нажмите кнопку Щелкните здесь, чтобы увеличить значение счетчика без обновления страницы. Обычно для увеличения значений счетчика на веб-странице требуется код JavaScript, однако с Blazor можно использовать C#.

Реализацию Counter компонента можно найти на странице Components/Pages/Counter.razor.

@page "/counter"

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Запрос /counter в браузере, как указано в директиве @page в верхней части, заставляет компонент Counter визуализировать свое содержимое.

При каждом нажатии кнопки Щелкните здесь:

• Запускается событие onclick.
• вызывается метод IncrementCount .
• Переменная currentCount увеличивается.
• Компонент обновляется с отображением актуального значения счетчика.