Как разбить слишком большой класс в Blazor с использованием partial?

Question

У меня есть Blazor-компонент с partial-классом, который стал слишком большим (более 1000 строк) и содержит много логики: обработчики для кнопок, методы для работы с таблицей (grid), инициализацию данных и т.д. Я хотела бы разделить его на несколько файлов, чтобы упростить поддержку кода и улучшить читаемость.

Можно ли создать несколько файлов с partial-классами для одного и того же компонента, чтобы разделить логику? Если да, как правильно это сделать?

Answer 1

Да, в Blazor можно использовать несколько partial-классов для одного компонента, чтобы разделить логику на разные файлы. Все классы с одинаковым именем и модификатором partial будут восприняты компилятором как один класс.

Вот как выглядит "дерево"

"Основной" partial класс наследует : IAsyncDisposable и содержит основные методы загрузки

namespace Blazor9.Components.Pages.MyComponent1
{
    public partial class MyPageRazor : IAsyncDisposable
    {

        [Inject]
        public IMyService? myService{ get; set; }

        protected override async Task OnInitializedAsync()
        {
            await LoadGridData();
        }

        public async ValueTask DisposeAsync()
        {
        }
    }
}

MyPageRazor.Button.cs, как видно уже ничего не наследует, и название класса MyPageRazor

namespace Blazor9.Components.Pages.MyComponent1
{
    public partial class MyPageRazor
    {
        private void OnButtonClick()
        {
            Console.WriteLine("Button clicked!");
        }
    }
}

и третий partial класс, к примеру для логики таблицы MyPageRazor.Grid.cs

namespace Blazor9.Components.Pages.MyComponent1
{
    public partial class MyPageRazor
    {
        public List<GridDataModel> GridData { get; set; } = new();

        private async Task LoadGridData()
        {
            GridData = await myService.LoadDataAsync();
            StateHasChanged();
        }
    }
}

сама разметка MyPageRazor.razor для наглядности

@page "/mypage"

@rendermode InteractiveServer

<h3>My Page</h3>

<button @onclick="OnButtonClick">Click Me</button>

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in GridData)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
            </tr>
        }
    </tbody>
</table>

БЛОГ НА HUSL

Как разбить слишком большой класс в Blazor с использованием partial?

Ответы (1 шт):