UCOM 職能補給站

提供您專業技能的最佳管道，IT企業主管唯一推薦

2024年5月10日 星期五

在Blazor使用Fluent UI元件-3

 作者：許薰尹  精誠資訊/恆逸教育訓練中心資深講師



在本站《在Blazor使用Fluent UI元件 - 1》與《在Blazor使用Fluent UI元件 - 2》一文介紹如何在現有的Blazor專案中，手動加入Fluent UI元件的功能。在這一篇文章中，我們將介紹延續這系列文章的情境，介紹Fluent UI套件中「FluentDataGrid」元件的功能。


動態顯示欄位


若想動態決定「FluentDataGrid」元件要顯示的欄位，可以加入一小段程式碼。讓我們修改「MyDataGridComponent」元件程式，參考以下範例程式碼：


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<h3> MyDataGridComponent </h3>
 
<p>
  選取欄位 :
  <FluentCheckbox @bind-Value = "showCover"> Cover </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showTitle"> Title </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPrice"> Price </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPublishDate"> PublishDate </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showInStock"> InStock </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showDescription"> Description </FluentCheckbox>
</p>
 
 
<FluentDataGrid Items = "@books">
  <PropertyColumn Property = "@(b => b.Id)" Sortable = "true" />
 
  @if ( showCover ) {
    <TemplateColumn Tooltip = "true"
                    TooltipText = "@(b => b.Title + "的圖片")"
                    Align = "Align.Center"
                    SortBy = "@idSort"
                    Title = "Cover">
      <img class = "cover" src = "images\@(context.Id).png" alt = "@(context.Id + "的圖片")" />
    </TemplateColumn>
  }
  @if ( showTitle ) {
    <PropertyColumn Property = "@(b => b.Title)" Sortable = "true" />
  }
  @if ( showPrice ) {
    <PropertyColumn Property = "@(b => b.Price)" Sortable = "true" />
  }
  @if ( showPublishDate ) {
    <PropertyColumn Property = "@(b => b.PublishDate)" Format = "yyyy-MM-dd" Sortable = "true" />
  }
  @if ( showInStock ) {
    <PropertyColumn Property = "@(b => b.InStock)" Sortable = "true" />
  }
  @if ( showDescription ) {
    <PropertyColumn Property = "@(b => b.Description)" Sortable = "true" />
  }
</FluentDataGrid>
 
@code {
  bool showCover = false;
  bool showTitle = true;
  bool showPrice = true;
  bool showPublishDate = false;
  bool showInStock = false;
  bool showDescription = false;
 
  record Book( int Id, string? Title, int Price, DateTime PublishDate, bool InStock, string? Description );
 
  IQueryable<Book> books = new [ ]
  {
    new Book(1, "Essential Programming Language", 250, new DateTime(2022, 1, 2), true, "Essential Programming Language"),
    new Book(2, "Telling Arts", 245, new DateTime(2022, 4, 15), true, "Telling Arts"),
    new Book(3, "Marvel", 150, new DateTime(2022, 2, 21), true, "Marvel"),
    new Book(4, "The Beauty of Cook", 450, new DateTime(2022, 12, 2), true, "The Beauty of Cook"),
    new Book(5, "The Art of Design", 300, new DateTime(2022, 6, 10), true, "The Art of Design"),
    new Book(6, "Science Fiction", 200, new DateTime(2022, 8, 18), true, "Science Fiction"),
    new Book(7, "History of Art", 180, new DateTime(2022, 3, 25), true, "History of Art"),
    new Book(8, "The Mystery Novel", 350, new DateTime(2022, 9, 5), true, "The Mystery Novel"),
    new Book(9, "Fantasy World", 280, new DateTime(2022, 7, 12), true, "Fantasy World")
  }.AsQueryable( );
 
  GridSort<Book> idSort = GridSort<Book>
    .ByDescending( x => x.Id );
 
}
 
<style>
  .cover {
    height: 100px;
    margin: auto;
  }
</style>



「FluentCheckbox」是一個Blazor元件，它是Fluent UI庫的一部分，我們透過它來設計複選功能。在這段程式碼中，「FluentCheckbox」元件的使用「@bind-Value」語法繫結到一個名為「showCover」的布林變數，當核取方塊的狀態改變時，「showCover」變數的值也會對應的改變。同時，如果「showCover」變數的值在其他地方被改變，核取方塊的狀態也會更新以反映這個變化。這稱之為雙向繫結。

