文書の過去の版を表示しています。

Blazor

便利ツール

テーブル作成

Tips

初回アクセスページ

Blazor Server

Pages フォルダにある「_Host.cshtml」ファイルとなる。

Blazor WebAssembly

wwwroot フォルダにある「index.html」ファイルとなる。

UIフレームワーク

MatBlazor が一番有名な UI フレームワークなのですが、GitHub のスターがより多い「Ant Design Blazor」となる。
【無料】Blazor 対応の「使える」UI フレームワーク５選

https://ant.design/components/overview/

AntDesign 採用例

BlazorStrap 採用例

Blazor に Boostrap 5 を採用したもの

Blazor WebAssembly で色々便利に使えそうな BlazorStrap

Blazor Server Side へのインストール方法

https://blazorstrap.io/VNext/V5

nuget から BlazorStrap と BlazorStrap.V5 の2つのパッケージをダウンロードします。
_host.cshtml を次のように変更します。
1. <head>追加されていることを確認 (YourAssemblyName)の部分は書き換える
  1. <link rel=“stylesheet” href=“css/bootstrap/bootstrap.min.css” />
  2. <link href=“(YourAssemblyName).styles.css” rel=“stylesheet”>
2. <body>追加の最後に
  1. <script src=“_content/BlazorStrap/popper.min.js”></script>
  2. <script src=“_content/BlazorStrap/blazorstrap.js”></script>
_Program.cs に追加
1. using BlazorStrap;
2. builder.Services.AddBlazorStrap();
_Imports.razor に追加
1. @using BlazorStrap.V5

NuGet参照したフレームワークの場所「_content」

NuGet参照したUIフレームワークの「BlazorStrap」など

以下の命名則の URL で、これらの静的 Web アセットを参照できる。

“_content/“で始まり、
続けて、パッケージの名前、
最後に、アセットファイルのファイル名

<script src="_content/BlazorStrap/popper.min.js"></script>
<script src="_content/BlazorStrap/blazorStrap.js"></script>

NuGetのパッケージキャッシュフォルダは、デフォルトは「%userprofile%\.nuget\packages」

スタートアップページの設定

Blazor アプリケーションのスタートアップページは Index.razor です。
これを Login.razor に変更したい場合、下記のようにします。

Index.razorから「@page ”/“」を削除します。
Login.razor に「@page ”/“」を追加します。

Setting a startup page in Blazor - stackoverflow

アイコン使用

Bootstrap Icons

1,800以上のアイコンが使用できる。
https://icons.getbootstrap.com/

本家からはnpmのみで、NuGetによるインストールは用意されていない。

Using Bootstrap Icons in ASP.NET Core Blazor project

任意のサイズ

font-size と color を使用して、アイコンの外観を変更
https://bootstrap-guide.com/extend/icons/bootstrap-icons

<i class="bi bi-alarm" style="font-size: 2rem; color: cornflowerblue;"></i>

FontAwesome

Web系の開発でアイコン表示などによく使われている。

現時点で、Font Awesome 6が最新である。

Open Iconic

.NET 7までは、「Open Iconic v1.1.1」のアイコン223種類が使用できる。.NET 8から除外された。
https://www.nsbasic.com/app/OpenIconic.html

Open Iconicは223ものアイコンをOSSとして公開されているアイコンフォントです。EOTやWOFF、OTFだけでなく、PNG、SVGなどのフォーマットも用意されています。また、マルチカラー化や用意された複数サイズのフォントを利用してRWDに対応する、等も可能のようです。シンプルで汎用性の高そうなデザインですね。ライセンスはMIT、フォントはOFLとして公開されています。
オープンソースとして公開されているアイコンフォントのセット・「Open Iconic」

ナビゲーションのホームアイコン

<span class="oi oi-home"></span>

Razorコンポーネントのライフサイクル

【Blazor】Razorコンポーネントのライフサイクルを解説する

実行の順番

