Oddzielenie Kodu C# Od Widoku w Blazorze

Jeżeli założysz sobie nowy projekt Blazor Web App (możesz dowolną tryb renderowania oraz dowolną lokalizacje renderowania), to w szablonie, np. w komponencie Counter.razor  możesz zauważyć, że w jednym pliku mamy tutaj zarówno kod razora, czyli głównie HTML, a także na dole kod typowo C#. Także mieszamy w jednym pliku kod typowo frontendowy z tzw. code-behind, a to nie jest dobrą praktyką. Powinniśmy rozdzielić tutaj odpowiedzialności i każda część powinna być w osobnym pliku. W tym artykule pokaże Ci, jak poprawić to w Blazor'ze.

Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }
}

Rozdzielenie odpowiedzialności

Na szczęście w Blazor możemy bez problemu rozdzielić odpowiedzialności w naszych klasach. Bez problemy możemy rozdzielić kod typowo frontendowy od kodu C#, dzięki czemu całość będzie zgodna z najlepszy praktykami pisania kodu.

W tym celu musimy dodać nowy plik o takiej samej nazwie, jak nazwa komponentu, tylko z rozszerzeniem razor.cs.

Także dodajmy w tym przypadku nowy plik o nazwie: Counter.razor.cs

namespace BlazorApp.Client.Pages
{
    public class Counter
    {
    }
}

W tym momencie Visual Studio zgłasza nam błąd i aby go poprawić musimy oznaczyć naszą klasę słowem kluczowym - partial.

namespace BlazorApp.Client.Pages
{
    public partial class Counter
    {
    }
}

W tym momencie błąd zniknął. Możemy przenieść kod C# z widoku do klasy C#. I tak będą wyglądały nasze pliki.

Counter.razor

@page "/counter"

<PageTitle>Counter</PageTitle>

<h1>Counter</h1>

<p role="status">Current count: @currentCount</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

Counter.razor.cs

namespace BlazorApp.Client.Pages
{
    public partial class Counter
    {
        private int currentCount = 0;

        private void IncrementCount()
        {
            currentCount++;
        }
    }
}

Nie mamy żadnego błędu i jeżeli uruchomisz aplikację, to zobaczysz, że wszystko działa tak samo jak wcześniej.

Podsumowanie

Wszystko działa i taki kod jest zgodny z najlepszymi praktykami i tak właśnie będziemy tworzyć nasze widoki i kod w C# rozwijając aplikacje w Blazor'ze.

W pliku z samym rozszerzeniem razor będzie widok, a w pliku z rozszerzeniem razor.cs będzie logika aplikacji, czyli kod C#.

Szkoła Blazora

Przy okazji, jeżeli chciałbyś poznać Blazor'a od podszewki, to rozważ dołączenie do mojego szkolenia online - Szkoła Blazora (tutaj więcej informacji - https://szkolablazora.pl).