如何为 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 的新部分类功能来将逻辑与视图分离：

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

EditBookModel.razor

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

@page "/editbookmodel"

<h1>Free Books</h1>

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

EditBookModel.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("/");
    }
}

Answer 2

@mko，“我无法从 razor 页面访问变量背后的代码” 您在类文件 EditBookModel.razor.cs 后面添加代码的命名空间似乎不正确。需要在命名空间中添加子文件夹名称。例如，如果项目名称是 MyProject 并且 razor 文件位于 Pages 文件夹下，则类命名空间后面的代码应该是 MyProject.Pages