在 Blazor 專案內使用 Syncfusion 的 DataGrid 套件
在上一篇文章 使用 Blazor 專案與 Entity Freamework Core 讀取已經存在的 Contoso University 資料庫 中，說明如何在 Blazor 專案內，透過 C# 程式碼來讀取 Entity Framework 資料庫內的資料表紀錄，在這篇文章中，將會延續上一個專案程式碼，不過，在這裡將會使用 Syncfusion 的 DataGrid 元件顯示這些資料。
這個說明專案的原始碼位於 bzSyncfusionDataGrid
使用 Syncfusion 的準備工作
- 上一篇文章的專案，也就是 bzEntityFrameworkCore
- 滑鼠右擊專案 [相依性] > [管理 NuGet 套件]
- 搜尋 [Syncfusion.Blazor] 套件，安裝到專案內
- 在 [Pages] 資料夾內找到 [_Host.cshtml] 檔案，並且打開該檔案
- 在
<head>區段內加入底下的宣告
@*底下為要使用 Syncfusion 相關套件需要用到的 css 內容*@
<link href="_content/Syncfusion.Blazor/styles/fabric.css" rel="stylesheet" />
<!---CDN--->
@*<link href="https://cdn.syncfusion.com/blazor/18.1.44/styles/fabric.css" rel="stylesheet" />*@
@*底下為要相容於 IE11 要做的宣告*@
<script src="https://github.com/Daddoon/Blazor.Polyfill/releases/download/3.0.1/blazor.polyfill.min.js"></script>
- 在專案根目錄下打開 [_Imports.razor] 檔案
- 加入這行程式碼到最後面
@using Syncfusion.Blazor.Grids - 在專案根目錄下打開 [Startup.cs] 檔案
- 找到 [ConfigureServices] 方法，註冊 Syncfusion 會用到的相關服務，使用該行敘述
services.AddSyncfusionBlazor();
開始使用 DataGrid 元件
- 打開 [Pages] 資料夾內的 [index.razor] 檔案，輸入底下 HTML 標記與程式碼
@page "/"
@using bzEntityFrameworkCore.Models
@using Microsoft.EntityFrameworkCore
@inject ContosoUniversityContext Context
<h1>Hello, Entity Framework Core</h1>
<button class="btn btn-primary" @onclick="LoadData">讀取資料庫</button>
<SfGrid DataSource="@records">
</SfGrid>
@code{
List<Course> records = new List<Course>();
async void LoadData(MouseEventArgs e)
{
records = await Context.Course.ToListAsync();
StateHasChanged();
}
}
- 執行這個專案，將會看到使用 Syncfusion DataGrid 元件顯示出底下的輸出內容，若有看到，就代表已經成功讀取資料庫紀錄了。
