Source: https://boldare.tech/net-in-my-browser/

First run

Let’s create a new standalone project. Once that’s done, you can launch it by either using ctrl + F5 in Visual Studio or dotnet run CLI command. Either way, you will know all went well if the following appears in your browser:

[Your first Blazor app]

Should the app fail to run, it is worth checking if there are conflicting .NET Core runtime versions. Uninstalling the old ones should help.

As of now, there’s no live reload support. If you’re using Visual Studio, then app should rebuild automagically when you refresh the page and changes are detected. For CLI users, you will need to add

＜Watch Include="***.cshtml" />

under ＜ItemGroup> tag in your project’s .csproj file and run the app using dotnet watch run command.

Components

Pages

In Blazor, everything is a component, be it a layout, a page or, well, a component. Let’s inspect Counter.cshtml sitting in Pages folder. The code should look similar to this:

@page "/counter"

＜h1>Counter＜/h1>

＜p>Current count: @currentCount＜/p>

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

@functions {
int currentCount = 0;

void IncrementCount()
{
currentCount++;
}
}

The code should be familiar to anyone who had worked with Razor before which should not be a surprise, given that Blazor = browser + Razor. Click the button and you’ll see the counter increment just as you would expect, given the C# code above. Yes, C#!

Let’s deconstruct the code piece by piece.

@page "/counter" directive tells Blazor that this component is a page and can be routed to.

＜h1>Counter is good ol’ plain HTML, no surprises here, unless you’re easily startled by headers or XML tags in general.

＜p>Current count: @currentCount＜/p> is where the interesting stuff begins. The @currentCount is a reference to the field defined in the @functions block below and will cause the current value in the variable to be rendered there.

＜button class="btn btn-primary" onclick="@IncrementCount">Click me＜/button> is where we see the onclick event handler which is also a reference to the IncrementCount() method below.

Finally, there’s the @functions block where we define our variables, parameters, functions, etc.

Źródło: https://boldare.tech/net-in-my-browser/

Pierwsze uruchomienie

Utwórzmy nowy niezależny projekt. Po wykonaniu tej czynności można go uruchomić używając kombinacji ctrl + F5 w Visual Studio lub polecenia CLI dotnet run. W obydwu przypadkach, powodzenie operacji powinno zostać potwierdzone wyświetleniem się następującego ekranu w przeglądarce:

[Twoja pierwsza apka w Blazorze]

Jeśli aplikacja nie uruchomi się, warto sprawdzić czy nie są zainstalowane wersje .NET Core, mogące powodować konflikt. Odinstalowanie starszych wersji powinno rozwiązać problem.

Na chwilę obecną automatyczne przeładowywanie strony nie jest wspierane. W przypadku Visual Studio aplikacja powinna zrekompilować się automagicznie, gdy po odświeżeniu strony zostaną wykryte zmiany. Użytkownicy korzystający z CLI będą musieli dodać

＜Watch Include="***.cshtml" />

pod tagiem ＜ItemGroup> w pliku .csproj i uruchomić aplikację używając komendy dotnet watch run.

Składniki

Strony

W Blazorze wszystko jest składnikiem, zarówno układ, strona lub właśnie sam składnik. Przeanalizujmy Counter.cshtml z folderu Pages. Kod powinien wyglądać podobnie do poniższego:

@page "/counter"

＜h1>Licznik＜/h1>

＜p>Wartość licznika: @currentCount＜/p>

＜button class="btn btn-primary" onclick="@IncrementCount">Kliknij mnie＜/button>

@functions {
int currentCount = 0;

void IncrementCount()
{
currentCount++;
}
}

Kod powinien wyglądać znajomo dla każdego, kto pracował kiedykolwiek z Razorem, gdyż Blazor = przeglądarka + Razor. Naciśnij przycisk, a zobaczysz zwiększającą się wartość licznika, tak jak można było się spodziewać, patrząc na kod w C# powyżej. Tak, C#!

Przeanalizujmy kod linijka po linijce.

Zlecenie @page "/counter" komunikuje Blazorowi, że ten składnik jest stroną i można utworzyć do niego trasę.

＜h1>Counter＜/h1> to stary, dobry HTML, nie ma tu żadnych niespodzianek, chyba że przerażają was nagłówki lub tagi XML.

Przy ＜p>Wartość licznika: @currentCount＜/p> zaczynają dziać się ciekawe rzeczy. @currentCount odnosi się do pola zdefiniowanego w bloku @functions poniżej i spowoduje w tym miejscu wyświetlenie obecnej wartości zmiennej.

W miejscu ＜button class="btn btn-primary" onclick="@IncrementCount">Kliknij mnie＜/button> widzimy uchwyt zdarzenia onclick, który jest również odwołaniem do poniższej metody IncrementCount().

Na końcu znajduje się blok @functions, gdzie definiujemy nasze zmienne, parametry, funkcje itp.