メソッド名	呼び出し	補足
SetParametersAsync	パラメーターが設定されるタイミング
OnInitialized(Async)	コンポーネントが初期化されるタイミング
OnParametersSet(Async)	コンポーネントが初期化されるタイミングと、受け取るパラメータが更新されたタイミング
OnAfterRender(Async)	コンポーネントがレンダリングされたあと	初回実行のときは、引数の firstRender が true となる
ShouldRender	コンポーネントがレンダリングされるたび	true を返すとレンダリングを続行する
StateHasChanged	レンダリングしたい任意のタイミング	コストが高いので不必要に呼び出さないこと

Razorコンポーネントのステート

Blazor のコンポーネントのステートについて

ステートの変更通知はどのようなタイミングで発生するのかですが、おおまかに下記の3パターンで発生します。

StateHasChanged メソッドを明示的に呼び出したとき
イベント発火時 (@bind や @onclick とか)
Parameter が変わったとき

2つ目と3つ目は暗黙的に StateHasChanged を呼び出している。
StateHasChanged はステートが変更されたことを通知するメソッドです。このメソッドを呼び出すと再レンダリング候補としてマークされます。

コードビハインド

razorファイルの中にHTML要素とバインドするC#コードを合わせた記載はやめて、razorコンポーネントとC#コードを分離して記載する。
Blazorでコードビハインドでロジックとビューを分離して記述する

ロジックとビューを分離することで、下記のようなメリットなどが得られます。

ロジックに対するUnitTestの記載が可能
基底のコンポーネントクラスの作成などによる共通処理の作成

方法

raozrファイルと対になるようにcsのファイルを作成するだけです。

Counter.razor Counter.razor.cs(追加)

コード側のクラスには、partialキーワードを付けます。
例 public partial class Counter

最大長(maxlength)を設定する方法

BlazorのInputコンポーネントに maxLength が見つからない。

これらの組み込みコンポーネントは、レンダリングされた出力に HTML 属性を渡します。したがって、例で行ったのとまったく同じように、HTML 属性を指定するだけでかまいません
How to set textarea/input max length in Blazor - stackoverflow

組み込み専用の属性がないだけで、HTML 属性はそのまま指定すれば機能する。

<BSInput InputType="InputType.Text" placeholder="工程コード" Value="@("")" maxlength="5"  />

ボタンにフォーカスを設定する方法

UIフレームワーク未使用

有名なUIフレームワークでも、Buttonのフォーカスが用意されていないことがあるので、その場合に標準機能で代替する。

<button class="btn btn-primary" @onclick="IncrementCount" @ref="ControlButton">Click me</button>
@code {
    public ElementReference? ControlButton { get; set; } = default!;
 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ControlButton != null)
            await ControlButton.Value.FocusAsync();
     }
}

BlazorStrap使用

※BlazorStrap/5.2.100-Preview3b が必要
https://github.com/chanan/BlazorStrap/issues/599

<BSButton Color="BSColor.Primary"@onclick="IncrementCount" @ref="ControlButton">Click me</BSButton>
@code {
    public ElementReference? ControlButton { get; set; } = default!;
 
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (ControlButton != null && ControlButton.Element != null)
            await ControlButton.Element.Value.FocusAsync();
     }
}

BSInputGroupを中央寄せにする方法

BSInputGroupでdisplay:flex となっているため、style属性で”display:block に書き換えてから中央寄せ(text-align: center)とする。

<BSInputGroup MarginBottom="Margins.Medium" style="display:block; text-align: center">
    <div Class="@BS.Form_Check_Inline">
        <BSInputRadio CheckedValue="@("on")" @bind-Value="_value" @onchange="OnChange" />
        <BSLabel IsCheckLabel="true">バーコード</BSLabel>
    </div>
    <div Class="@BS.Form_Check_Inline">
        <BSInputRadio CheckedValue="@("off")" @bind-Value="_value" @onchange="OnChange" />
        <BSLabel IsCheckLabel="true">手動選択</BSLabel>
    </div>
</BSInputGroup>

Boostrap 5による変更点

