Blazor 使用 資料模型 來顯示資料表關聯的集合資料

在上一篇文章 在 Blazor 專案內使用 Syncfusion 的 DataGrid 套件 中，使用 Syncfusion 的 DataGrid 元件顯示這些資料，在這將會需要把資料庫內表格 Table 的關聯紀錄，使用 Syncfusion DataGrid 來顯示出來，這裡暫時先不使用 AutoMapper 來實現這樣的功能，而是建立一個資料模型類別，且搭配使用 LINQ 來做到。

這個說明專案的原始碼位於 bzSyncfusionDataGridModel

修正 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">
    <GridColumns>
        <GridColumn Field=@nameof(RowData.CourseId) HeaderText="序號" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(RowData.Title) HeaderText="課程名稱" Width="150"></GridColumn>
        <GridColumn Field=@nameof(RowData.Credits) HeaderText=" Credits" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(RowData.Name) HeaderText="科系" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>
@code{
    class RowData
    {
        public int CourseId { get; set; }
        public string Title { get; set; }
        public int Credits { get; set; }
        public string Name { get; set; }
    }

    List<RowData> records = new List<RowData>();
    async void LoadData(MouseEventArgs e)
    {
        var rows = await Context.Course.Include(x => x.Department).ToListAsync();

        // 這裡使用 LINQ 宣告式語言來實現
        var query = from c in rows
                    select new RowData
                    {
                        CourseId = c.CourseId,
                        Title = c.Title,
                        Credits = c.Credits,
                        Name = c.Department.Name
                    };
        records = query.ToList();

        //// 這裡使用 LINQ 延伸方法來實現
        //records = rows.Select<Course, RowData>((x, y) =>
        //new RowData
        //{
        //    CourseId = x.CourseId,
        //    Title = x.Title,
        //    Credits = x.Credits,
        //    Name = x.Department.Name
        //}).ToList();

        StateHasChanged();
    }
}

在此將建立一個 RowData 類別，該類別將會用於顯示每筆紀錄所用的資料模型，而在資料庫那哩，因為要取得 Department 這個關聯資料表內的相關紀錄，因此，需要使用 Include(x => x.Department) 這個方法呼叫，如此，在資料庫端將會執行 Table Join 的查詢動作；另外，當資料查詢出來之後，將會透過 LINQ 的功能，將資料庫讀取出來的紀錄內容，轉換成為資料模型 RowData 型別的物件。

• 執行這個專案，將會看到使用 Syncfusion DataGrid 元件顯示出底下的輸出內容，若有看到，就代表已經成功讀取資料庫紀錄了。