feat : Blazor projet

Blazor/Blazor/Blazor.csproj

@@ -6,4 +6,11 @@
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>
 
+  <ItemGroup>
+    <PackageReference Include="Blazored.LocalStorage" Version="4.4.0" />
+    <PackageReference Include="Blazorise.Bootstrap" Version="1.4.0" />
+    <PackageReference Include="Blazorise.DataGrid" Version="1.4.0" />
+    <PackageReference Include="Blazorise.Icons.FontAwesome" Version="1.4.0" />
+  </ItemGroup>
+
 </Project>

Blazor/Blazor/Models/Administrator.cs

@@ -0,0 +1,6 @@
+namespace Blazor.Models
+{
+    public class Administrator
+    {
+    }
+}

Blazor/Blazor/Models/Answer.cs

@@ -0,0 +1,6 @@
+namespace Blazor.Models
+{
+    public class Answer
+    {
+    }
+}

Blazor/Blazor/Models/Chapter.cs

@@ -0,0 +1,8 @@
+namespace Blazor.Models
+{
+    public class Chapter
+    {
+        public int Id { get; set; }
+        public string Name { get; set; }
+    }
+}

Blazor/Blazor/Models/Player.cs

@@ -0,0 +1,6 @@
+namespace Blazor.Models
+{
+    public class Player
+    {
+    }
+}

Blazor/Blazor/Pages/Administrators.razor

@@ -0,0 +1,7 @@
+@page "/Administrators"
+
+<h3>Component</h3>
+
+@code {
+
+}

Blazor/Blazor/Pages/Administrators.razor.cs

@@ -0,0 +1,6 @@
+namespace Blazor.Pages
+{
+    public class ListAdministrators
+    {
+    }
+}

Blazor/Blazor/Pages/Chapters.razor

@@ -0,0 +1,16 @@
+@page "/chapters"
+@using Blazor.Models;
+@using Blazorise.DataGrid
+<h3>Chapters</h3>
+
+<DataGrid TItem="Chapter"
+          Data="@chapters"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="Chapter" Field="@nameof(Chapter.Id)" Caption="#" />
+    <DataGridColumn TItem="Chapter" Field="@nameof(Chapter.Name)" Caption="Display name" />
+</DataGrid>
+

Blazor/Blazor/Pages/Chapters.razor.cs

@@ -0,0 +1,37 @@
+using Microsoft.AspNetCore.Components;
+using Blazor.Models;
+using Blazorise.DataGrid;
+
+namespace Blazor.Pages
+{
+    public partial class Chapters
+    {
+        public List<Chapter> chapters;
+
+        private int totalItem;
+
+        [Inject]
+        public HttpClient Http { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Chapter> e)
+        {
+            if (e.CancellationToken.IsCancellationRequested)
+            {
+                return;
+            }
+
+            // When you use a real API, we use this follow code
+            //var response = await Http.GetJsonAsync<Item[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
+            var response = (await Http.GetFromJsonAsync<Chapter[]>($"{NavigationManager.BaseUri}fake-data.json")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItem = (await Http.GetFromJsonAsync<List<Chapter>>($"{NavigationManager.BaseUri}fake-data.json")).Count;
+                chapters = new List<Chapter>(response); // an actual data for the current page
+            }
+        }
+    }
+}

Blazor/Blazor/Program.cs

@@ -1,4 +1,8 @@
 using Blazor.Data;
+using Blazored.LocalStorage;
+using Blazorise;
+using Blazorise.Bootstrap;
+using Blazorise.Icons.FontAwesome;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Web;
 
@@ -9,6 +13,15 @@ builder.Services.AddRazorPages();
 builder.Services.AddServerSideBlazor();
 builder.Services.AddSingleton<WeatherForecastService>();
 
+builder.Services.AddHttpClient();
+
+builder.Services
+   .AddBlazorise()
+   .AddBootstrapProviders()
+   .AddFontAwesomeIcons();
+
+builder.Services.AddBlazoredLocalStorage();
+
 var app = builder.Build();
 
 // Configure the HTTP request pipeline.

Blazor/Blazor/Shared/NavMenu.razor

@@ -15,8 +15,8 @@
             </NavLink>
         </div>
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="counter">
-                <span class="oi oi-plus" aria-hidden="true"></span> Counter
+            <NavLink class="nav-link" href="chapters">
+                <span class="oi oi-plus" aria-hidden="true"></span> Chapters
             </NavLink>
         </div>
         <div class="nav-item px-3">

Blazor/Blazor/_Imports.razor

@@ -8,3 +8,5 @@
 @using Microsoft.JSInterop
 @using Blazor
 @using Blazor.Shared
+@using Blazorise.DataGrid
+