bootstrap5では中東の言語で主流である右書きに対応したことからleft→start、right→endという概念の変更が導入されました。
これにより、ml-〇 → ms-〇にmr-〇 → me-〇というようにクラス名が変更になりました。

【bootstrap5】classのml、plとmr、prの名称が変更

HTMLタグを出力する

MarkupStringオブジェクトにキャストすることでタグの内容を出力できます。

例

<div>
  <button @onclick="ButtonClick">Button1</button>
  <p>@((MarkupString)messageText)</p>
</div>
@code {
  string messageText;
 
  void ButtonClick()
  {
    messageText = "<h3>見出しです</h3><p>My Button Clicked</p>";
  }
}

最上位のCSSを定義

フォントサイズなど、bootstrap.css で定義されたサイズが優先されてしまう場合、important.css にてCSSを定義することにより優先させるようにする。

_Host.cshtml

    <link rel="stylesheet" href="css/important.css" />
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />

画面サイズによりフォントサイズを変更する。

important.css

.font-adjust {
    font-size: 16px !important;
}
 
    @media (min-width: 760px) {
        .font-adjust {
            font-size: calc(16px + ((1vw - 7.6px)*(16/4.4))) !important;
        }
    }
 
    @media (min-width: 1200px) {
        .font-adjust {
            font-size: 32px !important;
        }
    }

【HTML】フォントサイズの指定方法・単位・変わらない時の対処法まとめ

テキストボックスのEnterキーでサブミットさせる

IsSubmit=“true” を付けることで、Enterキーでサブミットさせることが出来る。

<BSInput InputType="InputType.Text" IsSubmit="true"  @bind-Value="Model.Input1" class="font-adjust" />

MainLayout コンポーネント側にデータを反映させる

カスケーディングを使用してパラメーターを渡す。

カスケードとは、もともと「連なった小さな滝」という意味があります。
Blazor では滝が流れるイメージで、上位の階層から下位の階層にパラメーターを渡すことができる仕組みがあります。
これが「カスケーディングパラメーター」です。

【Blazor】カスケーディングを使ってパラメーターを渡す方法

[SOLVED]-IS THERE ANY WAY TO COMMUNICATE TO MAIN LAYOUT OF BLAZOR PAGES-BLAZOR

クライアントのIPアドレスの取得

BlazorServerではサーバーで動作しているので、クライアントのIPアドレスを取得するにはクライアントから情報を取得する。
MainLayoutの子コンポーネント側に表示させるため、カスケーディングを使用してパラメーターを渡す方式にした。

BlazorServerでクライアントのIPアドレスを全ページで共有する

クエリパラメーターのセットと取得

単独変数

var parameter = new Dictionary<string, object?>
{
    { "CPCode", value },
    { "TermID", Layout.Info.IPAddress }
};
var newuri = Navigation.GetUriWithQueryParameters("./Machine", parameter);
Navigation.NavigateTo(newuri, false);

[Parameter, SupplyParameterFromQuery]
public string? CPCode { get; set; }
 
[Parameter, SupplyParameterFromQuery]
public string? TermID { get; set; }

複数変数

var readOnlyDictionary = new Dictionary<string, object>
{
    ["film"] = 1,
    ["film"] = 2,
};
 
var uri = Navigation.GetUriWithQueryParameters(readOnlyDictionary);

// http://localhost:5000/MovieComparer?film=1&film=2&film=3
[Parameter, SupplyParameterFromQuery(Name = "film")]  
public string[]? Films { get; set; }

参照

セッションの扱い(状態管理)

ASP.NET Core Blazor 状態管理

コンポーネント内でデータを保存し、読み込む

ブラウザーストレージのデータの読み込みまたは保存が必要なすべてのコンポーネントで、@inject ディレクティブを使用して、次のいずれかのインスタンスを挿入します。

ProtectedSessionStorage
ProtectedLocalStorage

BlazorでWeb Storageを利用して一時的にデータを保存する方法

メモリ内状態コンテナーサービス