我們利用「showCover」變數來控制是否顯示指定的「Cover」直欄。如果「showCover」為「true」，則顯示該直欄；如果為「false」，則不顯示。範例中按相同的概念，來控制其它欄位是否顯示。這個範例的執行結果請參考下圖所示：



圖 1：動態顯示欄位。


資料分頁


在Blazor應用程式之中可以使用「FluentPaginator」元件來實現分頁功能，修改上例程式碼如下，設定「FluentDataGrid」的「Pagination」屬性關聯到一個「PaginationState」物件：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<h3> MyDataGridComponent </h3>
 
<p>
  選取欄位 :
  <FluentCheckbox @bind-Value = "showCover"> Cover </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showTitle"> Title </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPrice"> Price </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPublishDate"> PublishDate </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showInStock"> InStock </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showDescription"> Description </FluentCheckbox>
</p>
 
 
<FluentDataGrid Items = "@books"
  Pagination = "@pagination"
  >
  <PropertyColumn Property = "@(b => b.Id)" Sortable = "true" />
 
  @if ( showCover ) {
    <TemplateColumn Tooltip = "true"
                    TooltipText = "@(b => b.Title + "的圖片")"
                    Align = "Align.Center"
                    SortBy = "@idSort"
                    Title = "Cover">
      <img class = "cover" src = "images\@(context.Id).png" alt = "@(context.Id + "的圖片")" />
    </TemplateColumn>
  }
  @if ( showTitle ) {
    <PropertyColumn Property = "@(b => b.Title)" Align = "Align.Start" Sortable = "true" />
  }
  @if ( showPrice ) {
    <PropertyColumn Property = "@(b => b.Price)" Sortable = "true" />
  }
  @if ( showPublishDate ) {
    <PropertyColumn Property = "@(b => b.PublishDate)" Format = "yyyy-MM-dd" Sortable = "true" />
  }
  @if ( showInStock ) {
    <PropertyColumn Property = "@(b => b.InStock)" Sortable = "true" />
  }
  @if ( showDescription ) {
    <PropertyColumn Property = "@(b => b.Description)" Sortable = "true" />
  }
</FluentDataGrid>
 
<FluentPaginator State = "@pagination">
  <SummaryTemplate>
    共 <strong> @(pagination.TotalItemCount ?? 0) </strong> 筆
  </SummaryTemplate>
  <PaginationTextTemplate>
    第 <strong> @(pagination.CurrentPageIndex + 1) </strong> 頁，共 <strong> @(pagination.LastPageIndex + 1) </strong> 頁
  </PaginationTextTemplate>
</FluentPaginator>
 
@code {
  PaginationState pagination = new PaginationState { ItemsPerPage = 4 };
 
  bool showCover = true;
  bool showTitle = true;
  bool showPrice = true;
  bool showPublishDate = false;
  bool showInStock = false;
  bool showDescription = false;
 
  record Book( int Id, string? Title, int Price, DateTime PublishDate, bool InStock, string? Description );
 
  IQueryable<Book> books = new [ ]
  {
    new Book(1, "Essential Programming Language", 250, new DateTime(2022, 1, 2), true, "Essential Programming Language"),
    new Book(2, "Telling Arts", 245, new DateTime(2022, 4, 15), true, "Telling Arts"),
    new Book(3, "Marvel", 150, new DateTime(2022, 2, 21), true, "Marvel"),
    new Book(4, "The Beauty of Cook", 450, new DateTime(2022, 12, 2), true, "The Beauty of Cook"),
    new Book(5, "The Art of Design", 300, new DateTime(2022, 6, 10), true, "The Art of Design"),
    new Book(6, "Science Fiction", 200, new DateTime(2022, 8, 18), true, "Science Fiction"),
    new Book(7, "History of Art", 180, new DateTime(2022, 3, 25), true, "History of Art"),
    new Book(8, "The Mystery Novel", 350, new DateTime(2022, 9, 5), true, "The Mystery Novel"),
    new Book(9, "Fantasy World", 280, new DateTime(2022, 7, 12), true, "Fantasy World")
  }.AsQueryable( );
 
  GridSort<Book> idSort = GridSort<Book>
    .ByDescending( x => x.Id );
 
 
}
 
<style>
  .cover {
    height: 100px;
    margin: auto;
  }
</style>



和「FluentDataGrid」一樣，「FluentPaginator」元件的「State」屬性也繫結到相同的「PaginationState」物件，用於儲存分頁的當前狀態，包括當前的頁碼、每頁的項目數量等。


