feat : administrator page

Blazor/Blazor/Pages/Administrators.razor

@@ -1,7 +1,16 @@
-@page "/Administrators"
+@page "/administrators"
+@using Blazor.Models;
+@using Blazorise.DataGrid
+<h3>Administrators</h3>
 
-<h3>Component</h3>
+<DataGrid TItem="Administrator"
+          Data="@administrators"
+          ReadData="@OnReadData"
+          TotalItems="@totalItem"
+          PageSize="10"
+          ShowPager
+          Responsive>
+    <DataGridColumn TItem="Administrator" Field="@nameof(Administrator.Id)" Caption="#" />
+    <DataGridColumn TItem="Administrator" Field="@nameof(Administrator.Username)" Caption="Display userName" />
+</DataGrid>
 
-@code {
-
-}

Blazor/Blazor/Pages/Administrators.razor.cs

@@ -1,6 +1,37 @@
-namespace Blazor.Pages
+using Microsoft.AspNetCore.Components;
+using Blazor.Models;
+using Blazorise.DataGrid;
+
+namespace Blazor.Pages
 {
-    public class ListAdministrators
+    public partial class Administrators
     {
+        public List<Administrator> administrators;
+
+        private int totalItem;
+
+        [Inject]
+        public HttpClient Http { get; set; }
+
+        [Inject]
+        public NavigationManager NavigationManager { get; set; }
+
+        private async Task OnReadData(DataGridReadDataEventArgs<Administrator> 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<Administrator[]>($"{NavigationManager.BaseUri}fake-administrator.json")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
+
+            if (!e.CancellationToken.IsCancellationRequested)
+            {
+                totalItem = (await Http.GetFromJsonAsync<List<Administrator>>($"{NavigationManager.BaseUri}fake-administrator.json")).Count;
+                administrators = new List<Administrator>(response); // an actual data for the current page
+            }
+        }
     }
 }