入れ子になったコンポーネントと入れ子になっていないコンポーネントでは、登録済みのメモリ内状態コンテナーを使用してデータへのアクセスを共有できます。

Scopeについて

メソッド	内容
AddTransient()	インジェクション毎にインスタンスを生成
AddScoped()	リクエスト毎にインスタンスを生成
AddSingleton()	アプリケーション内で１つのインスタンスを生成

Program.cs

builder.Services.AddScoped<StateContainer>();

injectの記載方法

ディレクティブ記法でオブジェクトをインジェクトします。

xxxx.razor

@inject 【インジェクトするオブジェクトの型】 【インジェクトする変数名】
 
@inject StateService Service

上記の書き方以外にコードブックにて[Inject]属性を付与する記法があります。今後コードビハインドで記述するならこっちの方が分かりやすいです。

xxxx.razor.cs

[Inject]
private StateService Service { get; set; } = default!;

物理パスの取得

Blazor Serverの場合、Directory.GetCurrentDirectory() を使用すればいい。

string rootpath = System.IO.Path.Combine(System.IO.Directory.GetCurrentDirectory(), "wwwroot");

Web APIを追加

Blazor ServerにWeb APIを追加する。

サンプル

Controllerフォルダを作成
右クリックメニューから[追加]の[コントローラー]をクリックする
共通のAPIにある「読み取り/書き込みアクションがある API コントローラー」を選択して[追加]ボタンをクリックする
ValuesController.cs を追加する

下記コードをapp.Run()より前に、該当するところに追加する。

program.cs

// Add MVC Controllers
builder.Services.AddControllers();
 
app.MapRazorPages();
app.MapControllers();

Urlにてapiの後にコントローラー名を入れてアクセスすれば、値が返ってくる。

https://localhost:7072/api/Values

参照

HttpClientの使用

「@Inject HttpClient httpClient」を使用すると下記エラーが発生する。

Unhandled Promise Rejection: Error: System.InvalidOperationException: Cannot provide a value for property 'Http' on type . There is no registered service of type 'System.Net.Http.HttpClient'.

Server-side Blazor does not provide HttpClient for injection - stackoverflow

Injectを使用しないで、new HttpClient() とする。

ボタンクリックイベントでSUBMIT処理

ボタンクリックイベントでは、F1キーを入力させたようにしたいため、IsSubmit(type=“submit”)を使わないで制御したい。

<BSButton Color="BSColor.Info" Class="font-adjust" IsSubmit="true">
                                                      ↓
<BSButton Color="BSColor.Info" Class="font-adjust" OnClick="@OnMenuClick">

メニューボタンをクリックしたら、入力値にF1キーをセットしてSUBMIT処理を呼ぶ。

public void OnMenuClick()
{
    MatchViewModel Model = new();
    Model.Input1 = Const.INPUT_KEY_F1;
 
    EditContext e = new(Model);
    OnSubmit(e);
}

ログ出力にlog4netを使用する

Structured Logging in ASP.NET Core With log4net

log4net.config

<?xml version="1.0" encoding="utf-8"?>
<configuration>
    <log4net>
      <appender name="RollingFileAppender" type="log4net.Appender.RollingFileAppender">
        <param name="Encoding" value="utf-8" />
        <!-- ファイル名 -->
        <param name="File" value="../../../logs/KEYENCE/ServerLog/IIS" />
        <!-- 追記する場合true/上書きする場合false -->
        <param name="AppendToFile" value="true" />
        <!-- 日付や時刻の制約によるログファイルの切替 -->
        <param name="RollingStyle" value="Date" />
        <param name="DatePattern" value='"."yyyy-MM-dd-HH".log"' />
        <param name="StaticLogFileName" value="false" />
        <layout type="log4net.Layout.PatternLayout">
          <param name="ConversionPattern" value="%d [%t] %-5p %c [%x] - %m%n" />
        </layout>
      </appender>
      <root>
        <level value="ALL" />
          <appender-ref ref="RollingFileAppender" />
      </root>
    </log4net>
</configuration>

目次