「SummaryTemplate」是一個樣板，用來顯示總的項目數。在這個模板中，使用了「pagination.TotalItemCount」屬性來獲取總資料筆數。如果「TotalItemCount」為「null」，則顯示「0」。


「PaginationTextTemplate」樣板則用於顯示當前頁碼和總頁數。在這個樣板中，使用了「pagination.CurrentPageIndex + 1」來得到當前頁碼，使用了「pagination.LastPageIndex + 1」來得到總頁數。
這個範例的執行結果請參考下圖所示：



圖 2：資料分頁。


自訂欄位表頭


「FluentDataGrid」中欄位的表頭可以搭配「System.ComponentModel.DataAnnotations」命名空間下的「DisplayAttribute」來設定，因為record型別不能直接使用「Display」屬性。但我們可以將「record」型別轉換為類別（class）來使用「Display」屬性，修改程式如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
@using System.ComponentModel.DataAnnotations
<h3> MyDataGridComponent </h3>
 
<p>
  選取欄位 :
  <FluentCheckbox @bind-Value = "showCover"> Cover </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showTitle"> Title </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPrice"> Price </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPublishDate"> PublishDate </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showInStock"> InStock </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showDescription"> Description </FluentCheckbox>
</p>
 
 
<FluentDataGrid Items = "@books"
  Pagination = "@pagination"
  >
  <PropertyColumn Property = "@(b => b.Id)" Sortable = "true" />
 
  @if ( showCover ) {
    <TemplateColumn Tooltip = "true"
                    TooltipText = "@(b => b.Title + "的圖片")"
                    Align = "Align.Center"
                    SortBy = "@idSort"
                    Title = "Cover">
      <img class = "cover" src = "images\@(context.Id).png" alt = "@(context.Id + "的圖片")" />
    </TemplateColumn>
  }
  @if ( showTitle ) {
    <PropertyColumn Property = "@(b => b.Title)" Align = "Align.Start" Sortable = "true" />
  }
  @if ( showPrice ) {
    <PropertyColumn Property = "@(b => b.Price)" Sortable = "true" />
  }
  @if ( showPublishDate ) {
    <PropertyColumn Property = "@(b => b.PublishDate)" Format = "yyyy-MM-dd" Sortable = "true" />
  }
  @if ( showInStock ) {
    <PropertyColumn Property = "@(b => b.InStock)" Sortable = "true" />
  }
  @if ( showDescription ) {
    <PropertyColumn Property = "@(b => b.Description)" Sortable = "true" />
  }
</FluentDataGrid>
 
<FluentPaginator State = "@pagination">
  <SummaryTemplate>
    共 <strong> @(pagination.TotalItemCount ?? 0) </strong> 筆
  </SummaryTemplate>
  <PaginationTextTemplate>
    第 <strong> @(pagination.CurrentPageIndex + 1) </strong> 頁，共 <strong> @(pagination.LastPageIndex + 1) </strong> 頁
  </PaginationTextTemplate>
</FluentPaginator>
 
@code {
  PaginationState pagination = new PaginationState { ItemsPerPage = 4 };
 
  bool showCover = true;
  bool showTitle = true;
  bool showPrice = true;
  bool showPublishDate = false;
  bool showInStock = false;
  bool showDescription = false;
 
  class Book
  {
    [Display( Name = "圖書編號" )]
    public int Id { get; set; }
    [Display( Name = "圖書名稱" )]
    public string? Title { get; set; } = null!;
    [Display( Name = "價格" )]
    public int Price { get; set; }
    [Display( Name = "出版日期" )]
    public DateTime PublishDate { get; set; }
    [Display( Name = "庫存" )]
    public bool InStock { get; set; }
    [Display( Name = "說明" )]
    public string? Description { get; set; }
  }
 
  IQueryable<Book> books = new [ ]
  {
    new Book { Id = 1, Title  =  "Essential Programming Language", Price = 250, PublishDate = new DateTime( 2022, 1, 2 ), InStock = true, Description = "Essential Programming Language" },
    new Book { Id = 2, Title = "Telling Arts", Price = 245, PublishDate = new DateTime( 2022, 4, 15 ), InStock = true, Description = "Telling Arts" },
    new Book { Id = 3, Title = "Marvel", Price = 150, PublishDate = new DateTime( 2022, 2, 21 ), InStock = true, Description = "Marvel" },
    new Book { Id = 4, Title = "The Beauty of Cook", Price = 450, PublishDate = new DateTime( 2022, 12, 2 ), InStock = true, Description = "The Beauty of Cook" },
    new Book { Id = 5, Title = "The Art of Design", Price = 300, PublishDate = new DateTime( 2022, 6, 10 ), InStock = true, Description = "The Art of Design" },
    new Book { Id = 6, Title = "Science Fiction", Price = 200, PublishDate = new DateTime( 2022, 8, 18 ), InStock = true, Description = "Science Fiction" },
    new Book { Id = 7, Title = "History of Art", Price = 180, PublishDate = new DateTime( 2022, 3, 25 ), InStock = true, Description = "History of Art" },
    new Book { Id = 8, Title = "The Mystery Novel", Price = 350, PublishDate = new DateTime( 2022, 9, 5 ), InStock = true, Description = "The Mystery Novel" },
    new Book { Id = 9, Title = "Fantasy World", Price = 280, PublishDate = new DateTime( 2022, 7, 12 ), InStock = true, Description = "Fantasy World" }
  }.AsQueryable();
 
  GridSort<Book> idSort = GridSort<Book>
    .ByDescending( x => x.Id );
 
 
}
 
