blazor - 如何为 Blazor 客户端创建代码隐藏文件

Question

我正在使用 asp.net core 3.1 开发一个 blazor 客户端项目。并想使用代码隐藏类。
我找到了一个处理这个主题的例子，但我认为它已经过时并且与客户端 blazor 无关。

这是一个例子

@functions 
{
    [Parameter]
    string Id { get; set; }

    string PageTitle { get; set; }
    Book CurrentBook { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        if (Id == null || Id == "0")
        {
            PageTitle = "Add book";

            CurrentBook = new Book();
        }
        else
        {
            PageTitle = "Edit book";

            await LoadBook(int.Parse(Id));
        }
    }

    private async Task LoadBook(int id)
    {
        CurrentBook = await Http.GetJsonAsync<Book>("/Books/Get/" + id);
    }

    private async Task Save()
    {
        await Http.PostJsonAsync("/Books/Save", CurrentBook);

        UriHelper.NavigateTo("/");
    }
}

现在我想将此代码从 Razor 页面移动到后面的代码，看起来像这样

    public class EditBookModel : BlazorComponent
    {
        [Inject]
        protected IUriHelper UriHelper { get; set; }

        [Inject]
        protected HttpClient Http { get; set; }

        [Parameter]
        protected string Id { get; private set; } = "0";
        protected string PageTitle { get; private set; }
        protected Book CurrentBook { get; set; }

        protected override async Task OnParametersSetAsync()
        {
            if (Id == null || Id == "0")
            {
                PageTitle = "Add book";
                CurrentBook = new Book();                
            }
            else
            {
                PageTitle = "Edit book";

                await LoadBook(int.Parse(Id));
            }
        }

        protected async Task LoadBook(int id)
        {
            CurrentBook = await Http.GetJsonAsync<Book>("/Books/Get/" + id);
        }

        protected async Task Save()
        {
            await Http.PostJsonAsync("/Books/Save", CurrentBook);

            UriHelper.NavigateTo("/");
        }
    }

不幸的是，没有可以从 ie 继承的 BlazorComponent。 OnParametersSetAsync 不可用。

任何建议如何使这项工作？

Answer 1

BlazorComponent 已过时。请改用 ComponentBase。但是，您不必从基类 (ComponentBase) 派生类:编译器会自动执行此操作。正是因为这个原因， OnParametersSetAsync 也不可用。

下面解释了如何使用 Blazor 的新部分类功能来将逻辑与 View 分离:

定义组件的 View 部分。这可能包含 Razor 语法和 Html 内容。

EditBookModel.razor

// Place here Razor code and HTML for your view...

@page "/editbookmodel"

<h1>Free Books</h1>

这是定义为部分的类背后的代码。将所有 C# 逻辑移至此处。您不必从 ComponentBase 继承。编译器为你做这件事。

编辑BookModel.razor.cs

public partial class EditBookModel 
{
    [Inject]
    protected IUriHelper UriHelper { get; set; }

    [Inject]
    protected HttpClient Http { get; set; }

    [Parameter]
    protected string Id { get; private set; } = "0";
    protected string PageTitle { get; private set; }
    protected Book CurrentBook { get; set; }

    protected override async Task OnParametersSetAsync()
    {
        if (Id == null || Id == "0")
        {
            PageTitle = "Add book";
            CurrentBook = new Book();                
        }
        else
        {
            PageTitle = "Edit book";

            await LoadBook(int.Parse(Id));
        }
    }

    protected async Task LoadBook(int id)
    {
        CurrentBook = await Http.GetJsonAsync<Book>("/Books/Get/" + id);
    }

    protected async Task Save()
    {
        await Http.PostJsonAsync("/Books/Save", CurrentBook);

        UriHelper.NavigateTo("/");
    }
}