Blazor Bootstrap で Grid コンポーネントを使う

Last updated at 2025-09-21Posted at 2025-09-21

はじめに
- 記事の目的と背景
  VS Code と .NET8/9 を利用して、Blazor Bootstrap プロジェクトを構築したときの備忘録
  Blazor Bootstrap を利用したかった理由としては、PDF Viewer コンポーネントを簡単に利用したかったから。
- 想定読者
  Blazor Bootstrap を利用したプロジェクトを VS Code と .NET8/9 で構築したい人向け。
環境・前提条件
- 使用したOS／バージョン
  Windows11
- 開発環境（IDE、ライブラリ、クラウドなど）
  Windows11, VS Code
- 前提知識や準備しておくべきこと
  .Net8/9 のインストール
  VS Code のインストール
  Blazor Bootstrap プロジェクトの作成

準備

Blazor Page の追加

メニューにページを追加
MainLayout.razor のメニューリストに追加

    navItems = new List<NavItem>
               {
                   new NavItem { Id = "1", Href = "/", IconName = IconName.HouseDoorFill, Text = "Home", Match=NavLinkMatch.All},
                   new NavItem { Id = "2", Href = "/counter", IconName = IconName.PlusSquareFill, Text = "Counter"},
                   new NavItem { Id = "3", Href = "/weather", IconName = IconName.Table, Text = "Fetch Data"},
                   new NavItem { Id = "101", Href = "/gridview", IconName = IconName.Table, Text = "Grid Sample"},
               };

Pages フォルダに GridView.razor ファイルを追加する。

Grid の表示

コンポーネントの貼り付け
GridView.razor ファイルにコードを記述する。

@page "/gridview"

<h3>GridView</h3>

<Grid TItem="Employee1"
      AllowFiltering="true"
      AllowPaging="true"
      AllowSorting="true"
      AllowSelection="true"
      Class="table table-hover table-bordered table-striped"
      DataProvider="EmployeesDataProvider"
      PageSize="5"
      Responsive="true"
      RowKeySelector="(emp) => emp.Id"
      SelectedItemsChanged="OnSelectedItemsChanged"
      SelectionMode="GridSelectionMode.Multiple">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" FilterTextboxWidth="50" FilterTextboxWidthUnit="Unit.Percentage" SortKeySelector="item => item.Name">
            @context.Name
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
            @context.Designation
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
            @context.DOJ
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

<div class="mt-3">
    Selected Items Count: @selectedEmployees.Count
</div>

<div class="mt-2">
    Selected Employees:
    <ul>
        @foreach (var emp in selectedEmployees)
        {
            <li>@emp.Name</li>
        }
    </ul>
</div>

@code {
    private IEnumerable<Employee1> employees = default!;

    private HashSet<Employee1> selectedEmployees = new();

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }
    private class Employee1
    {
        public int Id { get; set; }
        public string? Name { get; set; }
        public string? Designation { get; set; }
        public DateOnly DOJ { get; set; }
        public bool IsActive { get; set; }
    }

    private Task OnSelectedItemsChanged(HashSet<Employee1> employees)
    {
        selectedEmployees = employees is not null && employees.Any() ? employees : new();
        return Task.CompletedTask;
    }
}

実行します。

簡単ですね。

ハマったポイント・トラブルシューティング
- 実際に遭遇したエラーや課題
  Employee1 クラスの定義がサンプルサイトには定義がなかったので、自分で記述しました。
- 解決方法と参考リンク
使ってみた感想
- 良かった点／イマイチだった点
  コンポーネントの貼り付けだけで簡単にマークダウンを挿入できます。エディタにもなります。非常に簡単ですね。
まとめ
- 記事の総括
  今回はマークダウンをrazorページ内に埋め込みを行いました。
  Blazor のソースコードはやはりシンプルでよいです。
  簡単にコピペして動作確認できますね。
  今後、chart や grid を使った記事を書いていく予定。
- 参考資料のリンク
  Blazor Bootstrap のセットアップマニュアル(getting started)
  https://demos.blazorbootstrap.com/getting-started

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up