<style>
  .cover {
    height: 100px;
    margin: auto;
  }
</style>



「Book」的類別每個屬性上方都有一個「Display」屬性（Attribute），用於設定該屬性在用戶界面上的顯示名稱。例如，「Id」屬性的顯示名稱被設定為「圖書編號」，依此類推。

這個範例的執行結果請參考下圖所示：



圖 3：自訂欄位表頭。


多行文字


若直欄中的資料需要以多行方式顯示，這需要利用樣式表，參考以下範例程式碼，顯示「Description」的「PropertyColumn」設定了「Class = "multiline-text"」：


?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
@using System.ComponentModel.DataAnnotations
<h3> MyDataGridComponent </h3>
 
<p>
  選取欄位 :
  <FluentCheckbox @bind-Value = "showCover"> Cover </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showTitle"> Title </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPrice"> Price </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showPublishDate"> PublishDate </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showInStock"> InStock </FluentCheckbox>
  <FluentCheckbox @bind-Value = "showDescription"> Description </FluentCheckbox>
</p>
 
 
<FluentDataGrid Items = "@books"
  Pagination = "@pagination"
  >
  <PropertyColumn Property = "@(b => b.Id)" Sortable = "true" />
 
  @if ( showCover ) {
    <TemplateColumn Tooltip = "true"
                    TooltipText = "@(b => b.Title + "的圖片")"
                    Align = "Align.Center"
                    SortBy = "@idSort"
                    Title = "Cover">
      <img class = "cover" src="images\@(context.Id).png" alt = "@(context.Id + "的圖片")" />
    </TemplateColumn>
  }
  @if ( showTitle ) {
    <PropertyColumn Property = "@(b => b.Title)" Align = "Align.Start" Sortable = "true" />
  }
  @if ( showPrice ) {
    <PropertyColumn Property = "@(b => b.Price)" Sortable = "true" />
  }
  @if ( showPublishDate ) {
    <PropertyColumn Property = "@(b => b.PublishDate)" Format = "yyyy-MM-dd" Sortable = "true" />
  }
  @if ( showInStock ) {
    <PropertyColumn Property = "@(b => b.InStock)" Sortable = "true" />
  }
  @if ( showDescription ) {
    <PropertyColumn Property = "@(b => b.Description)" Sortable = "true" Class = "multiline-text" />
  }
</FluentDataGrid>
 
<FluentPaginator State = "@pagination">
  <SummaryTemplate>
    共 <strong> @(pagination.TotalItemCount ?? 0) </strong> 筆
  </SummaryTemplate>
  <PaginationTextTemplate>
    第 <strong> @(pagination.CurrentPageIndex + 1) </strong> 頁，共 <strong> @(pagination.LastPageIndex + 1) </strong> 頁
  </PaginationTextTemplate>
</FluentPaginator>
 
