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
{
private int id { get; set; }
private string password { get; set; }
private string email { get; set; }
private string name { get; set; }
private string surname { get; set; }
private string nickname { get; set; }
private string image { get; set; }
private bool extraTime { get; set; }
private int group { get; set; }
private string[] roles { get; set; }
public int id { get; set; }
public string password { get; set; }
public string email { get; set; }
public string name { get; set; }
public string surname { get; set; }
public string nickname { get; set; }
public string image { get; set; }
public bool extraTime { get; set; }
public int group { get; set; }
public string[] roles { get; set; }
}
}

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

@ -1,17 +1,17 @@
using adminBlazor.Models;
using Blazored.LocalStorage;
using Blazored.LocalStorage;
using Blazorise.DataGrid;
using Microsoft.AspNetCore.Components;
using System.Linq;
using Microsoft.AspNetCore.Http.Features;
using adminBlazor.Models;
using System.Net.Http;
using System.Net.Http.Json;
using System.Threading.Tasks;
namespace adminBlazor.Pages
{
public partial class List
{
private User[] users;
private List<User> _users;
private int totalUser;
[Inject]
@ -25,7 +25,7 @@ namespace adminBlazor.Pages
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)
{
return;
@ -36,8 +36,8 @@ namespace adminBlazor.Pages
// Check if data exist in the local storage
if (currentData == null)
{
// This code adds fake data to local storage (loading data synchronously to initialize before the OnReadData method)
var originalData = await Http.GetFromJsonAsync<User[]>($"{NavigationManager.BaseUri}fake-data.json");
// 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 = Http.GetFromJsonAsync<User[]>($"{NavigationManager.BaseUri}fake-data.json").Result;
await LocalStorage.SetItemAsync("data", originalData);
}
}
@ -49,15 +49,16 @@ namespace adminBlazor.Pages
return;
}
// When you use a real API, you use the following code
// var response = await Http.GetJsonAsync<User[]>( $"http://my-api/api/data?page={e.Page}&pageSize={e.PageSize}" );
// When you use a real API, we use this follow code
//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();
if (!e.CancellationToken.IsCancellationRequested)
{
totalUser = (await LocalStorage.GetItemAsync<User[]>("data")).Length;
users = response.ToArray(); // actual data for the current page
totalUser = (await LocalStorage.GetItemAsync<List<User>>("data")).Count;
_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.AddHttpClient();
builder.Services.AddBlazoredLocalStorage();
builder.Services
@ -22,7 +22,6 @@ builder.Services
.AddBootstrapProviders()
.AddFontAwesomeIcons();
builder.Services.AddBlazoredLocalStorage();
var app = builder.Build();

@ -9,6 +9,11 @@
<div class="@NavMenuCssClass nav-scrollable" @onclick="ToggleNavMenu">
<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">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<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
</NavLink>
</div>
</nav>
</div>

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

Loading…
Cancel
Save