radzen datagrid page design 1

HelloBlazorServer/HelloBlazorServer/Components/Layout/NavMenu.razor

@@ -19,17 +19,17 @@
         </div>
 
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="quickgriddata">
+            <NavLink class="nav-link" href="data">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> QuickGrid Data
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Radzen Data
             </NavLink>
         </div>
 
-
         <div class="nav-item px-3">
-            <NavLink class="nav-link" href="data">
+            <NavLink class="nav-link" href="quickgriddata">
-                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Data
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> QuickGrid Data
             </NavLink>
         </div>
+        
 
         <div class="nav-item px-3">
             <NavLink class="nav-link" href="counter">

HelloBlazorServer/HelloBlazorServer/Components/Pages/Data.razor

@@ -1,10 +1,61 @@
 @page "/data"
-@rendermode InteractiveServer
+@inject IDatabase<GangnamguPopulation> DatabaseService
 
-<h3>Data</h3>
+<PageTitle>G.P.L | Data</PageTitle>
 
-<RadzenButton Text="@text"></RadzenButton>
+<RadzenText TextStyle="TextStyle.H4">강남구 인구통계 입력</RadzenText>
+
+<RadzenDataGrid Data="_items">
+    <Columns>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="Id" Title="Id">
+            <EditTemplate Context="data" >
+                <RadzenNumeric @bind-Value="data.Id" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="AdministrativeAgency" Title="행정동">
+            <EditTemplate Context="data">
+                <RadzenTextBox @bind-Value="data.AdministrativeAgency" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="TotalPopulation" Title="인구수 (계)">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.TotalPopulation" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="MalePopulation" Title="인구수 (남)">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.MalePopulation" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="FemalePopulation" Title="인구수 (여)">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.FemalePopulation" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="SexRatio" Title="성비">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.SexRatio" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="NumberOfHouseholds" Title="세대수">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.NumberOfHouseholds" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+        <RadzenDataGridColumn TItem="GangnamguPopulation" Property="NumberOfPeoplePerHousehold" Title="세대당 인구수">
+            <EditTemplate Context="data">
+                <RadzenNumeric @bind-Value="data.NumberOfPeoplePerHousehold" />
+            </EditTemplate>
+        </RadzenDataGridColumn>
+    </Columns>
+
+</RadzenDataGrid>
 
 @code {
-    string text = "Test";
+    private IEnumerable<GangnamguPopulation>? _items;
+
+    protected async override Task OnInitializedAsync()
+    {
+        _items = await DatabaseService.GetAsync();
+    }
 }

HelloBlazorServer/HelloBlazorServer/Interfaces/IDatabase.cs

@@ -7,6 +7,8 @@ namespace HelloBlazorServer.Interfaces
         // Select All
         List<T>? Get();
 
+        Task<List<T>> GetAsync();
+
         // Select using ID
         T GetDetail(int? id);
 

HelloBlazorServer/HelloBlazorServer/Services/GangnamguPopulationService.cs

@@ -1,5 +1,6 @@
 using HelloBlazorServer.Interfaces;
 using HelloBlazorServer.Models;
+using Microsoft.EntityFrameworkCore;
 
 namespace HelloBlazorServer.Services
 {
@@ -42,6 +43,14 @@ namespace HelloBlazorServer.Services
             return _context.GangnamguPopulations.ToList();
         }
 
+        public async Task<List<GangnamguPopulation>> GetAsync()
+        {
+            if (_context.GangnamguPopulations == null)
+                throw new NullReferenceException();
+
+            return await _context.GangnamguPopulations.ToListAsync();
+        }
+
         public GangnamguPopulation GetDetail(int? id)
         {
             if (_context.GangnamguPopulations == null)