ASP.NET Core Blazor WebAssembly - データバインディングの基礎【フロントエンド開発入門者向け】

こんにちは！古堅です。

本記事では、ASP.NET Core Blazor (以下 Blazor) のデータバインディングの基礎について解説します！

データバインディングとは

データバインディング（データバインド、データ結合）は、データと対象を結びつけ、データあるいは対象の変更を暗示的にもう一方の変更へ反映する仕組みです。

ASP.NET Core Blazor データ バインディング

Blazor では、主にビュー層 (HTML/CSS) と ビジネスロジック (C#) のデータ同期を行う事が目的

Blazor では、主にビュー層 (HTML/CSS) と、ビジネスロジックである C# のデータと同期するために利用されます。

よくある例 : 入力フォームの値を C# へ同期する

よくある利用シナリオとしては、入力フォームの値を C# へ同期するシナリオです。

例えば、個人情報の登録が必要なシステムにおいて、

① 名前、生年月日、住所といった画面項目の内容を C# に同期

② C# からデータを登録するために、入力内容をバックエンドに送信

などのシナリオの、上記①をデータバインディング機能を用いて実現します。

サンプル

サンプルコードと動作サンプル(動画)を下記に記載しました。

(動作サンプル)
入力内容の同期確認のために、右側に確認フォームを配置しています。

それでは、サンプルコードを基にデータバインディングについて解説します。

EntryPage.razor

<EditForm Model="@people">

    <!-- 姓 -->
    <p>
        <label class="entry-label">
            姓
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.LastName"></InputText>
        </div>
    </p>

    <!-- 名  -->
    <p>
        <label class="entry-label">
            名
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.FirstName"></InputText>
        </div>
    </p>


    <!-- 生年月日 -->
    <p>
        <label class="entry-label">
            生年月日
        </label>
        <div class="entry-input">
            <InputDate @bind-Value="people.Birthday"></InputDate>
        </div>
    </p>

    <!-- 郵便番号  -->
    <p>
        <label class="entry-label">
            郵便番号
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.ZipCode"></InputText>
        </div>
    </p>


    <!-- 住所  -->
    <p>
        <label class="entry-label">
            住所
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Address"></InputText>
        </div>
    </p>

    <!-- 電話番号  -->
    <p>
        <label class="entry-label">
            電話番号
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Phone"></InputText>
        </div>
    </p>

    <!-- メールアドレス  -->
    <p>
        <label class="entry-label">
            メールアドレス
        </label>
        <div class="entry-input">
            <InputText @bind-Value="people.Email"></InputText>
        </div>
    </p>

</EditForm>

PeopleModel.cs

    public class PeopleModel
    {
        public string LastName { get; set; }

        public string FirstName { get; set; }

        public DateTime Birthday { get; set; }

        public string ZipCode { get; set; }

        public string Address { get; set; }

        public string Phone { get; set; }

        public string Email { get; set; }

    }

@bind プロパティ

@bind-プロパティ名 と記載することで、コンポーネントのプロパティとデータバインディングを行うことが出来ます。

上記サンプルコードでは、各コンポーネントの "Value" プロパティとデータバインディングを行うため、@bind-Value と記載しています。

例えば、住所の入力値を C# 側の PeopleModel データクラスの住所 (Address) プロパティとデータバインディングするために、下記のように記載します。

<InputText @bind-Value="people.Address"></InputText>

EditForm コンポーネント

EditForm は、入力フォームを配置するためのコンポーネントです。

本記事では取り扱っていませんが、入力検証や、検証エラー時のメッセージの表示など、入力フォームに関連する便利な機能をサポートしています。

※次回の記事にて入力検証に関する記事を執筆予定ですので、ご興味があればご覧ください！

InputText , InputDate コンポーネント

InputText および InputDate コンポーネントは Blazor が標準で提供しているコンポーネントです。

それぞれ、

InputText は、テキスト形式の入力

InputDate は、日付形式の入力

を取り扱う事ができます。

組み込みフォームのコンポーネント

まとめ

本記事では、Blazor アプリケーションのデータバインディングについて解説しました。

次回の記事では、入力検証に関する記事を執筆予定です。

開発全般に関するご相談はお任せください！

インフラジスティックス・ジャパンでは、各プラットフォームの特別技術トレーニングの提供や、開発全般のご支援を行っています。

「古い技術やサポート終了のプラットフォームから脱却する必要があるが、その移行先のプラットフォームやフレームワークの検討が進まない、知見がない。」

「新しい開発テクノロジーを採用したいが、自社内にエキスパートがいない。日本語リソースも少ないし、開発を進められるか不安。」

「自社のメンバーで開発を進めたいが、これまで開発フェーズを外部ベンダーに頼ってきたため、ツールや技術に対する理解が乏しい。」

「UIを刷新したい。UIデザインやUI/UXに関する検討の進め方が分からない。外部のデザイン会社に頼むと、開発が難しくなるのではないか、危惧している。」

といったご相談を承っています。

お問い合せはこちらからお気軽にご相談ください。