UCOM 職能補給站

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

2025年5月20日 星期二

BlazorBootstrap入門 - 4


文章編號： N250527301 出刊日期： 2025/5/14 

在本站《BlazorBootstrap入門 - 1》、《BlazorBootstrap入門 - 2》、《BlazorBootstrap入門 - 3》系列文章中介紹了BlazorBootstrap套件基本入門，這篇文章再來談談BlazorBootstrap套件中提供的強大「Grid」元件，用來顯示表格式的資料。 

以下的程式範例將延續《BlazorBootstrap入門 - 1》、《BlazorBootstrap入門 - 2》、《BlazorBootstrap入門 - 3》建立的專案來進行實作。 


使用「Grid 」元件 

BlazorBootstrap 的「Grid」元件用於顯示表格式的資料，支援響應式設計，以Bootstrap 的網格系統（Grid System）為基礎，可以根據螢幕尺寸的大小進行寬度調整。提供了靈活且易於使用的屬性與方法，可客製化資料來源來呈現資料，也支援在用戶端或伺服端進行表格資料的排序與分頁。 

我們來看看以下範例程式碼，以了解如何在 Blazor 應用中使用「Grid」元件來顯示書籍列表： 

 

?
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
@page "/GridDemo"
@using BlazorBoots.Models
 
 
<h3> Grid Demo </h3>
 
<Grid TItem = "Book"
      Class = "table table-hover table-bordered table-striped"
      DataProvider = "MyDataProvider"
      AllowSorting = "true"
      Responsive = "true">
 
  <GridColumns>
    <GridColumn TItem = "Book" HeaderText = "編號" PropertyName = "Id" HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.Center" SortKeySelector = "item => item.Id">
      @context.Id
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "書名" PropertyName = "Title" HeaderTextAlignment = "Alignment.Center" SortKeySelector = "item => item.Title">
      @context.Title
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "價格" PropertyName = "Price" HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.End" SortKeySelector = "item => item.Price">
      @context.Price
    </GridColumn>
  </GridColumns>
</Grid>
 
 
@code {
  private IEnumerable<Book> books = default!;
 
  private async Task<GridDataProviderResult<Book>> MyDataProvider(GridDataProviderRequest<Book> request)
  {
    if (books is null)
    {
      books = GetBooks();
    }
    return await Task.FromResult(request.ApplyTo(books));
  }
 
  private IEnumerable<Book> GetBooks()
  {
    return new List<Book> {
        new Book { Id = 1, Title = "大亨小傳", Price = 105 },
        new Book { Id = 2, Title = "梅岡城故事", Price = 210 },
        new Book { Id = 3, Title = "一九八四", Price = 315 },
        new Book { Id = 4, Title = "傲慢與偏見", Price = 420 },
        new Book { Id = 5, Title = "麥田捕手", Price = 525 },
        new Book { Id = 6, Title = "哈比人", Price = 630 },
        new Book { Id = 7, Title = "白鯨記", Price = 735 },
        new Book { Id = 8, Title = "戰爭與和平", Price = 840 },
        new Book { Id = 9, Title = "奧德賽", Price = 945 },
        new Book { Id = 10, Title = "罪與罰", Price = 1050 },
        new Book { Id = 11, Title = "紅樓夢", Price = 1155 },
        new Book { Id = 12, Title = "西遊記", Price = 1260 },
        new Book { Id = 13, Title = "水滸傳", Price = 1365 }
    };
  }
}

 

「Grid」元件的「TItem」屬性，指定表格中要顯示的資料型別為「Book」類別；「Class」屬性用來設定CSS樣式，這些樣式是「Bootstrap」套件所提供的。「DataProvider」屬性指定提供資料的方法名稱為「MyDataProvider」；「AllowSorting」屬性設為「true」則啟用排序功能。「Responsive」屬性設為「true」可讓表格具有響應式設計的功能。 

「Grid」元件中的每一個直欄是透過「GridColumn」來定義，「GridColumn」所成的集合便是「GridColumns」，代表「Grid」元件中的所有直欄。 

