Blazor

• Szerző: Sallai András
• Copyright © 2022, Sallai András
• Licenc: CC Attribution-Share Alike 4.0 International
• Web: https://szit.hu

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

• 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

• 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

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;
}

dotent --version

• Blazor Snippet Pack

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

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

<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>

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

<br>

Van kocsija: @haveCar

@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;
}

Data/Employee.cs

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
    };
}

Data/Employee.cs

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

Pages/Employees.razor

@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}
        };
}

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