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.

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