ajout de la page liste , encore des probleme dessus

blazor
Patrick BRUGIERE 1 year ago
parent eb1415dff5
commit a0b6501e87

@ -2,16 +2,16 @@
{ {
public class User public class User
{ {
private int id { get; set; } public int id { get; set; }
private string password { get; set; } public string password { get; set; }
private string email { get; set; } public string email { get; set; }
private string name { get; set; } public string name { get; set; }
private string surname { get; set; } public string surname { get; set; }
private string nickname { get; set; } public string nickname { get; set; }
private string image { get; set; } public string image { get; set; }
private bool extraTime { get; set; } public bool extraTime { get; set; }
private int group { get; set; } public int group { get; set; }
private string[] roles { get; set; } public string[] roles { get; set; }
} }
} }

@ -1,5 +1,5 @@
@page "/list" @page "/list"
@using Minecraft.Models @using adminBlazor.Models
<!--<script src="_framework/blazor.server.js"></script>!--> <!--<script src="_framework/blazor.server.js"></script>!-->
@ -7,7 +7,6 @@
<link href="_content/Blazorise/blazorise.css" rel="stylesheet" /> <link href="_content/Blazorise/blazorise.css" rel="stylesheet" />
<link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" /> <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
<h3>List</h3> <h3>List</h3>
<div> <div>
@ -17,23 +16,21 @@
</div> </div>
<DataGrid TItem="User" <DataGrid TItem="User"
Data="@users" Data="@_users"
ReadData="@OnReadData" ReadData="@OnReadData"
TotalItems="@totalUser" TotalItems="@totalUser"
PageSize="10" PageSize="10"
ShowPager ShowPager
Responsive> Responsive>
<DataGridColumn TItem="User" Field="@nameof(User.Id)" Caption="ID" /> <DataGridColumn TItem="User" Field="@nameof(User.id)" Caption="#" />
<DataGridColumn TItem="User" Field="@nameof(User.Email)" Caption="Email" /> <DataGridColumn TItem="User" Field="@nameof(User.password)" Caption="Password" />
<DataGridColumn TItem="User" Field="@nameof(User.Name)" Caption="Name" /> <DataGridColumn TItem="User" Field="@nameof(User.email)" Caption="Email" />
<DataGridColumn TItem="User" Field="@nameof(User.Surname)" Caption="Surname" /> <DataGridColumn TItem="User" Field="@nameof(User.surname)" Caption="Surname" />
<DataGridColumn TItem="User" Field="@nameof(User.Nickname)" Caption="Nickname" /> <DataGridColumn TItem="User" Field="@nameof(User.nickname)" Caption="Nickname" />
<DataGridColumn TItem="User" Field="@nameof(User.Image)" Caption="Image" /> <DataGridColumn TItem="User" Field="@nameof(User.image)" Caption="Image" />
<DataGridColumn TItem="User" Field="@nameof(User.ExtraTime)" Caption="Extra Time" /> <DataGridColumn TItem="User" Field="@nameof(User.extraTime)" Caption="Extra Time" />
<DataGridColumn TItem="User" Field="@nameof(User.Group)" Caption="Group" /> <DataGridColumn TItem="User" Field="@nameof(User.group)" Caption="Group" />
<DataGridColumn TItem="User" Field="@nameof(User.Roles)" Caption="Roles"> <DataGridColumn TItem="User" Field="@nameof(User.roles)" Caption="Roles" />
<DisplayTemplate> </DataGrid>
@(string.Join(", ", ((User)context).Roles))
</DisplayTemplate>
</DataGridColumn>
</DataGrid>

@ -1,17 +1,17 @@
using adminBlazor.Models; using Blazored.LocalStorage;
using Blazored.LocalStorage;
using Blazorise.DataGrid; using Blazorise.DataGrid;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using System.Linq; using Microsoft.AspNetCore.Http.Features;
using adminBlazor.Models;
using System.Net.Http; using System.Net.Http;
using System.Net.Http.Json; using System.Net.Http.Json;
using System.Threading.Tasks;
namespace adminBlazor.Pages namespace adminBlazor.Pages
{ {
public partial class List public partial class List
{ {
private User[] users; private List<User> _users;
private int totalUser; private int totalUser;
[Inject] [Inject]
@ -25,7 +25,7 @@ namespace adminBlazor.Pages
protected override async Task OnAfterRenderAsync(bool firstRender) protected override async Task OnAfterRenderAsync(bool firstRender)
{ {
// Do not treat this action if it is not the first render // Do not treat this action if is not the first render
if (!firstRender) if (!firstRender)
{ {
return; return;
@ -36,8 +36,8 @@ namespace adminBlazor.Pages
// Check if data exist in the local storage // Check if data exist in the local storage
if (currentData == null) if (currentData == null)
{ {
// This code adds fake data to local storage (loading data synchronously to initialize before the OnReadData method) // this code add in the local storage the fake data (we load the data sync for initialize the data before load the OnReadData method)
var originalData = await Http.GetFromJsonAsync<User[]>($"{NavigationManager.BaseUri}fake-data.json"); var originalData = Http.GetFromJsonAsync<User[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
await LocalStorage.SetItemAsync("data", originalData); await LocalStorage.SetItemAsync("data", originalData);
} }
} }
@ -49,15 +49,16 @@ namespace adminBlazor.Pages
return; return;
} }
// When you use a real API, you use the following code // When you use a real API, we use this follow code
// var response = await Http.GetJsonAsync<User[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" ); //var response = await Http.GetJsonAsync<Data[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
var response = (await LocalStorage.GetItemAsync<User[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList(); var response = (await LocalStorage.GetItemAsync<User[]>("data")).Skip((e.Page - 1) * e.PageSize).Take(e.PageSize).ToList();
if (!e.CancellationToken.IsCancellationRequested) if (!e.CancellationToken.IsCancellationRequested)
{ {
totalUser = (await LocalStorage.GetItemAsync<User[]>("data")).Length; totalUser = (await LocalStorage.GetItemAsync<List<User>>("data")).Count;
users = response.ToArray(); // actual data for the current page _users = new List<User>(response); // an actual data for the current page
} }
} }
} }
}
}

@ -14,7 +14,7 @@ builder.Services.AddServerSideBlazor();
builder.Services.AddSingleton<WeatherForecastService>(); builder.Services.AddSingleton<WeatherForecastService>();
builder.Services.AddHttpClient(); builder.Services.AddHttpClient();
builder.Services.AddBlazoredLocalStorage();
builder.Services builder.Services
@ -22,7 +22,6 @@ builder.Services
.AddBootstrapProviders() .AddBootstrapProviders()
.AddFontAwesomeIcons(); .AddFontAwesomeIcons();
builder.Services.AddBlazoredLocalStorage();
var app = builder.Build(); var app = builder.Build();

@ -9,6 +9,11 @@
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu"> <div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<nav class="flex-column"> <nav class="flex-column">
<div class="nav-item px-3">
<NavLink class="nav-link" href="list" Match="NavLinkMatch.All">
<span class="oi oi-list-rich" aria-hidden="true"></span> List
</NavLink>
</div>
<div class="nav-item px-3"> <div class="nav-item px-3">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All"> <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home <span class="oi oi-home" aria-hidden="true"></span> Home
@ -24,6 +29,7 @@
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink> </NavLink>
</div> </div>
</nav> </nav>
</div> </div>

@ -8,4 +8,4 @@
@using Microsoft.JSInterop @using Microsoft.JSInterop
@using adminBlazor @using adminBlazor
@using adminBlazor.Shared @using adminBlazor.Shared
@using Blazorise.DataGrid;

Loading…
Cancel
Save