「GridColumns」的「TItem」屬性指定表格中直欄要顯示的資料型別為「Book」類別；「HeaderText」屬性用來設定欄位表頭的標題文字，例如，第一個直欄的標題設為「編號」；「PropertyName」屬性用來設定欄位要繫結到「Book」類別的屬性，例如，第一個直欄繫結到「Id」屬性。「HeaderTextAlignment」屬性設為「Alignment.Center」用來設定欄位標題文字要置中顯示；「TextAlignment」屬性則用來設定欄位中的格子文字要對齊的位置。「SortKeySelector」屬性指定排序的鍵值，例如，第一個直欄設為「Id」屬性；「@context」語法可以獲得繫結到此欄位的「Book」物件，透過它可以顯示 「Book」物件的屬性。 

在程式碼區段中的「MyDataProvider」方法是一個非同步方法，提供「Grid」元件所需的資料，此方法中叫用 「GetBooks」方法來取得資料。 

這個範例執行結果請參考下圖所示，「Grid」元件顯示為一個支援響應式、可排序的表格來顯示書籍的編號、書名和價格，當你透過滑鼠點選直欄標題，就會自動進行升冪或降冪排序： 




圖 1：「Grid」元件。


篩選資料 


「Grid」元件支援非常多的功能，例如讓你從中篩選想看的資料，只需要將「AllowFiltering」屬性設定為「true」，每一個直欄的表頭標題列下方就會多出一個橫列可用於設定篩選條件。若某個直欄不希望提供篩選的功能，可以將「GridColumn」的「Filterable」屬性設定為「false」。你還可以進一步設定「FilterOperator」屬性來控制進階篩選條件，如大於、等於、包含等運算子，修改上個範例程式如下： 

?
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
@page "/GridDemo"
@using BlazorBoots.Models
 
 
<h3> Grid Demo </h3>
 
<Grid TItem = "Book"
      Class = "table table-hover table-bordered table-striped"
      DataProvider = "MyDataProvider"
      AllowSorting = "true"
      AllowFiltering = "true"
      Responsive = "true">
 
  <GridColumns>
    <GridColumn TItem = "Book" HeaderText = "編號"
                Filterable = "false"
                PropertyName = "Id"
                HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.Center" SortKeySelector = "item => item.Id">
      @context.Id
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "書名" PropertyName = "Title" HeaderTextAlignment = "Alignment.Center" SortKeySelector = "item => item.Title">
      @context.Title
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "價格"
                FilterOperator = "FilterOperator.GreaterThanOrEquals"
                PropertyName = "Price" HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.End" SortKeySelector = "item => item.Price">
      @context.Price
    </GridColumn>
  </GridColumns>
</Grid>
 
 
@code {
  private IEnumerable<Book> books = default!;
 
  private async Task<GridDataProviderResult<Book>> MyDataProvider(GridDataProviderRequest<Book> request)
  {
    if (books is null)
    {
      books = GetBooks();
    }
    return await Task.FromResult(request.ApplyTo(books));
  }
 
  private IEnumerable<Book> GetBooks()
  {
    return new List<Book> {
        new Book { Id = 1, Title = "大亨小傳", Price = 105 },
        new Book { Id = 2, Title = "梅岡城故事", Price = 210 },
        new Book { Id = 3, Title = "一九八四", Price = 315 },
        new Book { Id = 4, Title = "傲慢與偏見", Price = 420 },
        new Book { Id = 5, Title = "麥田捕手", Price = 525 },
        new Book { Id = 6, Title = "哈比人", Price = 630 },
        new Book { Id = 7, Title = "白鯨記", Price = 735 },
        new Book { Id = 8, Title = "戰爭與和平", Price = 840 },
        new Book { Id = 9, Title = "奧德賽", Price = 945 },
        new Book { Id = 10, Title = "罪與罰", Price = 1050 },
        new Book { Id = 11, Title = "紅樓夢", Price = 1155 },
        new Book { Id = 12, Title = "西遊記", Price = 1260 },
        new Book { Id = 13, Title = "水滸傳", Price = 1365 }
    };
  }
}

 



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





