Из чего состоит оверлей

Создайте ауру и добавьте C# Overlay v3. В его редакторе используйте UserOverlay.cs и UserOverlay.razor ниже как две части одного класса в одном пространстве имён. При нажатии Click Me счётчик должен увеличиваться.

Когда вы добавляете новый оверлей, EyeAuras автоматически создает несколько файлов. Каждый из них важен для работы программы.

Script.csx

Это точка входа скриптовой части оверлея. Не используйте её как событие каждого показа или скрытия окна: компиляция и исполнение скрипта живут отдельно от перерисовки Razor-компонента.

Для счётчика его можно оставить пустым. При желании здесь удобно инициализировать данные, читать информацию и выполнять общую подготовку. То же самое можно делать и в коде окна/компонента, но иногда полезно иметь единую точку входа.

Log.Debug("This script is entry point for Overlay");

UserOverlay.cs

using PoeShared.Blazor;

public partial class UserOverlay : BlazorReactiveComponent {
    private int count = 0;

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

Это файл code-behind. Большинство Razor-компонентов состоят из двух частей — *.razor и *.cs. В части Razor обычно находится разметка Razor/HTML/CSS, а в файле *.cs — методы, поля и свойства, доступные из разметки.

Примечание: вы можете писать C# прямо внутри *.razor и не использовать *.cs, но в этой серии логика вынесена в *.cs, чтобы разметка оставалась небольшой. Возможности подсказок редактора зависят от версии EyeAuras.

Разберем код по частям:

public partial class UserOverlay : BlazorReactiveComponent

Это объявление класса. Чтобы EyeAuras смог его найти, класс должен быть public. Поскольку у него есть вторая часть (*.razor), он должен быть partial, то есть класс разделен между несколькими файлами. Наконец, : BlazorReactiveComponent задает базовый класс — к нему мы еще вернемся.

private int count = 0;

Здесь мы объявляем поле, в котором хранится количество нажатий кнопки.

Примечание: значение этого поля сохраняется на протяжении всей жизни оверлея. Если аура выгружается или оверлей уничтожается, значение сбрасывается.

private void IncrementCount()
{
    count++;
}

Этот метод просто увеличивает счетчик, чтобы мы могли отслеживать клики.

UserOverlay.razor

@using Microsoft.AspNetCore.Components.Web
@using PoeShared.Blazor
@inherits BlazorReactiveComponent

<h3 class="text-center">Interactive Counter</h3>

<div class="text-center mt-4">
    <button @onclick="IncrementCount" class="btn btn-primary btn-lg">
        Click Me
    </button>
</div>

<p class="text-center mt-3" style="font-size: 1.5rem;">
    You clicked <strong>@count</strong> times!
</p>

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

@inherits BlazorReactiveComponent

Эта строка говорит Blazor использовать BlazorReactiveComponent (предоставляемый EyeAuras) в качестве базового класса. Это необязательно, но настоятельно рекомендуется, если вам нужен доступ к дополнительным возможностям.

<h3 class="text-center">Interactive Counter</h3>

Просто заголовок по центру.

<div class="text-center mt-4">
    <button @onclick="IncrementCount" class="btn btn-primary btn-lg">
        Click Me
    </button>
</div>

Самое интересное здесь — @onclick="IncrementCount", это привязка обработчика клика. Каждый клик увеличивает count на 1.

<p class="text-center mt-3" style="font-size: 1.5rem;">
    You clicked <strong>@count</strong> times!
</p>

И финальная часть: отображение текущего значения count — той самой переменной, которую мы увеличиваем при нажатии кнопки.

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

Log в Script.csx — член среды скрипта. Обычный UserOverlay его не наследует. Совпадение имён файлов или using не связывает поля скрипта с компонентом; передавайте модель через DataContext при создании окна либо внедряйте нужный сервис. Для ручного запроса перерисовки в BlazorReactiveComponent используйте await Refresh("причина"); для внешних изменений нужен наблюдаемый источник. Далее — управление триггером.