@code {
  PaginationState pagination  =  new PaginationState { ItemsPerPage = 4 };
 
  bool showCover = true;
  bool showTitle = true;
  bool showPrice = true;
  bool showPublishDate = false;
  bool showInStock = false;
  bool showDescription = false;
 
  class Book
  {
    [Display( Name = "圖書編號" )]
    public int Id { get; set; }
    [Display( Name = "圖書名稱" )]
    public string? Title { get; set; } = null!;
    [Display( Name = "價格" )]
    public int Price { get; set; }
    [Display( Name = "出版日期" )]
    public DateTime PublishDate { get; set; }
    [Display( Name = "庫存" )]
    public bool InStock { get; set; }
    [Display( Name = "說明" )]
    public string? Description { get; set; }
  }
 
  IQueryable<Book> books = new [ ]
  {
    new Book { Id = 1, Title = "Essential Programming Language", Price = 250,
    PublishDate = new DateTime( 2022, 1, 2 ), InStock = true,
    Description = "Essential Programming Language Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero soluta labore similique quidem nobis a possimus nostrum quis, maiores reprehenderit eum unde itaque laudantium culpa est porro, rem quia, excepturi incidunt nihil earum omnis temporibus veritatis. Libero tenetur ad facere impedit eius quo ratione eligendi necessitatibus ipsa suscipit odio, exercitationem molestias perferendis doloremque? Voluptatibus assumenda, repellat inventore magni doloribus modi vel ipsum reprehenderit temporibus esse illum! Aut, distinctio? Vel sequi quas ducimus odio dolorem blanditiis quibusdam quasi distinctio sunt modi eos doloribus nesciunt, perferendis, vitae accusantium soluta beatae suscipit quam. Exercitationem quam, ex expedita commodi id magnam reprehenderit quibusdam corrupti voluptas nemo ab obcaecati eveniet adipisci beatae dolorum omnis non illo enim temporibus. Provident atque reiciendis distinctio nihil ducimus ipsa accusamus ullam fuga, magni possimus suscipit beatae, officia a maxime numquam labore inventore. Adipisci aut doloremque dolore dicta similique harum aperiam, debitis, reiciendis quis earum sapiente eaque libero nesciunt totam repellendus quos nobis accusamus ut ab ipsum. Optio reiciendis velit explicabo itaque consectetur, tempora maiores. Quam culpa error enim, alias quaerat sunt reiciendis neque eveniet nisi perferendis corrupti id, magni recusandae animi ad sapiente explicabo placeat repudiandae maxime eligendi! Qui facilis molestias accusantium inventore optio neque magnam consectetur ipsa animi?" },
    new Book { Id = 2, Title = "Telling Arts", Price = 245, PublishDate = new DateTime( 2022, 4, 15 ), InStock = true, Description = "Telling Arts" },
    new Book { Id = 3, Title = "Marvel", Price = 150, PublishDate = new DateTime( 2022, 2, 21 ), InStock = true, Description = "Marvel" },
    new Book { Id = 4, Title = "The Beauty of Cook", Price = 450, PublishDate = new DateTime( 2022, 12, 2 ), InStock = true, Description = "The Beauty of Cook" },
    new Book { Id = 5, Title = "The Art of Design", Price = 300, PublishDate = new DateTime( 2022, 6, 10 ), InStock = true, Description = "The Art of Design" },
    new Book { Id = 6, Title = "Science Fiction", Price = 200, PublishDate = new DateTime( 2022, 8, 18 ), InStock = true, Description = "Science Fiction" },
    new Book { Id = 7, Title = "History of Art", Price = 180, PublishDate = new DateTime( 2022, 3, 25 ), InStock = true, Description = "History of Art" },
    new Book { Id = 8, Title = "The Mystery Novel", Price = 350, PublishDate = new DateTime( 2022, 9, 5 ), InStock = true, Description = "The Mystery Novel" },
    new Book { Id = 9, Title = "Fantasy World", Price = 280, PublishDate = new DateTime( 2022, 7, 12 ), InStock = true, Description = "Fantasy World" }
  }.AsQueryable();
 
  GridSort<Book> idSort = GridSort<Book>
    .ByDescending( x => x.Id );
 
 
}
 
<style>
  .cover {
    height: 100px;
    margin: auto;
  }
</style>



這個範例的執行結果請參考下圖所示：



圖 4：多行文字。


自訂顯示


「FluentDataGridRow」和「FluentDataGridCell」是用於自訂（DataGrid）的元件，它們分別代表DataGrid中的橫列（Row）和方格（Cell）。參考以下範例程式：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<h3> MyDataGridComponent </h3>
 