圖 2：篩選表格中的資料。 


資料分頁 


「Grid」元件可支援資料分頁，避免在網頁中一次顯示太多資料。修改上個範例程式碼如下，以了解如何在 Blazor 應用中使用「Grid」元件來顯示表格式的書籍資料，並且啟用了分頁功能。「Grid 」元件的「AllowPaging」屬性設為「true」可啟用分頁功能；「PageSize」屬性設為「5」表示每頁顯示「5」筆資料。「PaginationItemsTextFormat」屬性是一個字串，設定為「第{0} - {1} 筆，共{2}筆」用來設置分頁顯示的文字格式，顯示當前頁的記錄範圍和總記錄數。 

 

?
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
@page "/GridDemo"
@using BlazorBoots.Models
 
 
<h3> Grid Demo </h3>
 
<Grid TItem = "Book"
      Class = "table table-hover table-bordered table-striped"
      DataProvider = "MyDataProvider"
      AllowSorting = "true"
      AllowFiltering = "true"
      AllowPaging = "true"
      PageSize = "5"
      PaginationItemsTextFormat = "第{0} - {1} 筆，共{2}筆"
      Responsive = "true">
 
  <GridColumns>
    <GridColumn TItem = "Book" HeaderText = "編號"
                Filterable = "false"
                PropertyName = "Id"
                HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.Center" SortKeySelector = "item => item.Id">
      @context.Id
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "書名" PropertyName = "Title" HeaderTextAlignment = "Alignment.Center" SortKeySelector = "item => item.Title">
      @context.Title
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "價格"
                FilterOperator = "FilterOperator.GreaterThanOrEquals"
                PropertyName = "Price" HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.End" SortKeySelector = "item => item.Price">
      @context.Price
    </GridColumn>
  </GridColumns>
</Grid>
 
 
@code {
  private IEnumerable<Book> books = default!;
 
  private async Task<GridDataProviderResult<Book>> MyDataProvider(GridDataProviderRequest<Book> request)
  {
    if (books is null)
    {
      books = GetBooks();
    }
    return await Task.FromResult(request.ApplyTo(books));
  }
 
  private IEnumerable<Book> GetBooks()
  {
    return new List<Book> {
        new Book { Id = 1, Title = "大亨小傳", Price = 105 },
        new Book { Id = 2, Title = "梅岡城故事", Price = 210 },
        new Book { Id = 3, Title = "一九八四", Price = 315 },
        new Book { Id = 4, Title = "傲慢與偏見", Price = 420 },
        new Book { Id = 5, Title = "麥田捕手", Price = 525 },
        new Book { Id = 6, Title = "哈比人", Price = 630 },
        new Book { Id = 7, Title = "白鯨記", Price = 735 },
        new Book { Id = 8, Title = "戰爭與和平", Price = 840 },
        new Book { Id = 9, Title = "奧德賽", Price = 945 },
        new Book { Id = 10, Title = "罪與罰", Price = 1050 },
        new Book { Id = 11, Title = "紅樓夢", Price = 1155 },
        new Book { Id = 12, Title = "西遊記", Price = 1260 },
        new Book { Id = 13, Title = "水滸傳", Price = 1365 }
    };
  }
}

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




圖 3：資料分頁。 


啟用選取資料橫列的功能 


「Grid」元件有一個「AllowSelection」屬性，設定為「true」便可啟用選擇功能，例如單選或多選。參考以下範例程式碼，「SelectionMode」屬性可控制選擇模式為「GridSelectionMode.Multiple」代表多選；設為「GridSelectionMode.Single」代表單選；「SelectedItemsChanged」屬性用來註冊事件，當選擇項目改變時將觸發的方法名稱，如本例的「OnSelectedItemsChanged」： 

?
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
@page "/GridDemo"
@using BlazorBoots.Models
 
 
<h3>Grid Demo</h3>
 
