Blazor

BlazorでTreeコンポーネントを使ってみる

Blazor WebAssemblyでTreeコントロールを利用したいと思いググったところ以下のようなコンポーネントを見つけました。 github.com 「Tree / Tag Selector / Page Panel」の3つのコンポーネントが提供されていますが、そのうちTreeについて試してみたいと思い…

BlazorでSPAするぞ!(8) - Validation -正式版対応済

Blazor連載ブログの続きになります。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 本記事では、Blazorでの入力Validation(入力検証)についてまとめたいと思います。 (本記事は、Blazor WebAssemblyを軸としています) 1. DataAnnotation(デー…

Blazor のPath Base(pathbase)について

1. はじめに Blazorのプロジェクトを作成すると、テンプレート選択が「Blazor(client)でもBlazor(ASP.NET core hosted)でも」、dotnet run によるデフォルトの実行構成は http://localhost:5000 でアプリをホストするようになります。 開発サーバーなのでhos…

Blazor でトースター表示する(sotsera.blazor.toaster)

1. はじめに Blazorでトースター メッセージを表示する sotsera.blazor.toaster を使ってみました。 github.com 2. サンプル実装 ではサクッと。 2.1. プロジェクト作成 プロジェクトを作成します。 プロジェクト名は use-sotsera-toaster としました。 dotn…

Blazor Extensions Logging を使ってログ出力する

1. はじめに Blazorでのロギングを試したいと思います。 まず本投稿で動作確認した各種環境は以下の通りです。 Windows 10 x64 .NET Core 3.0.100-preview5-011568 Blazor Extensions Logging 0.1.11 最もシンプルなロギングは標準機能「Console.WriteLine()…

Blazor [tips]: bindとonchangeの併用は不可

1. はじめに Blazorを調査しているときに、データバインディングについて理解していない段階で はまった ことを思い出したのでTipsとして書いておきます。 「inputタグに"bind属性"と"onchange属性"を両方つけると、(おそらく)想定した動きをしないよねー…

Blazor-Fluxorで簡易Todoアプリを作る

1. はじめに Microsoft Build 2019 盛り上がってますね、たぶん(僕は非MS系会社勤務なので分からぬ)。 .NET / Azureのたくさんのサービスの発表・GA等々行われていますが、ここでは今回もPreview版である(Client Side)Blazorについて取り上げます。 今回は…

BlazorからWebAPIを呼び出す

1. はじめに まず、この記事はCliend side Blazorを前提とします。 Blazorアプリケーションは、つまりSPAなアプリですので、たいていの場合 データの表示・更新等のため に Web API呼び出し が必要になります。 今回は OpenWeatherMap が提供するWeb APIをBl…

BlazorでSPAするぞ!(7) - DI(Dependency Injection) -正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 今回はDI(Dependency Injection)について。 まあ、今どきのフレームワークなので(そして.NET Coreの流れをくむBlazorなので)DIは標準…

BlazorでSPAするぞ!(6) - Routing -正式版対応済み

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 今回はルーティングについて。 URLに対するページ(コンポーネント)のルーティング(マッチング)ですね。 1. ルーティング(Routing) サ…

BlazorでSPAするぞ!(5) - レイアウト -正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 今回はレイアウト機能について。 1. レイアウト機能とは これはよくあるやつですね。 ASP.NET Coreでの「_Layout.cshtml」と大体同じ…

BlazorでSPAするぞ!(4) - データバインド(おかわり) - 正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 1. データバインド Component のデータバインディングについては BlazorでSPAするぞ!(2) - Component -正式版対応済 - ryuichi111st…

BlazorでSPAするぞ!(3) - パラメータ - 正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com 前回 Component の基本的な作り方・使い方を見てみましたが、今回はComponentのパラメータ機能を見ていきます。 1. パラメータ(Param…

BlazorでSPAするぞ!(2) - Component -正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com BlazorでのUI要素であるComponent(コンポーネント)について見ていこうと思います。 1. コンポーネント(Component) 前回 Hello Blazor…

BlazorでSPAするぞ!(1) - 正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 1. Blazorとは 公式Docsでは以下のように書かれています。 Blazor is a framework for building interactive client-side web UI with .NET 「Blazorは、.NETでインタラクティブなクライアントサ…

BlazorでSPAするぞ! - 目次 -正式版対応済

※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 Blazor(主にWebAssembly)についての基本をブログにまとめました。 2019年のGWにBlazorに興奮して初校を書きましたが、 2020年5月、遂に Blazor WebAssembly が正式リリースとなったので、改め…