« Blazor » : différence entre les versions

De Banane Atomic
Aller à la navigationAller à la recherche
Aucun résumé des modifications
Ligne 14 : Ligne 14 :
* Ne recharge pas la page lors de modification, il faut relancer le serveur.}}
* Ne recharge pas la page lors de modification, il faut relancer le serveur.}}


== [https://webassembly.org/ WebAssembly] ==
= [https://www.c-sharpcorner.com/article/blazor-server-vs-blazor-webassembly-pros-and-cons-of-each-approach/ Blazor Server Pros / Cons] =
Permet d'exécuter du bytecode (code intermediaire) dans le navigateur grâce à la javascript runtime sandbox.<br>
{{ListPlusMinus|type=plus|list=
WebAssembly est nativement présent dans les navigateurs moderne.<br>
* .NET-based web framework that uses the C# and Razor languages.
WebAssembly possède un runtime .NET (mono.wasm), ce qui permet d'exécuter des assemblies .NET dans le navigateur.
* easy integration of Javascript libraries with JSInterop
 
}}
= [https://blazor.net/docs/get-started.html Environnement de développement] =
{{ListPlusMinus|type=minus|list=
* .NET Core 2.1 SDK (2.1.300 or later)
* it requires a constant connection to the server, which can be a disadvantage if the user has a weak or unreliable internet connection.
* Visual Studio 2017 (15.7 or later) with the ASP.NET and web development workload selected.
* scaling the application can be more challenging as it requires more server resources to support many users.
* 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
 
<kode lang='ps'>
# en ligne de commande
dotnet new -i Microsoft.AspNetCore.Blazor.Templates
dotnet new blazor -o BlazorApp
cd BlazorApp
dotnet run
</kode>
 
= [https://docs.microsoft.com/en-us/aspnet/core/blazor/components/event-handling?view=aspnetcore-3.1 Bouton] =
<kode lang='cshtml'>
<p>Current count: @currentCount</p>
 
<button @onclick="IncrementCount">Click me</button>
<button @onclick="IncrementCountAsync">Click me</button>
 
@functions {
    int currentCount = 0;
 
    void IncrementCount()
    {
        currentCount++;
    }
 
    async Task IncrementCountAsync()
    {
        // ...
    }
}
</kode>
 
= Component =
<filebox fn='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");
    }
}
</filebox>
 
= 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
 
= [https://github.com/iconic/open-iconic Open Iconic] =
* [https://www.nsbasic.com/app/OpenIconic.html icons]

Version du 26 octobre 2023 à 20:53

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.

Blazor Server Pros / Cons

  • .NET-based web framework that uses the C# and Razor languages.
  • easy integration of Javascript libraries with JSInterop
  • it requires a constant connection to the server, which can be a disadvantage if the user has a weak or unreliable internet connection.
  • scaling the application can be more challenging as it requires more server resources to support many users.
Récupérée de « http://wiki.bananeatomic.fr/index.php?title=Blazor&oldid=29619 »