<Grid TItem = "Book"
      Class = "table table-hover table-bordered table-striped"
      DataProvider = "MyDataProvider"
      AllowSorting = "true"
      AllowFiltering = "true"
      AllowPaging = "true"
      PageSize = "5"
      PaginationItemsTextFormat = "第{0} - {1} 筆，共{2}筆"
      AllowSelection = "true"
      SelectionMode = "GridSelectionMode.Multiple"
      SelectedItemsChanged = "OnSelectedItemsChanged"
      Responsive = "true">
 
  <GridColumns>
    <GridColumn TItem = "Book" HeaderText = "編號"
                Filterable = "false"
                PropertyName = "Id"
                HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.Center" SortKeySelector = "item => item.Id">
      @context.Id
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "書名" PropertyName = "Title" HeaderTextAlignment = "Alignment.Center" SortKeySelector = "item => item.Title">
      @context.Title
    </GridColumn>
    <GridColumn TItem = "Book" HeaderText = "價格"
                FilterOperator = "FilterOperator.GreaterThanOrEquals"
                PropertyName = "Price" HeaderTextAlignment = "Alignment.Center" TextAlignment = "Alignment.End" SortKeySelector = "item => item.Price">
      @context.Price
    </GridColumn>
  </GridColumns>
</Grid>
 
<div class = "mt-3">
  選取筆數 : @selectedBooks.Count
</div>
 
<div class = "mt-2">
  選取的圖書:
  <ul>
    @foreach (var emp in selectedBooks)
    {
      <li>@emp.Id : @emp.Title</li>
    }
  </ul>
</div>
 
@code {
  private IEnumerable<Book> books = default!;
 
  private HashSet<Book> selectedBooks = new();
 
  private async Task<GridDataProviderResult<Book>> MyDataProvider(GridDataProviderRequest<Book> request)
  {
    if (books is null)
    {
      books = GetBooks();
    }
    return await Task.FromResult(request.ApplyTo(books));
  }
 
  private IEnumerable<Book> GetBooks()
  {
    return new List<Book> {
        new Book { Id = 1, Title = "大亨小傳", Price = 105 },
        new Book { Id = 2, Title = "梅岡城故事", Price = 210 },
        new Book { Id = 3, Title = "一九八四", Price = 315 },
        new Book { Id = 4, Title = "傲慢與偏見", Price = 420 },
        new Book { Id = 5, Title = "麥田捕手", Price = 525 },
        new Book { Id = 6, Title = "哈比人", Price = 630 },
        new Book { Id = 7, Title = "白鯨記", Price = 735 },
        new Book { Id = 8, Title = "戰爭與和平", Price = 840 },
        new Book { Id = 9, Title = "奧德賽", Price = 945 },
        new Book { Id = 10, Title = "罪與罰", Price = 1050 },
        new Book { Id = 11, Title = "紅樓夢", Price = 1155 },
        new Book { Id = 12, Title = "西遊記", Price = 1260 },
        new Book { Id = 13, Title = "水滸傳", Price = 1365 }
    };
  }
  private Task OnSelectedItemsChanged(HashSet<Book> employees)
  {
    selectedBooks = employees;
    return Task.CompletedTask;
  }
 
}

 

 


在「Grid」元件的下方，範例程式碼利用「@selectedBooks.Count」語法顯示選取的資料筆數，並用清單來顯示選取的顯示選取的書籍名稱清單。 

在程式碼區段中「HashSet」泛型型別的「selectedBooks」變數用來儲存選取的資料，並在「OnSelectedItemsChanged」方法中，當選取的項目改變時，更新「selectedBooks」集合，這個範例執行結果請參考下圖所示： 



圖 4：啟用選取資料橫列的功能。 

Filter轉換 


預設啟用「Grid」元件的資料篩選功能，可透過「FilterOperator」屬性來控制篩選進階條件，如大於、等於、包含等運算子。在執行時期，預設使用英文來顯示這些運算子，若要客製化改為比較接地氣的文字，可以撰寫「FiltersTranslationProvider」，參考以下範例程式碼： 
GridDemo.razor 


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




圖 5：Filter轉換。

0

0 意見:

張貼留言