< Web

Blazor

Szerző: Sallai András

Copyright © 2022, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

A Blazor

A Blazor egy szabad és nyílt forráskódú webes keretrendszer, ami 2018-ban jelent meg. A Blazor lehetővé teszik webalkalmazás fejlesztését C# nyelven.

A Blazort az ASP.NET Core biztosítja. A kliensoldali része WebAssembly-ben fut.

A Blazor segítségével SPA alkalmazás készíthető .NET alapokon. A Blazor a Razor Templating Engine-t használja.

A Blazor projekt típusok:

Server

WASM

Server

Szerveroldali renderelés (SSR, Server-Side Rendering)

Régebbi böngészőkben is működik.

API/Server kód privát

Sok memóriát igényel

Nincs offline támogatása

WASM

natív sebesség

osztott kód

nincs szerveroldali függőség

modern böngészőre van szükség

hiányzik az élő újrtöltés

Összetevők

Direktívák:

@page "/"
@inject HttpClient Http

Markup és Razor:

<h1>@cim</h1>
@if (valami = null)
{
<p>Töltés</p>
}

Kód és logika:

@code {
private string cim = "Valami";
Valami valami;
}

Fejlesztéshez

.Net SDK ellenőrzése

dotent --version

VSCode bővítmény

Blazor Snippet Pack

Alkalmazás készítése

dotnet new blazorserver -o App01 --no-https
cd app01

A következő állományokat találjuk:

Program.cs - A program belépésipontja

App.razor - Az alkalmazás fő komponense

Pages/ - Néhány példa weblapokra

App01.csproj - a projekt leírása, függőségekkel

Properties/launchSettings.json - helyi beállítások

A port száma 5000-5300 között lehet. A Blazor alkalmazások komponenseit lapoknak hívjuk. Minden lapot a „Pages” könyvtárba helyezünk.

Minden Blazor komponens egy fájl. A tartalma könnyedén létrehozható a „Blazor Snippet Pack” VScode bővítménnyel, csak kezdjük el gépelni:

blcomp

Futtatás

dotnet watch

A futtatás a Ctrl+C billentyűkombinációval szakítható meg.

Böngészőbe:

http://localhost:<port száma>

Például:

http://localhost:5000

Adatkötés

<label>Név:</label> <input @bind-value="nev"> <p> Név újra: @nev </p> @code { string nev = "Barbara"; }

Ha szeretnénk, hogy a bevitellel egy időben változzon a minden kötés:

<input type="text" class="form-control"
@bind-value="nev"
@bind-value:event="oninput"><br>

Egyszerűsíthető:

<input type="text" class="form-control"
@bind="nev"
@bind:event="oninput"><br>

Jelölőnégyzet

<label>
<input type="checkbox" @bind-value="haveCar">
&nbsp; Van kocsija
</label>
<br>
Van kocsija: @haveCar

Rádiógomb

@page "/radiogomb"
<h1>Rádiógomb</h1>
<label>
<input type="radio"
value="1"
name="diploma"
checked="@(piece == 1)"
@onclick="@(()=>piece=1)"
>1
</label>
<label>
<input type="radio"
value="2"
name="diploma"
checked="@(piece == 2)"
@onclick="@(()=>piece=2)"
>2
</label>
<br>
Diploma: @piece
@code {
int piece = 1;
}

Objektum

namespace app03.Data; public class Employee { public string? name { get; set; } public string? city { get; set; } public double salary { get; set; } }

@page "/valami"
<h1>Valami</h1>
<p>
Név: @employee.name
</p>
<p>
Település: @employee.city
</p>
@using Data
@code {
Employee employee = new Employee()
{
name = "Némó Károly",
city = "Szeged",
salary = 2875000
};
}

Objektumok listában

namespace app03.Data; public class Employee { public string? name { get; set; } public string? city { get; set; } public double salary { get; set; } }
@page "/employees" <table class="table"> <tr> <th>Név</th> <th>Település</th> <th>Fizetés</th> </tr> @foreach (var emp in emps) { <tr> <td>@emp.name</td> <td>@emp.city</td> <td>@emp.salary</td> </tr> } </table> @using Data @code { Employee[] emps = new Employee[] { new Employee() {name= "Róbert", city = "Szeged", salary = 2475000}, new Employee() {name= "Tamás", city = "Szolnok", salary = 2475000} }; }

Forrás

* https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/intro (2022)