From 3b5d5f2458e6735b6c4fae368ca8f379d3b11153 Mon Sep 17 00:00:00 2001 From: Peace Date: Wed, 19 Jun 2024 13:49:10 +0900 Subject: [PATCH] quickgrid using in-memory data --- .../Components/Layout/NavMenu.razor | 6 + .../Components/Pages/QCInMemory.razor | 24 ++++ .../Components/Pages/QCInMemory.razor.css | 17 +++ .../Components/_Imports.razor | 3 +- .../HelloBlazorServer/Data/InMemoryData.cs | 110 ++++++++++++++++++ .../HelloBlazorServer/Models/MedalTally.cs | 11 ++ .../HelloBlazorServer/Program.cs | 2 + 7 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor create mode 100644 HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css create mode 100644 HelloBlazorServer/HelloBlazorServer/Data/InMemoryData.cs create mode 100644 HelloBlazorServer/HelloBlazorServer/Models/MedalTally.cs diff --git a/HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor b/HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor index 6e0e2d4..13ff000 100644 --- a/HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor +++ b/HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor @@ -30,6 +30,12 @@ +
+ + QG InMemory + +
+
QuickGrid Data diff --git a/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor b/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor new file mode 100644 index 0000000..d723e69 --- /dev/null +++ b/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor @@ -0,0 +1,24 @@ +@page "/qcinmemory" +@inject InMemoryData Data + +@rendermode RenderMode.InteractiveServer + +
+ + + + + + + +
+ +@code { + IQueryable? itemsQueryable; + + protected override async Task OnInitializedAsync() + { + var items = await Data.GetDataAsync(); + itemsQueryable = items.AsQueryable(); + } +} diff --git a/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css b/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css new file mode 100644 index 0000000..4bec499 --- /dev/null +++ b/HelloBlazorServer/HelloBlazorServer/Components/Pages/QCInMemory.razor.css @@ -0,0 +1,17 @@ +/* Fix height and enable scrolling */ +.grid { + height: 16.5rem; + overflow-y: auto; +} + +/* Sticky header while scrolling */ +::deep thead { + position: sticky; + top: 0; + background-color: #eee; +} + +/* Subtle stripe effect */ +::deep tr:nth-child(even) { + background: rgba(255,255,255,0.4); +} diff --git a/HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor b/HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor index 109d2b2..b4f5f97 100644 --- a/HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor +++ b/HelloBlazorServer/HelloBlazorServer/Components/_Imports.razor @@ -14,4 +14,5 @@ @using HelloBlazorServer.Services @using HelloBlazorServer.Models @using Radzen -@using Radzen.Blazor \ No newline at end of file +@using Radzen.Blazor +@using HelloBlazorServer.Data; \ No newline at end of file diff --git a/HelloBlazorServer/HelloBlazorServer/Data/InMemoryData.cs b/HelloBlazorServer/HelloBlazorServer/Data/InMemoryData.cs new file mode 100644 index 0000000..3a431d1 --- /dev/null +++ b/HelloBlazorServer/HelloBlazorServer/Data/InMemoryData.cs @@ -0,0 +1,110 @@ +using HelloBlazorServer.Models; +using System.Linq.Dynamic.Core; + +namespace HelloBlazorServer.Data +{ + public class InMemoryData + { + public async Task> GetDataAsync() + { + MedalTally[] medalTallies = + [ + new MedalTally { Name = "Argentina", Gold = 0, Silver = 1, Bronze = 2, Total = 3 }, + new MedalTally { Name = "Armenia", Gold = 0, Silver = 2, Bronze = 2, Total = 4 }, + new MedalTally { Name = "Australia", Gold = 17, Silver = 7, Bronze = 22, Total = 46 }, + new MedalTally { Name = "Austria", Gold = 1, Silver = 1, Bronze = 5, Total = 7 }, + new MedalTally { Name = "Azerbaijan", Gold = 0, Silver = 3, Bronze = 4, Total = 7 }, + new MedalTally { Name = "Bahamas", Gold = 2, Silver = 0, Bronze = 0, Total = 2 }, + new MedalTally { Name = "Bahrain", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Belarus", Gold = 1, Silver = 3, Bronze = 3, Total = 7 }, + new MedalTally { Name = "Belgium", Gold = 3, Silver = 1, Bronze = 3, Total = 7 }, + new MedalTally { Name = "Bermuda", Gold = 1, Silver = 0, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Botswana", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Brazil", Gold = 7, Silver = 6, Bronze = 8, Total = 21 }, + new MedalTally { Name = "Bulgaria", Gold = 3, Silver = 1, Bronze = 2, Total = 6 }, + new MedalTally { Name = "Burkina Faso", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Canada", Gold = 7, Silver = 6, Bronze = 11, Total = 24 }, + new MedalTally { Name = "Chinese Taipei", Gold = 2, Silver = 4, Bronze = 6, Total = 12 }, + new MedalTally { Name = "Colombia", Gold = 0, Silver = 4, Bronze = 1, Total = 5 }, + new MedalTally { Name = "Côte d'Ivoire", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Croatia", Gold = 3, Silver = 3, Bronze = 2, Total = 8 }, + new MedalTally { Name = "Cuba", Gold = 7, Silver = 3, Bronze = 5, Total = 15 }, + new MedalTally { Name = "Czech Republic", Gold = 4, Silver = 4, Bronze = 3, Total = 11 }, + new MedalTally { Name = "Denmark", Gold = 3, Silver = 4, Bronze = 4, Total = 11 }, + new MedalTally { Name = "Dominican Republic", Gold = 0, Silver = 3, Bronze = 2, Total = 5 }, + new MedalTally { Name = "Ecuador", Gold = 2, Silver = 1, Bronze = 0, Total = 3 }, + new MedalTally { Name = "Egypt", Gold = 1, Silver = 1, Bronze = 4, Total = 6 }, + new MedalTally { Name = "Estonia", Gold = 1, Silver = 0, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Ethiopia", Gold = 1, Silver = 1, Bronze = 2, Total = 4 }, + new MedalTally { Name = "Fiji", Gold = 1, Silver = 0, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Finland", Gold = 0, Silver = 0, Bronze = 2, Total = 2 }, + new MedalTally { Name = "France", Gold = 10, Silver = 12, Bronze = 11, Total = 33 }, + new MedalTally { Name = "Georgia", Gold = 2, Silver = 5, Bronze = 1, Total = 8 }, + new MedalTally { Name = "Germany", Gold = 10, Silver = 11, Bronze = 16, Total = 37 }, + new MedalTally { Name = "Ghana", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Great Britain", Gold = 22, Silver = 21, Bronze = 22, Total = 65 }, + new MedalTally { Name = "Greece", Gold = 2, Silver = 1, Bronze = 1, Total = 4 }, + new MedalTally { Name = "Grenada", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Hong Kong, China", Gold = 1, Silver = 2, Bronze = 3, Total = 6 }, + new MedalTally { Name = "Hungary", Gold = 6, Silver = 7, Bronze = 7, Total = 20 }, + new MedalTally { Name = "India", Gold = 1, Silver = 2, Bronze = 4, Total = 7 }, + new MedalTally { Name = "Indonesia", Gold = 1, Silver = 1, Bronze = 3, Total = 5 }, + new MedalTally { Name = "Ireland", Gold = 2, Silver = 0, Bronze = 2, Total = 4 }, + new MedalTally { Name = "Islamic Republic of Iran", Gold = 3, Silver = 2, Bronze = 2, Total = 7 }, + new MedalTally { Name = "Israel", Gold = 2, Silver = 0, Bronze = 2, Total = 4 }, + new MedalTally { Name = "Italy", Gold = 10, Silver = 10, Bronze = 20, Total = 40 }, + new MedalTally { Name = "Jamaica", Gold = 4, Silver = 1, Bronze = 4, Total = 9 }, + new MedalTally { Name = "Japan", Gold = 27, Silver = 14, Bronze = 17, Total = 58 }, + new MedalTally { Name = "Jordan", Gold = 0, Silver = 1, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Kazakhstan", Gold = 0, Silver = 0, Bronze = 8, Total = 8 }, + new MedalTally { Name = "Kenya", Gold = 4, Silver = 4, Bronze = 2, Total = 10 }, + new MedalTally { Name = "Kosovo", Gold = 2, Silver = 0, Bronze = 0, Total = 2 }, + new MedalTally { Name = "Kuwait", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Kyrgyzstan", Gold = 0, Silver = 2, Bronze = 1, Total = 3 }, + new MedalTally { Name = "Latvia", Gold = 1, Silver = 0, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Lithuania", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Malaysia", Gold = 0, Silver = 1, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Mexico", Gold = 0, Silver = 0, Bronze = 4, Total = 4 }, + new MedalTally { Name = "Mongolia", Gold = 0, Silver = 1, Bronze = 3, Total = 4 }, + new MedalTally { Name = "Morocco", Gold = 1, Silver = 0, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Namibia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Netherlands", Gold = 10, Silver = 12, Bronze = 14, Total = 36 }, + new MedalTally { Name = "New Zealand", Gold = 7, Silver = 6, Bronze = 7, Total = 20 }, + new MedalTally { Name = "Nigeria", Gold = 0, Silver = 1, Bronze = 1, Total = 2 }, + new MedalTally { Name = "North Macedonia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Norway", Gold = 4, Silver = 2, Bronze = 2, Total = 8 }, + new MedalTally { Name = "People's Republic of China", Gold = 38, Silver = 32, Bronze = 18, Total = 88 }, + new MedalTally { Name = "Philippines", Gold = 1, Silver = 2, Bronze = 1, Total = 4 }, + new MedalTally { Name = "Poland", Gold = 4, Silver = 5, Bronze = 5, Total = 14 }, + new MedalTally { Name = "Portugal", Gold = 1, Silver = 1, Bronze = 2, Total = 4 }, + new MedalTally { Name = "Puerto Rico", Gold = 1, Silver = 0, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Qatar", Gold = 2, Silver = 0, Bronze = 1, Total = 3 }, + new MedalTally { Name = "Republic of Korea", Gold = 6, Silver = 4, Bronze = 10, Total = 20 }, + new MedalTally { Name = "Republic of Moldova", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "ROC", Gold = 20, Silver = 28, Bronze = 23, Total = 71 }, + new MedalTally { Name = "Romania", Gold = 1, Silver = 3, Bronze = 0, Total = 4 }, + new MedalTally { Name = "San Marino", Gold = 0, Silver = 1, Bronze = 2, Total = 3 }, + new MedalTally { Name = "Saudi Arabia", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Serbia", Gold = 3, Silver = 1, Bronze = 5, Total = 9 }, + new MedalTally { Name = "Slovakia", Gold = 1, Silver = 2, Bronze = 1, Total = 4 }, + new MedalTally { Name = "Slovenia", Gold = 3, Silver = 1, Bronze = 1, Total = 5 }, + new MedalTally { Name = "South Africa", Gold = 1, Silver = 2, Bronze = 0, Total = 3 }, + new MedalTally { Name = "Spain", Gold = 3, Silver = 8, Bronze = 6, Total = 17 }, + new MedalTally { Name = "Sweden", Gold = 3, Silver = 6, Bronze = 0, Total = 9 }, + new MedalTally { Name = "Switzerland", Gold = 3, Silver = 4, Bronze = 6, Total = 13 }, + new MedalTally { Name = "Syrian Arab Republic", Gold = 0, Silver = 0, Bronze = 1, Total = 1 }, + new MedalTally { Name = "Thailand", Gold = 1, Silver = 0, Bronze = 1, Total = 2 }, + new MedalTally { Name = "Tunisia", Gold = 1, Silver = 1, Bronze = 0, Total = 2 }, + new MedalTally { Name = "Turkey", Gold = 2, Silver = 2, Bronze = 9, Total = 13 }, + new MedalTally { Name = "Turkmenistan", Gold = 0, Silver = 1, Bronze = 0, Total = 1 }, + new MedalTally { Name = "Uganda", Gold = 2, Silver = 1, Bronze = 1, Total = 4 }, + new MedalTally { Name = "Ukraine", Gold = 1, Silver = 6, Bronze = 12, Total = 19 }, + new MedalTally { Name = "United States of America", Gold = 39, Silver = 41, Bronze = 33, Total = 113 }, + new MedalTally { Name = "Uzbekistan", Gold = 3, Silver = 0, Bronze = 2, Total = 5 }, + new MedalTally { Name = "Venezuela", Gold = 1, Silver = 3, Bronze = 0, Total = 4 } + ]; + + return await medalTallies.ToDynamicListAsync(); + } + } +} diff --git a/HelloBlazorServer/HelloBlazorServer/Models/MedalTally.cs b/HelloBlazorServer/HelloBlazorServer/Models/MedalTally.cs new file mode 100644 index 0000000..4f8d2ef --- /dev/null +++ b/HelloBlazorServer/HelloBlazorServer/Models/MedalTally.cs @@ -0,0 +1,11 @@ +namespace HelloBlazorServer.Models +{ + public class MedalTally + { + public string Name { get; set; } + public int Gold { get; set; } + public int Silver { get; set; } + public int Bronze { get; set; } + public int Total { get; set; } + } +} diff --git a/HelloBlazorServer/HelloBlazorServer/Program.cs b/HelloBlazorServer/HelloBlazorServer/Program.cs index 137eed9..f5bc617 100644 --- a/HelloBlazorServer/HelloBlazorServer/Program.cs +++ b/HelloBlazorServer/HelloBlazorServer/Program.cs @@ -48,6 +48,8 @@ namespace HelloBlazorServer builder.Services.AddDbContext(); builder.Services.AddScoped, GangnamguPopulationService>(); + builder.Services.AddScoped(); + var app = builder.Build(); // Configure the HTTP request pipeline.