<FluentDataGrid TGridItem = "Book" GridTemplateColumns = "1fr 1fr 1fr 1fr 1fr 1fr">
  <FluentDataGridRow RowType = "DataGridRowType.Header">
    <FluentDataGridCell GridColumn = 1 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.Id ))
    </FluentDataGridCell>
    <FluentDataGridCell GridColumn = 2 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.Title ))
    </FluentDataGridCell>
    <FluentDataGridCell GridColumn = 3 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.Price ))
    </FluentDataGridCell>
    <FluentDataGridCell GridColumn = 4 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.PublishDate ))
    </FluentDataGridCell>
    <FluentDataGridCell GridColumn = 5 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.InStock ))
    </FluentDataGridCell>
    <FluentDataGridCell GridColumn = 6 CellType = "DataGridCellType.ColumnHeader">
      @(nameof( Book.Description ))
    </FluentDataGridCell>
  </FluentDataGridRow>
  @foreach ( var book in books ) {
    <FluentDataGridRow>
      <FluentDataGridCell GridColumn = 1> @book.Id </FluentDataGridCell>
      <FluentDataGridCell GridColumn = 2> @book.Title </FluentDataGridCell>
      <FluentDataGridCell GridColumn = 3> @book.Price </FluentDataGridCell>
      <FluentDataGridCell GridColumn = 4> @book.PublishDate </FluentDataGridCell>
      <FluentDataGridCell GridColumn = 5> @book.InStock </FluentDataGridCell>
      <FluentDataGridCell GridColumn = 6> @book.Description </FluentDataGridCell>
    </FluentDataGridRow>
  }
 
</FluentDataGrid>
 
@code {
  record Book( int Id, string? Title, int Price, DateTime PublishDate, bool InStock, string? Description );
 
  IQueryable<Book> books = new [ ]
   {
       new Book( 1, "Essential Programming Language", 250, new DateTime( 2022, 1, 2 ), true, "Essential Programming Language"),
       new Book( 2, "Telling Arts", 245, new DateTime( 2022, 4, 15 ), true, "Telling Arts"),
       new Book( 3, "Marvel", 150, new DateTime( 2022, 2, 21 ), true, "Marvel"),
       new Book( 4, "The Beauty of Cook", 450, new DateTime( 2022, 12, 2 ), true, "The Beauty of Cook"),
       new Book( 5, "The Art of Design", 300, new DateTime( 2022, 6, 10 ), true, "The Art of Design"),
       new Book( 6, "Science Fiction", 200, new DateTime( 2022, 8, 18 ), true, "Science Fiction"),
       new Book( 7, "History of Art", 180, new DateTime( 2022, 3, 25 ), true, "History of Art"),
       new Book( 8, "The Mystery Novel", 350, new DateTime( 2022, 9, 5 ), true, "The Mystery Novel"),
       new Book( 9, "Fantasy World", 280, new DateTime( 2022, 7, 12 ), true, "Fantasy World")
       }.AsQueryable( );
 
}




「FluentDataGridRow」這個元件代表「DataGrid」中的一個橫列。你可以在這個元件中加入多個「FluentDataGridCell」元件，每個「FluentDataGridCell」元件代表該橫列中的一個方格。「RowType」屬性用於指定橫列的類型，例如，你可以將其設定為「DataGridRowType.Header」來建立表頭。
「FluentDataGridCell」這個元件代表「DataGrid」中的一個方格。你可以在這個元件中加入想要顯示在方格中的內容。「GridColumn」屬性用於指定方格在橫列中的位置，例如，你可以將其設定為「1」來將方格放在行的第一欄。「CellType」屬性用於指定方格的類型，例如，設定為「DataGridCellType.ColumnHeader」表示它是直欄的表頭方格。

這個範例的執行結果請參考下圖所示：


圖 5：自訂（DataGrid）的元件。





👍學習推薦

l   【GPTGH】使用GitHub Copilot提高Coding生產力-程式設計AI詠唱

l   【UAC399】ASP.NET Core Web API/Minimal API微服務開發實務

l   【OPAI】使用Visual Studio 2022 開發Azure OpenAI應用程式

l   【UAC495】全面掌握ASP.NET Core Razor Page網站開發技巧

l   【UAC496】ASP.NET Core MVC網站開發從設計到實作Part 1

l   【UAC497】ASP.NET Core MVC網站開發從設計到實作Part 2

l   【UAC498】從設計到實作ASP.NET Core Blazor網站開發

l   【U2249】掌握Vue.JS漸進式前端框架開發技術

l   【UN398】.NET MAUI跨界先鋒從桌面到移動的全平台開發旅程

l   【UN492】.NET精粹的極致技術解密之旅



👉👉👉索取微軟網站開發技術系列 優惠訊息與課程資料

, , , , , , 0

0 意見:

張貼留言