[[oktatas:web|< Web]]

====== Blazor ======

  * **Szerző:** Sallai András
  * Copyright (c) 2022, Sallai András
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|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:
<code>
@page "/"
@inject HttpClient Http
</code>

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

Kód és logika:
<code>
@code {
    private string cim = "Valami";
    Valami valami;
}
</code>

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

<code razor>

<label>Név:</label>
<input @bind-value="nev">

<p>
Név újra: @nev
</p>


@code {
   string nev = "Barbara";
}
</code>


Ha szeretnénk, hogy a bevitellel egy időben változzon a minden kötés:
<code>
<input type="text" class="form-control" 
@bind-value="nev" 
@bind-value:event="oninput"><br>
</code>


Egyszerűsíthető:
<code>
<input type="text" class="form-control" 
@bind="nev" 
@bind:event="oninput"><br>
</code>

==== Jelölőnégyzet ====

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

<br>

Van kocsija: @haveCar
</code>

==== Rádiógomb ====

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

==== Objektum ====

<code csharp Data/Employee.cs>
namespace app03.Data;

public class Employee
{
    public string? name { get; set; }
    public string? city { get; set; }
    public double salary { get; set; }
    
}
</code>


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

==== Objektumok listában ====

<code csharp Data/Employee.cs>
namespace app03.Data;

public class Employee
{
    public string? name { get; set; }
    public string? city { get; set; }
    public double salary { get; set; }
    
}
</code>


<code razor 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}
        };
}
</code>

===== Forrás =====

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