« Blazor » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Ligne 16 : Ligne 16 :
Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.<br>
Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.<br>
WebAssembly est nativement présent dans les navigateurs moderne.
WebAssembly est nativement présent dans les navigateurs moderne.
WebAssembly possède un runtime .NET, ce qui permet d'exécuter des assemblies .NET dans le navigateur.


= [https://blazor.net/docs/get-started.html Environnement de développement] =
= [https://blazor.net/docs/get-started.html Environnement de développement] =

Version du 9 janvier 2020 à 21:23

Liens

Description

  • Développement frontend avec C#
  • Sans transpilation ni plugin, utilise WebAssembly
  • 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, 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