Blazor

De Banane Atomic
Aller à la navigationAller à la recherche

Liens

Description

  • Développement frontend avec C#
  • Intégration des bibliothèques .NET existantes (nuget)
  • Pas de debug avec VScode
  • Ne recharge pas la page lors de modification, il faut relancer le serveur.

WebAssembly

Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.
WebAssembly est nativement présent dans les navigateurs moderne.
WebAssembly possède un runtime .NET (mono.wasm), ce qui permet d'exécuter des assemblies .NET dans le navigateur.

Environnement de développement

  • .NET Core 2.1 SDK (2.1.300 or later)
  • Visual Studio 2017 (15.7 or later) with the ASP.NET and web development workload selected.
  • Blazor Language Services extension from the Visual Studio

Créer un nouveau projet:

  • File → New Project → Web → ASP.NET Core Web Application
  • .NET Core → ASP.NET Core 2.1 → Blazor
Ps.svg
# en ligne de commande
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp
cd BlazorApp
dotnet run

Bouton

Cshtml.svg
<p>Current count: @currentCount</p>

<button onclick="@IncrementCount">Click me</button>

@functions {
    int currentCount = 0;

    void IncrementCount()
    {
        currentCount++;
    }
}

Component

MyComponent.cshtml
<!-- gère les requêtes /mypage -->
@page "/mypage"

<!-- injection de dépendance d'une instance de HttpClient -->
@inject HttpClient Http

<p>Some HTML code</p>

<!-- insère un autre composant -->
<OtherComponent OtherParameter="10" />

@functions {
    // Paramètre du composant
    [Parameter]
    private int MyParameter { get; set; } = 1;

    // Some C# code

    protected override async Task OnInitAsync()
    {
        var myObject = await Http.GetJsonAsync<MyClass[]>("file.json");
    }
}

Arborescence des fichiers

  • Startup.cs
  • Program.cs
  • App.cshtml
  • _ViewImports.cshtml
  • global.json
  • Pages
    • Index.cshtml
    • _ViewImports.cshtml
  • Shared
    • MainLayout.cshtml
  • wwwroot
    • index.html
    • css
      • site.css

Open Iconic