如何为Blazor客户端创建文件背后的代码

2024-05-17 • 问答

我正在使用asp.net core 3.1进行出色的客户端项目。并希望使用代码隐藏类。我找到了一个处理该主题的示例，但我认为它已经过时且与客户端无关。

这是一个例子

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

现在，我要将这段代码从剃须刀页面移到后面的代码中，如下所示

    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不可用。

有什么建议可以做到这一点吗？

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

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

如何为Blazor客户端创建文件背后的代码

liuben1205 回答：如何为Blazor客户端创建文件背后的代码

EditBookModel.razor

EditBookModel.razor.cs

大家都在问