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

Question

我正在使用 asp.net 核心 3.1 开发 blazor 客户端项目。并希望使用代码隐藏 class。我找到了一个处理这个主题的例子，但我认为它已经过时并且与客户端 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。但是，您不必从基础 class (ComponentBase) 派生 class：编译器会自动完成。出于这个原因，OnParametersSetAsync 也不可用。

下面解释了如何使用 Blazor 的新部分 class 功能来将逻辑与视图分开：

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

EditBookModel.razor

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

@page "/editbookmodel"

<h1>Free Books</h1>

这是 class 定义为部分代码的背后代码。将所有 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 页面访问变量背后的代码” 您在 class 文件 EditBookModel.razor.cs 后面添加代码的命名空间似乎不正确。需要在命名空间中添加子文件夹名称。例如，如果项目名称是 MyProject 并且 razor 文件位于 Pages 文件夹下，class 命名空间后面的代码应该是 MyProject.Pages

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

How to create a code behind file for Blazor client side

blazor

blazor-client-side

EditBookModel.razor

EditBookModel.razor.cs