LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@miyamocchi(masanao miyamoto)inエヌシーアイ総合システム

VSCodeでBlazor Bootstrap プロジェクトを作成する

Posted at

  1. はじめに

    • 記事の目的と背景
      VS Code と .NET9 を利用して、Blazor Bootstrap プロジェクトを構築したときの備忘録
      Blazor Bootstrap を利用したかった理由としては、Markdonw コンポーネントを利用したかったから。
    • 想定読者
      Blazor Bootstrap を利用したプロジェクトを VS Code と .NET8/9 で構築したい人向け。

  2. 環境・前提条件

    • 使用したOS／バージョン
      Windows11

    • 開発環境（IDE、ライブラリ、クラウドなど）
      Windows11, VS Code

    • 前提知識や準備しておくべきこと
      .Net8/9 のインストール
      VS Code のインストール

  3. インストール・セットアップ

    • インストール手順
      コマンドプロンプトから dotnet new コマンドでプロジェクトを作成する。
    dotnet new blazor -o bssamp1

    作成したプロジェクトフォルダに移動。

    cd bssamp1

    ソリューションファイルを作成しておく。

    dotnet new sln

    VS Code を起動

    code .

    パッケージマネージャで Blazor.BootStrap をインストール
    image.png

    image.png

    • 初期設定
      公式ページの getting-started の通りにファイルを修正する。
      Components/App.razor の行の下に追加
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
<link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />

    Components/App.razor ファイルの、_framework/blazor.web.js　行の下に追加

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
<!-- Add chart.js reference if chart components are used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"</script>
<!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Add sortable.js reference if SortableList component is used in your application. -->
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>

    Program.cs にBlazor Bootstrap サービスを追加する。

    builder.Services.AddBlazorBootstrap();

    Components/_Imports.razor に参照を追加

    @using Blazor.Bootstrap;

    Remove default references

    1. bootstrap フォルダーの削除
      wwwroot/css/bootstrap
    2. Components/App.razor から下記行を削除 
      <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />

  4. 実際に起動してみる。
    dotnet run コマンドで実行

    dotnet run

    起動画面

    image.png

    カウンターページにマークダウンを追加してみる。
    下記ソースを追加

    <div class="row border-bottom mb-3">
    <div class="col"><b>Markdown</b></div>
    <div class="col"><b>Preview</b></div>
</div>
<div class="row" style="max-height:486px;">
    <div class="col">
        <textarea class="form-control"
                  rows="18"
                  placeholder="Enter markdown here"
                  @bind="markdown"
                  @bind:event="oninput">
        </textarea>
    </div>
    <div class="col">
        <Markdown style="max-height: 437px;overflow-y:auto;">@markdown</Markdown>
    </div>
</div>

@code {
    private string markdown = "# Heading 1\n## Heading 2\n\n![BlazorBootstrap](https://demos.blazorbootstrap.com/images/logo/logo-color.svg =50)";
}

    image.png
    簡単にマークダウンを挿入できました。

  5. ハマったポイント・トラブルシューティング

    • 実際に遭遇したエラーや課題
      同等のモジュールに blazorbootstrap というのがあり、混在するので公式の通りに入力する必要がある。

    バージョンでテンプレートが異なるので、実際のソースを張っておく。

    Program.cs

    using bssamp1.Components;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddBlazorBootstrap();

// Add services to the container.
builder.Services.AddRazorComponents()
    .AddInteractiveServerComponents();

var app = builder.Build();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    app.UseExceptionHandler("/Error", createScopeForErrors: true);
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();


app.UseAntiforgery();

app.MapStaticAssets();
app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode();

app.Run();

    app.razor

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-LN+7fdVzj6u52u30Kp6M/trliBMCMKTyK833zpbD+pXdCLuTusPj697FH4R/5mcr" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
    <link href="_content/Blazor.Bootstrap/blazor.bootstrap.css" rel="stylesheet" />
    @* <link rel="stylesheet" href="@Assets["lib/bootstrap/dist/css/bootstrap.min.css"]" /> *@
    <link rel="stylesheet" href="@Assets["app.css"]" />
    <link rel="stylesheet" href="@Assets["bssamp1.styles.css"]" />
    <ImportMap />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="@InteractiveServer" />
</head>

<body>
    <Routes @rendermode="@InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/js/bootstrap.bundle.min.js" integrity="sha384-ndDqU0Gzau9qJ1lfW4pNLlhNTkCfHzAVBReH9diLvGRem5+R9g2FzA8ZGN954O5Q" crossorigin="anonymous"></script>
    <!-- Add chart.js reference if chart components are used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.0.1/chart.umd.js" integrity="sha512-gQhCDsnnnUfaRzD8k1L5llCCV6O9HN09zClIzzeJ8OJ9MpGmIlCxm+pdCkqTwqJ4JcjbojFr79rl2F1mzcoLMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add chartjs-plugin-datalabels.min.js reference if chart components with data label feature is used in your application. -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-datalabels/2.2.0/chartjs-plugin-datalabels.min.js" integrity="sha512-JPcRR8yFa8mmCsfrw4TNte1ZvF1e3+1SdGMslZvmrzDYxS69J7J49vkFL8u6u8PlPJK+H3voElBtUCzaXj+6ig==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <!-- Add sortable.js reference if SortableList component is used in your application. -->
    <script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
    <script src="_content/Blazor.Bootstrap/blazor.bootstrap.js"></script>

</body>

</html>

    MainLayout.razor

    @inherits LayoutComponentBase

<div class="bb-page">

    <Sidebar @ref="sidebar"
             IconName="IconName.BootstrapFill"
             Title="Blazor Bootstrap"
             DataProvider="SidebarDataProvider" />

    <main>
        <div class="bb-top-row px-4 d-flex justify-content-end">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>

        <article class="content px-4">
            <div class="py-2">@Body</div>
        </article>
    </main>

</div>

@code {
    Sidebar sidebar;
    IEnumerable<NavItem> navItems;

    private async Task<SidebarDataProviderResult> SidebarDataProvider(SidebarDataProviderRequest request)
    {
        if (navItems is null)
            navItems = GetNavItems();

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

    private IEnumerable<NavItem> GetNavItems()
    {
        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"},
                   };

        return navItems;
    }
}


<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

  6. まとめ

    • 記事の総括
      Blazor のソースコードはやはりシンプルでよいです。
      簡単にコピペして動作確認できますね。

    今後、chart や grid を使った記事を書いていく予定。

    • 参考資料のリンク

    Blazor Bootstrap のセットアップマニュアル(getting started)

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?