🐥note.

小鳥とMicrosoft <3 なエンジニアの技術Blog📚

Blazor

BlazorでChartを描画する

個人アプリで折れ線グラフやドーナッツチャートを描画したくなったので、Blazoriseを使用して描画してみました。 本エントリはその記録です。 Library探しの旅 JavaScriptならいっぱいLibraryがありますが、歴史の短いBlazorではそうはいきません。 いい感じ…

ASP.NET Core Update in .NET Core 3.1 Preview2の新機能について

Microsoft Igniteで盛り上がるIT界の裏では.NET Core 3.1 Preview2がリリースされました。 devblogs.microsoft.com それに合わせてASP.NET CoreとEntityFramework CoreもPreviewが公開されています。 devblogs.microsoft.com 本エントリではASP.NET Coreに追…

自作RazorClassLibraryの静的ファイルのロードができずに困った話

BlazorのComponentを別プロジェクト(RazorClassLibrary)へ切り分けた際、 Blazorから別プロジェクトの静的リソースへアクセスすることが出来ずにハマったので、それの件について記録します。 SolutionとProjectの作成 以下のコマンドでBlazorAppと、Componen…

Azure DevOpsでClient Side BlazorをCI/CDしてみる

こちらの記事の続きです。 blog.piyosi.com 本エントリでは 「GitHubに作ったClient Side BlazorのPrivate Repositoryのmaster branchへのコミットをトリガーにして、Azure DevOpsでBuild, UnitTest, Publishした後、Azure Storageの静的サイトへ自動デプロ…

Client Side BlazorをAzureの静的サイトにデプロイする

Azure StorageにClient Side Blazorをデプロイします。 Client Side Blazorの作成 Blazorのプロジェクトを作成し、Publish(発行)しておきます。 dotnet new blazorwasm -o ClientSideBlazorSample cd ClientSideBlazorSample dotnet publish -c Release -o o…

BlazorでDrag and Dropを実装する

Blazorで簡単なDrag and Dropを実装してみます。 デモ こんな感じです。 デモ コード 作ったコードはこちらにUpしてあります。 github.com

BlazorでFormatting Bindingする

@bindした値を表示する際に format を整えるにはformatパラメータを追加すればよいそうです。 docs.microsoft.com <input @bind="DateRecorded" @bind:format="dd/MM/yyyy" /> @code { private DateTime DateRecorded = DateTime.Now; } Microsoft Docsによると、現在は通貨形式や数値形式など、その他の書式指定式は…

BlazorのDataBindingで発火イベントを変更する

@bindによる双方向 DataBinding は以下の通りです。 <input @bind="CurrentValue" /> @code { private string CurrentValue { get; set; } } Microsoft Docsによると、@bind するタイミング(イベント)は変更できるようです。 docs.microsoft.com @bind 構文を使用して onchange イベントを…

Blazor Event名の一覧

Blazorで使用できるEventを列挙しました。 いずれもon{Event名}で使えるはずです。 Focus events Event 名 Args onfocus FocusEventArgs onblur FocusEventArgs onfocusin FocusEventArgs onfocusout FocusEventArgs Mouse events Event 名 Args onmouseover…

Blazor - TodoAppにValidationとNotifyServiceを追加する

こちらの記事の続きです。 blog.piyosi.com Todoアプリに以下の機能の改造を加えます。 新しいTodoを追加したら画面に通知を表示する(NotifyServiceで別Componentの関数をKick) Todoの内容が空っぽの時は登録できないようValidationを追加する ※子コンポーネ…

Blazor - TodoAppで学ぶComponentへのParameter Binding

BlazorのComponentへのParameter Bindingについて学ぶため簡単なTodoアプリを作りました。 今後暫くはこのアプリに手を加える形でBlazorのお勉強をしたいと思います。 github.com Microsoft Docsで言うとこのあたり docs.microsoft.com Demo こんな感じです…

Blazorの再接続画面をカスタマイズしてかわいい文鳥の画像を表示する

先日こちらの一連のツイートを見かけました。 togetter.com なるほど~ 確かにネコちゃんとか文鳥の画像が表示されたら怒りも収まるに違いない。 というわけでBlazorのリコネクト画面をカスタマイズしてみます。 カスタマイズ結果 こんな感じになりました。 …

ASP.NET CoreまたはBlazorをLocalで起動した時の警告画面を消す方法

ASP.NET CoreやBlazorをローカル環境で動かすと この接続ではプライバシーが保護されません とか このサイトは安全ではありません とか表示されますよね?こんな感じに。 起動時に表示されるアレ 上記ページを表示されないようにする小話です。

BlazorのLifecycleとShouldRenderの挙動について

こちらのサイトによるとBlazorには以下のLifecycleがあるそうです。 OnInitialized OnInitializedAsync OnParametersSet OnParametersSetAsync OnAfterRender OnAfterRenderAsync ShouldRender ShouldRenderは画面更新前に呼ばれ、画面更新するかどうかの判…

.NET Core 3.0のBlazorで作るMarkdown Editor(修正版)

※本エントリは先日投稿したエントリのコードを修正して投稿したものです。 .NET Core 3.0のBlazorコトハジメとしてリアルタイムプレビューに対応したMarkdownエディタを作ってみました。 Blazorのことよく分かってないので雰囲気で作った感が満載です。 デモ…

The Future of Blazor on the Clientの個人的まとめ

.NET Conf 2019が終わり、興奮冷めやらぬ.NETエンジニアの多いことかと思います。 .NET Confで"The Future of Blazor on the Client"というタイトルでBlazorの未来に関する発表がされました。 The Future of Blazor on the Client こちらの発表内容で気にな…

.NET Core 3.0のBlazor + ElectronでGUIアプリ開発

Electron.NETを使って.NET Core 3.0のBlazorをElectron上で動かしてみました

.NET Core CLIのdotnet watchでチョットだけ快適なTDD開発

.NET Core CLIのdotnet watchでチョットだけ快適なTDD開発 `dotnet watch`コマンドを使ってLive Unit TestっぽくTDDする話です。