Blazor
De Banane Atomic
Aller à la navigationAller à la recherche
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#
- Intégration des bibliothèques .NET existantes (nuget)
 |
|
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
|
# 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>
<button @onclick="IncrementCountAsync">Click me</button>
@functions {
int currentCount = 0;
void IncrementCount()
{
currentCount++;
}
async Task IncrementCountAsync()
{
// ...
}
}
|
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
