« Blazor » : différence entre les versions
De Banane Atomic
Aller à la navigationAller à la recherche
(→Liens) |
(Aucune différence)
|
Version du 17 septembre 2018 à 15:19
Liens
- 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
|
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