Blazor

Liens

• Introduction to ASP.NET Core Blazor
• How to implement JavaScript Interop in Blazor
• How to create an application using Blazor and Entity Framework Core
• ASP.NET Core Blazor CRUD using Entity Framework and Web API

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

# en ligne de commande dotnet new -i Microsoft.AspNetCore.Blazor.Templates dotnet new blazor -o BlazorApp cd BlazorApp dotnet run

Bouton

<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