How to create a code behind file for Blazor client side

Question

I am working on a blazor client-side project using asp.net core 3.1. and would like to use code-behind class. I found an example that handles this topic, but I believe it is outdated and not related to client-side blazor.

Here is an example

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

Now I want to move this code from razor page to code behind that would look like this

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

Unfortunately there is no BlazorComponent to inherit from ie. OnParametersSetAsync is unavailable.

Any suggestions how to make this work?

Answer 1

BlazorComponent is obsolete. Use ComponentBase instead. However, you don't have to derive your class from the base class (ComponentBase): The compiler does it automatically. For this very reason the OnParametersSetAsync is also not available.

The following explain how you can employ the new partial class feature of Blazor in order to separate the logic from the view:

Define the view portion of your component. This may contain Razor syntax and Html content.

EditBookModel.razor

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

@page "/editbookmodel"

<h1>Free Books</h1>

This is the code behind class defined as partial. Move to here all your C# logic. You don't have to inherit from ComponentBase. The compiler does it for you.

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