初めに
この記事は「NEXTSCAPE Advent Calendar 2020」の19日目です。
Razor コンポーネントを作成してみる
業務アプリケーションにおいては、ある画面項目に値を入力したら自動的に他の項目にデータが入力される動きをするものがありますが、
それをBlazor(Razorコンポーネント)でどのように実装できるか知りたかったので、簡単なものを作成してみました。
で、どんなものを作ろうかと思ったのですが、市町村コードを入力したら対応する市町村名が出るコンポーネントを作成してみました。
テキストボックスに市町村コードを入力し、テキストボックスをフォーカスアウトした時点で対応する市町村名を取得する動きとしています。
ソースコード
@inject AdventCal2020.Data.PrefectureCodeService prefCodeService
<input type="text" @bind="@Code" @onfocusout="OnForcusOut"/><input @bind="Name" readonly style="border:#000000" />
@code {
string Code { get; set; }
string Name { get; set; }
private void OnForcusOut(FocusEventArgs focusEvent)
{
var code = Code;
Name = prefCodeService.Find(code);
}
}
@inject でprefCodeServiceをinjectするには Startup.ConfigureServices(IServiceCollection) 内で↓を記述してDIの設定を行う必要があります。
(もちろんスコープはオブジェクトによって変更する必要あり。)
services.AddSingleton<PrefectureCodeService>();
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace AdventCal2020.Data
{
public class PrefectureCodeService
{
private static Dictionary<string, string> _lists = new Dictionary<string, string>()
{
{"13101", "東京都千代田区"}, {"13102", "東京都中央区"}, {"13103", "東京都港区"}, {"13104", "東京都新宿区"}, {"13105", "東京都文京区"},
{"13106", "東京都台東区"}, {"13107", "東京都墨田区"}, {"13108", "東京都江東区"}, {"13109", "東京都品川区"}, {"13110", "東京都目黒区"},
{"13111", "東京都大田区"}, {"13112", "東京都世田谷区"}, {"13113", "東京都渋谷区"}, {"13114", "東京都中野区"}, {"13115", "東京都杉並区"},
{"13116", "東京都豊島区"}, {"13117", "東京都北区"}, {"13118", "東京都荒川区"}, {"13119", "東京都板橋区"}, {"13120", "東京都練馬区"},
{"13121", "東京都足立区"}, {"13122", "東京都葛飾区"}, {"13123", "東京都江戸川区"}, {"13201", "東京都八王子市"}, {"13202", "東京都立川市"},
{"13203", "東京都武蔵野市"}, {"13204", "東京都三鷹市"}, {"13205", "東京都青梅市"}, {"13206", "東京都府中市"}, {"13207", "東京都昭島市"},
{"13208", "東京都調布市"}, {"13209", "東京都町田市"}, {"13210", "東京都小金井市"}, {"13211", "東京都小平市"}, {"13212", "東京都日野市"},
{"13213", "東京都東村山市"}, {"13214", "東京都国分寺市"}, {"13215", "東京都国立市"}, {"13218", "東京都福生市"}, {"13219", "東京都狛江市"},
{"13220", "東京都東大和市"}, {"13221", "東京都清瀬市"}, {"13222", "東京都東久留米市"}, {"13223", "東京都武蔵村山市"}, {"13224", "東京都多摩市"},
{"13225", "東京都稲城市"}, {"13227", "東京都羽村市"}, {"13228", "東京都あきる野市"}, {"13229", "東京都西東京市"}, {"13303", "東京都西多摩郡瑞穂町"},
{"13305", "東京都西多摩郡日の出町"}, {"13307", "東京都西多摩郡檜原村"}, {"13308", "東京都西多摩郡奥多摩町"}, {"13361", "東京都大島町"},
{"13362", "東京都利島村"}, {"13363", "東京都新島村"}, {"13364", "東京都神津島村"}, {"13381", "東京都三宅島三宅村"}, {"13382", "東京都御蔵島村"},
{"13401", "東京都八丈島八丈町"}, {"13402", "東京都青ヶ島村"}, {"13421", "東京都小笠原村"}
};
public string Find(string prefCode) => string.IsNullOrWhiteSpace(prefCode) ? string.Empty: (_lists.TryGetValue(prefCode, out string ret)) ? ret : string.Empty;
}
}
これを実装して.razorファイルに <PrefCode />と入力するだけでテキストボックスが表示され、先に書いたように市町村コードを入れるだけで、市町村名が出るようになります。
（上記の実装だと東京都のみとなってしまいますが………）
またもちろんPrefectureCodeService.Find(string)の実装によってはDB等の外部リソースに対して検索をしてそのデータを表示をすることも可能となります。
本当に簡単な実装ではありますが、C#でクライアントサイドの動きが書けるのはC#の生産性の高さが生かせることが感じられました。
C#メインの方がWebのクライアントサイドを実装する際にBlazorを採用すると、とても幸せになれそうですね。
簡単にでしたが、以上です。