Amazon

2020年10月
        1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

最近のトラックバック

無料ブログはココログ

« .Net Core ASP.NET MVCをLinux(Debian + Docker)で動かしてみる : Nginx on Docker編 | トップページ | Docker上のgitlabでDockerレジストリの機能を有効化する »

2020年8月25日 (火)

Blazor WebAssemblyでもう少し遊んでみる(.NET Core v3.1 + VisualStudio2019)

前回あまりにも面白かったのでもう少しBlazorで遊んでみる事にします。




会社で在社状況を示すホワイトボードみたいなものがあるとします。これを電子化するイメージで画面を作成してみます。
(何故これを題材にした…社畜か…)

・コンポーネントの作成

まず、個人単位の在社状況を示すコンポーネントを作成します。このコンポーネントの属性は以下の通りです。

  ・名前
    UIでは表示のみです。変更はできません
  ・状況
    Select要素で「在社・外出・退社」が選択可能です


結果的に以下の様なソースコードになりました。



要点解説

  1. Bootstrapを使用しています、以下の様なClassはBootstrapによる指定です
    

  2. Name / AttendanceStateは親コンポーネントからbind出来る様にしてあります
    bindするための条件として
      ・属性[Parameter]が必要
      ・publicなプロパティが必要
      ・publicなイベントが必要(重要)
      ・値が変わった場合にイベントの発生が必要


    これは Name と AttendanceState のぞれぞれで定義してあります。

以上です。ちょっと面倒ですが、イベントの作成は重要です。


・親コンポーネント(Webページ)の作成

続いて、親コンポーネントを作成します。ポイントは以下の通りです。

  ・OnParametersSetメソッドでパラメータを初期化する
    今回はべたに実装してあります。このメソッドはページ作成時に呼び出されます。

  ・Employeeクラスの定義
    データを保持する為のクラスを定義します。このクラスを使用する事により、ページ内でこれらの値を
    扱い易くします。
      Name … 名前
      EmployeeID … 社員ID
      State … 状態


  ・クラスとコンポーネントの属性のバインド
    Employeeクラスとコンポーネントのプロパティをバインドする事により値を操作できるようにします



以上です。実行すると以下の様な画面が表示されます。

Blazor200530_01

勿論、Select要素の選択肢を変更すると、ちゃんと下部に作成してある結果テストする領域の表示が連動して変化します。
また、Bootstrapと併用が可能です。今回はBootstrapのパネルを使用していますので、ちゃんとレスポンシブに表示されています。
画面が細くなるとちゃんと表示も切り替わります。

Blazor200530_02

Blazor200530_03

以上です。ちょっと癖はありそうですが、感動的な作りやすさです。これは…是非流行っていただきたい。。。



以上です。これは非常に便利です。慣れ親しんだC#でここまでの画面が作成できるとなるとちょっとしたSPAだけでなく ごてごてとした高機能な画面まで作りたくなってしまいますね!(お勧めはしませんが…) また、画面のデザインと動作が程よいイメージで連動できるようになっていると感じます。これもまた分かりやすいコーディングが 出来ると感じます。





さて、今回の作業はThinkpad T440pで一通り試しました。このPCは2013年10月発売のPCでそろそろ発売から7年以上経つような 昔であれば骨董品と言っても良いようなPCのはずですが、何不自由なく使用できています。最近は、PCの進化が止まってしまって いる様な気がしていてちょっと心配だったりします。会社では、もっと新しいPCも使っていますが、正直な所、重さと画面解像度以外は 新しいPCと比べても殆ど差を感じないのがちっょとだけ残念です。昔は少ないお小遣いをやりくりしてパーツを交換してパソコンを 高性能化するのをある意味楽しんでいましたが、そういう事も殆どしなくなってしまいました。 (その代わり中古パソコンをまるっと買っている気もしますが…)










« .Net Core ASP.NET MVCをLinux(Debian + Docker)で動かしてみる : Nginx on Docker編 | トップページ | Docker上のgitlabでDockerレジストリの機能を有効化する »

C#」カテゴリの記事

コメント

コメントを書く

(ウェブ上には掲載しません)

« .Net Core ASP.NET MVCをLinux(Debian + Docker)で動かしてみる : Nginx on Docker編 | トップページ | Docker上のgitlabでDockerレジストリの機能を有効化する »