自分の場合、Blazor で SPA を開発するにあたり、外観は Material Design で作りたいなー、ということがよくあります。 (もともと Angular による SPA 開発において、UI コンポーネントライブラリに Angular Material を主に使ってきた経緯もあって。) ということで、Blazor 向けの UI コンポーネントライブラリとして流通しているもののうち、Material Design なヤツ、さらにその中でもとくに無償利用可能なものを探してみました。 探し方は簡単。 "Awesome Blazor Browser" サイトを開いて、"Material" で検索すれば、Material Design な UI コンポーネントライブラリがいくつか見つかります。 以下、自分がそうやって見つけて評価してみたライブラリ x 6 つを紹介してみます。 MatB
この記事では、Blazor アプリで画像を使用する一般的なシナリオについて説明します。 画像のソースを動的に設定する 次の例では、C# のフィールドで画像のソースを動的に設定する方法を示します。 このセクションの例では、次のことを行います。 任意のソースから 3 つの画像を取得するか、次の各画像を右クリックしてそれらをローカル環境に保存します。 画像に image1.png、image2.png、image3.png という名前を付けます。 アプリの Web ルート (wwwroot) の images という名前の新しいフォルダーに、画像を配置します。 images フォルダーは、デモンストレーションのためにのみ使います。 wwwroot フォルダーから直接画像を提供するなど、任意のフォルダー レイアウトに画像を整理できます。 次の ShowImage1 コンポーネントでは、以下のことを
.NETで作れるブラウザ上のシングルアプリケーション Blazor は、仮想 DOM を使っていて、内部的には（多分）Vue.js とよく似ています。 Blazor の内部動作は Razor なので（ASP.NET の Razor）、SPA内部でのデータ構造は自由になります。動作的には MVVM パターンな View との双方向バインドになっていますが、たまに StateHasChanged を呼び出して画面を更新しないといけないのが、いまいちイケていないところです。 通常の Blazor の場合 Web API を呼び出して、その結果を表示させる場合、Blazor ではこんな感じになります。 @page "/normal" @inject HttpClient Http <h3>Normal Sample</h3> <button class="btn btn-primary" @onc
はじめに Blazorにおいてメモリ内で利用する状態（サービス，クラスインスタンス）はどのように管理していますか？ Blazorerの中にはReactやVueなどのJavascriptフレームワークを利用したことがない方も多いと思います． BlazorにおけるUIの更新方法ですが， Blazorは，WPFやUWPなどのMVVMのアーキテクチャとは根本的に違い， どちらかというとReactやVueに近いアーキテクチャを持っています． 私はBlazorにおいて，MVVMで利用していたプラクティスは必ずしも理想的ではないと考えています． ReactやVueの世界ではコンポーネント（UI）間で状態を共有する際に別途状態管理（Store）ライブラリを導入するケースが多いです． 例: Reactの場合 Redux Flux Recoil Mobx 例: Vueの場合 Vuex Pinia 中にはRed
C#だけでJavaScriptを書く! Blazor.DynamicJSを作りました ① - ささいなことですが。
2023/03/03 にある meetup app osaka@7 で話すやつです。 meetupapp.connpass.com BlazorでちょいちょいJavaScript書くときありますよね、でもちょっとしたやつやからJavaScript別に書くの面倒なんですよねー、でDynamic使ったらラップできるんじゃないかってことでやってみました。Nugetにも公開しててコードはこちら github.com こんな感じで書けます。 //JavaScriptを書くためのオブジェクト作成 using var js = await JS.CreateDymaicRuntimeAsync(); //ここからはdynamicでJavaScript書けます。 dynamic window = js.GetWindow(); dynamic button = window.document.create
ASP.NET core 6 BlazorでUIフレームワーク「MatBlazor」を使用する 作成日 2022.02.01 ASP.NET Core ASP.NET Core ASP.NET core 6 BlazorでUIフレームワーク「MatBlazor」を使用する手順を記述してます。.NETのバージョンは6を使用してます。 環境 OS windows10 proIDE Visual Studio 2022.NET 6Sql Server 2019 Blazorプロジェクト作成 プロジェクト作成時に「Blazor WebAssembly」アプリを選択してます。 任意の名前でプロジェクトを作成します。 ※ここでは「sampleBla」という名前で作成してます。 「作成」ボタンを押下してブロジェクトを作成します。 MatBlazor追加 MatBlazorを追加します。 「ツール」 >
ASP.NET Core Blazor
クライアント側の Web 開発に .NET を使用すると、次のような利点があります。 JavaScript ではなく C# でコードを記述します。 .NET ライブラリの既存の .NET エコシステムを活用します。 サーバーとクライアント全体でアプリ ロジックを共有します。 .NET のパフォーマンス、信頼性、およびセキュリティから利点が得られます。 Windows、Linux、または macOS 上で、Visual Studio や Visual Studio Code などの開発環境を使って、生産性を維持します。 多機能で使いやすい安定した言語、フレームワーク、およびツールの共通セットに基づいて構築します。 コンポーネント Blazor アプリは、"Blazor" に基づいています。 Blazor のコンポーネントとは、ページ、ダイアログ、データ エントリ フォームなどの UI の要素
前提 Visual Studio2022 17.9.0 Preview 1.0以降 ASP.NETとWeb開発のワークロード 手順 新しいプロジェクトの作成からBlazor Web Appを作成する。 プロジェクト名を決めて次へボタンを押下する。 Interactive render modeはServerとします。 作成ボタンを押下します。 Modelフォルダの下にBooks.csクラスを作成しました。 本を管理するクラスを作成していきます。 以下のようにしました。 public class Books { public int Id { get; set; } public string Title { get; set; } = string.Empty; public string Author { get; set; } = string.Empty; public string
.NETの新しいWeb技術であるBlazor、大きくBlazor ServerとBlazor WebAssemblyの2種類の動作形態があることは皆さんご存知（？）ですね。そして.NET 8では、これにさらに様々な新機能も追加されてきています。 今回はこのうちBlazor WebAssemblyの実行パフォーマンスについて検証してみます。 WebAssemblyは速いだろうと思っていたな？ まず最初に、WebAssemblyは下記Wikipediaの解説にもあるとおり、ネイティブ（バイナリ）相当のコードが実行されるため速い！というイメージがありますね。 ネイティブコード相当の高速性・隔離環境でのメモリ安全な実行による安全性・仮想マシンによるハードウェア/プラットフォーム可搬性・ソースプログラミング言語中立性などを特徴とする。 それを期待してベンチマークをとってみたのが、2023年に登壇した
Windows 版の Blazor Hybrid では、テキストボックスの右クリックメニューが表示されません。地味にコピペが出来ないので不便です。 この解決方法は、1つ前の記事にある BlazorHybridInitialized イベントで AreDefaultContextMenusEnabled を true に設定して ContextMenuRequested イベントでコンテキストメニューからブラウザ固有のメニューを削除することで実現可能です。 この方法は、以下の Issue で紹介されている方法です。 具体的なコードは、上記の Issue から行ける Pull Request に記載されています。 上記の PR から該当部分のコードだけを抜粋します。 <!-- BlazorWebViewInitialized イベントハンドラを登録 --> <blazor:BlazorWebV
.Net 6.0 の Blazor Serverから、Dapper+Microsoft.Data.SqlClient NuGetパッケージを使い、SQLServerデータベースへDBトランザクション処理を行うサンプルを作成しました。 ORマッピングの主流はDapperになって来てる。 ソースコードはGitHubで公開しています。 Youtube動画だと、DBトランザクション継続中に SQLServer Management Studio側からの接続に対してレスポンスが返って来ないのは、SQLServer側でロックが発生している為です。 ビジネスロジックやデータベース処理を、Repogitoryや Interfaceを駆使して実装すると、ソースコードが複雑になり保守性が下がります。 staticクラスで実装するとソースコードがシンプルになり保守性が高くなります。 staticクラスで実装した
はじめに 選択した画像ファイルをアプリ上で表示する機能をBlazorで実装したいと思い調べていたのですが、少し苦労したことがあったので共有します。 環境 Blazor Server (.NET 6) Microsoft Visual Studio Professional 2022 (64-bit) 17.2.5 実装手順 実装する方法は以下のドキュメントにある通りです。 docs.microsoft.com ここでは主にコードを抜粋します。 まずはPages/_Layout.cshtmlのbodyタグ内に以下を記述します。 <script> window.setImage = async (imageElementId, imageStream) => { const arrayBuffer = await imageStream.arrayBuffer(); const blob =
※本記事は私のBlogに書いたものの焼きまわしです。 Electron.NETを使って.NET Core 3.0のBlazorをElectron上で動かしてみました 環境 今回の環境はこちら .NET Core 3.0.100 Nodejs 12.10.0 ElectronNET.API 5.22.14 ElectronNET.CLI 5.22.14 作成手順 以下のコマンドでBlazorのプロジェクトを作成します。 プロジェクトにElectronNET.APIのPackageを追加します。 dotnet new blazorserver -o BlazorOnElectron cd BlazorOnElectron dotnet add package ElectronNET.API using System; // 途中省略 + using ElectronNET.API; names
今回はチュートリアル機能を実装できるIntro.jsをBlazorアプリケーションに導入していきたいと思います Intro.js Intro.js Doc 実装例は GitHubのexampleが参考になります Intro.jsについては、いくつかの記事がありますので、そちらも参考にしてみてください Webでデモ・チュートリアルを簡単に作れる intro.js の導入方法 (@RyutaKojima さん) Demo 使い方 Intro.jsの使い方は、HTML要素に対してdata-stepやdata-title,data-introといったタグを埋め込みスクリプトintroJs().start()を実行するだけで、要素に対してチュートリアルを作成してくれます。 例えば、Demoでの最初のステップは、👇な感じです。
BlazorでSPAするぞ！(2) - Component -正式版対応済 - ryuichi111stdの技術日記
※最終更新日: 2020/5/24 正式リリース版に対応修正しました。 という事で、↓↓↓の続きです。 ryuichi111std.hatenablog.com BlazorでのUI要素であるComponent(コンポーネント)について見ていこうと思います。 1. コンポーネント(Component) 前回 Hello Blazor ページを実装しましたが、これ自体がコンポーネントです。 ページやダイアログ、ページ内の要素などのUI要素(オブジェクト)がコンポーネントです。 HTML/CSS と イベント処理などを行うロジックコード で構成されます。 コンポーネントは、ネストしてコンポーネント内に配置することも可能です。 まあ、ASP.NETとかWPFとかでも同様な一般的な UIコンポーネント とか コントロール とか言われるようなものですね。 1.1. SimpleHelloコンポーネン
今回 .NET Core 3.0 が正式リリースになり、 Blazor も Server 版のみながら Preview が外れたようなので、 Preview 9 の記事 をリライトしました。結論から言って Preview 9 と同じ手順で大丈夫でした。 ただし Blazor のテンプレートパッケージ自体は執筆時点 (2019/10/4) では、まだ v3.0.0-preview9.19462.2 となっており、 Preview が外れていません。 Blazor 以外の .NET Core パッケージはすべて正式リリースになったようなので問題なさそうです。 概要 まず Blazor とはなんやねんという話ですが、一言で言えば、 Blazor とはフロントエンドもバックエンドも C# で書けちゃうという C#er にとっては夢のような Web アプリフレームワークです。 公式の話は ASP.N
![[ASP.NET Core] Blazor Server 入門 (セットアップ編)](https://cdn-ak-scissors.b.st-hatena.com/image/square/b7691de835ecec58abdd664f73c9eb7f1dafceaf/height=288;version=1;width=512/https%3A%2F%2Fmseeeen.msen.jp%2Fstatic%2Fb96ed69e9bd8f88aebc32375e3eb2ecd%2Fasp-dotnet-core-blazor-install-1.png)
Docker 環境で C# ASP.NET Core Blazor Webアプリを起動する (WebAssembly) - Qiita
Docker 環境で C# ASP.NET Core Blazor Webアプリを起動する (WebAssembly) こんにちは、@studio_meowtoon です。今回は、WSL Ubuntu 22.04 の Docker 環境で C# ASP.NET Core Blazor Web アプリケーションをコンテナとして起動する方法を紹介します。 目的 Windows 11 の Linux でクラウド開発します。 こちらから記事の一覧がご覧いただけます。 実現すること ローカル環境の Ubuntu の Docker 環境で、Dockerfile からビルドした C# ASP.NET Core Blazor Web アプリのカスタムコンテナを起動します。 技術トピック Dockerfile とは？ こちらを展開してご覧いただけます。 Dockerfile リファレンス Dockerfil
Blazor Server が登場してから2年ほど経ち、今年、社内業務WEBシステムを新規開発するにあたり、少人数短期開発が前提だった為、Blazor Serverを採用したが、正解だった。 社内業務システムをWEBベースで開発するなら、シングルページアプリケーションであることが望ましいが、従来のWEBフレームワーク（Asp.Net Core MVC）だと、サーバサイド（C#）とクライアントサイド（JavaScript）に分かれ、クライアントサイドをJavaScriptで実装するコストがネックとなり、従来型のWEBサイトが選択されて来た。 Blazor Server はサーバサイド（C#）だけの実装でシングルページアプリケーションを実現でき、更に従来型のWEBサイトを実装するより手間がかからない。 少人数短期開発なのに、現場は定時帰りしていて、更にお客さんからの評価が高い。 まるで、Win
Blazor WebAssembly - どこからも参照されていないコードが削除されるようにして .dll のサイズを小さくする - Qiita
Blazor WebAssembly - どこからも参照されていないコードが削除されるようにして .dll のサイズを小さくするBlazor Blazor WebAssembly 用のライブラリに IsTrimmable = true を指定して使われないコードを削除、コンテンツサイズを削減 Blazor WebAssembly 用の Razor クラスライブラリを作るとき、プロジェクトファイル (*.csproj) 中に以下のように IsTrimmable MSBuild プロパティに true を指定しておくと、 そのライブラリを使用している Blazor WebAssembly の発行時、そのライブラリのアセンブリ (.dll) 中に含まれる各種コードのうち、どこからも参照されていない・使われていない機能のコードが削除されて、そのライブラリのアセンブリ (.dll) のサイズが小さく
最近どうにもやる気というものが削がれてしまっていて、しばらく自主勉強を怠っていました放浪軍師です。今回も大した記事ではないのですが備忘録として残しておきます。何気に苦戦したのよね。 Blazor の InputSelect コンポーネント さて、今回のお題はタイトルにもあるように InputSelect コンポーネントについてになります。このコンポーネントは所謂ドロップダウンリストで、クリックするとリストが開いてそのうちの一つを選択するというようなありがちかつよく使うコンポーネントになります。ただこれがまた微妙に癖のある作りをしていて、業務で使おうとして中々に苦戦を強いられたためここに記録として残しておきます。 環境 Microsoft Visual Studio Community 2022 (64 ビット) - Current Version 17.0.0 Microsoft.AspN
はじめに ASP.NET Core Blazor で色々開発していくと、どうしても JavaScript でやりたいということが出てくると思います。 その場合に TypeScript でなるべく開発する方法について書いていこうと思います。 Razor コンポーネントに紐づく TypeScript ファイルを作成する方法 まずは、Razor コンポーネントに紐づく JavaScript ファイルを使う方法から説明します。 普通は Components/Pages/Home.razor という Razor コンポーネントに対して Components/Pages/Home.razor.js という JavaScript ファイルを作成します。 これを Components/Pages/Home.razor.ts という TypeScript で開発できるようにしたいと思います。 TypeScr
blazorにはwebappのFileResultを使用したPostBackような動的にファイルコンテンツを作成して、ファイルをダウンロードさせる仕組みが無い。 では、どうやってファイルコンテンツを作成して、ダウンロードさせるかを調べてみた。 普通に考えると、1番簡単なのは、コールバックでコンテンツを作成して、Data URLに変換し、そのリンクを表示させる方法だが、これだと、作成のトリガーとリンクをクリックするという、2アクションが必要になる。 結局、作成トリガー(例えばボタンクリック)でファイルのダウンロードまで、行うには、Javascriptの助けを借りることになる。 以下のような感じで可能だが、サイズ制限(MSのサイトでは250Mbytes以下と記述されていた)があるようだ。 // // ファイルをダウンロードするJSヘルパー // やっていることは単純で、StreamからBlob
過去記事で色々認証系について書いてきました。 ここで書いてきたものは、なるべくクラウドの IdP に依存せずに手軽に独自の認証を追加する方法でした。 これまでの方法の共通点は認証クッキーを作る部分は ASP.NET Core Blazor Server の外側の Razor Pages や MVC で作る方法でした。 この方法が一番、提供されている部品を使いつつ独自のログイン機能を実装できる方法なのですが Blazor Server のページ以外を経由する必要があるので、その点は若干めんどくさいです。どうせなら Blazor の世界の中で全部やりたいなぁ…というのが今回の主題です。 やりかた Blazor Server の中で独自ログイン画面を作って、認証処理をやってブラウザーの localStorage や sessionStorage やメモリ上に認証しているかどうかのフラグを持つ方法
MonoGame で制作したゲーム「リトルセイバー」を Web (Blazor + WebGL) で動かしてみた話 | おのでらの創作日記 in ソーサリーフォース
Web で動くゲームを作ってみようと思った話 現在 Steam や DLsite, Microsoft Store, Google Play で配信中のアクションゲーム「リトルセイバー」ですが、動作フレームワークとして「MonoGame」を使用しています。 当ゲームは有料での販売であるため各々で体験版を配布しているのですが、よりお手軽にゲームを体験できるようにするために開発中のデモ版も含めて以前まで Web で公開していました。 その時は「Silverlight + XNA」をフレームワークとして作り公開していましたが、残念ながら 2021 年にサポートが終了し、唯一動く IE もサポートが終了してしまったため、現在 Web で試せる環境はなくなってしまいました。まあ一応「β版開発室」にはずっとページは残っているのですが。 Unity など他のゲーム開発プラットフォームでは WebGL が
Blazorについて - Qiita
概要 Blazorについて主に以下のページを参考に概要を記載します。 Blazor WebAssembly 3.2.0 now available Free e-book: Blazor for ASP.NET Web Forms Developers ASP.NET Core Blazor の概要 かごんま .NET 2020.09 アラカルトの発表資料です。 Blazorとは JavaScriptの代わりに.NETとC#を使用して単一ページのアプリを構築するためのクロスプラットフォームWeb UIフレームワーク Blazor UIコンポーネントは、.NETコードとRazor構文の組み合わせを使用して実装します。 Blazorコンポーネントは、UIイベントのシームレスな処理、ユーザー入力へのバインド、およびUIの更新の効率的なレンダリングを行うことができる 後で出てきますが、ASP.NE
チュートリアル: Microsoft Dataverse を使用して ASP.NET Core Blazor WebAssembly アプリを作成する - Power Apps
このチュートリアルの手順を使用して、Dataverse に接続する Blazor WebAssembly アプリを作成します。 この記事の焦点は、特定の Dataverse インスタンスでユーザーを認証し、データを取得するために必要な手順を理解することです。 Blazor WebAssembly は、ASP.NET Core Blazor で使用可能な 2 つのホスティング モデルの 1 つです。 もう 1 つは Blazor Server です。 違いの詳細については、ASP.NET Core Blazor ホスティング モデル をご覧ください。 このチュートリアルは、ASP.NET Core Blazor WebAssembly スタンドアロンアプリを Microsoft Entra ID で保護する の記事に記載の手順を基にしています。 Dataverse は認証に Microsof
概要 Blazorのクライアント版をGitHub Pagesで公開するための手順メモです。 以前公開したFirebase上にホスティングする場合と比較して、色々と手間がかかり大変でしたが何とか公開できたのでメモとして残しておきます。 環境及び前提 使用している.NET Core及びBlazorのテンプレートのバージョン等は下記です。 .NET Core 3.0 Preview SDK 3.0.100-preview7-012821 Microsoft.AspNetCore.Blazor.Templates::3.0.0-preview7.19365.7 Visual Studio 2019 Preview また、GitHub Pagesはdocsフォルダを使った公開方法になります。 wwwrootフォルダ内の変更 Blazorのwwwroot以下の各種編集を行います。 既定URLの変更 デ
(架空のシナリオ) とある Blazor アプリケーションの開発にて、「流れる文字」を実装する要件が発生したため、早速、"Marquee.razor" というコンポーネントとして実装しました。 ※註: これはネタです。普通はこういうもの作るときは CSS アニメーションで作って下さい。 これで、任意の .razor ファイル中で <Marquee /> とマークアップすることで、 流れる文字を実装できました! ※註: 繰り返しますがこれはネタです。普通はこういうもの作るときは CSS アニメーションで作って下さい。 他のプロジェクトでも使いたい (再利用したい) ! さてこのように作成した Blazor コンポーネント、他のプロジェクトでも使いたくなることがあるでしょう。 そのようなときはどうするか? もちろん、.razor ファイルを、会社のファイルサーバに置いておいて、「皆さん、コレ使
はじめに 前記事でプロパティ変更通知で変更する方法を記載したのですが、調べていくうちに、ReactiveProperty.Blazorがあることが分かりました。 ReactiveProperty の存在は知っていましたが、使用する機会がなかったので今回初めて使ってみることにしました。 ReactiveProperty とは ReactivePropertyは、Cysharp 代表の neuecc さんが双方向にバインド可能な IObservable を拡張して作成された MVVM 拡張ライブラリです。MITライセンスになっております。 画面での変更をモデルに反映したり、逆にモデルの変更を検知して画面に反映するといった処理を簡単に記述できます。 ReactivePropertyに書き換え 前記事でプロパティ変更通知で変更する方法を ReactiveProperty.Blazor で書き換えて
BlazorのWebAssemblyをレンタルサーバーやGitHubのPagesにデプロイしてみた - torum
BlazorのWebAssembly、つまり.NETのC#で作ったアプリがブラウザ内で動いてしまうという変態・・・もとい、驚きの技術がある訳ですが、今まで特にBlazorで作りたいものも無かったので、2019年に正式版がリリースされていたにも関わらず、まだ触っていませんでした。 そこで、今日、ちょっと息抜きにチャレンジしてみました。先ほど、WinUI 3 - Project Reunion 0.8 Previewを試したのですが、強烈に脱力するほどダメだったので、お口直しです。正直、期待しないようにしてましたが、結果としては、色々あったけど、.NETのC#のソースコードがそのままブラウザで動くとか変態すぎて、ニヤニヤが止まりませんでした。特に、自分はここ10年ぐらいWeb系の開発から離れている事もあり、良い気分転換になりました。 Blazorには、サーバーサイドでの実行に依存するBlazo
数年前からMicrosoftは、Windows onlyから脱却して、マルチプラットフォーム戦略を打ち出しています。その戦略は、デスクトップ向けのGUIアプリにもおよび、マルチプラットフォームで動作するアプリの開発ができる、さまざまなライブラリやフレームワークが提供されるようになってきました。本連載では、Windows環境におけるマルチプラットフォームGUI技術（.NET以外も含む）について、（主にC#の）サンプルコードを交えて解説します。 はじめに 本連載では、Windows環境で開発可能なマルチプラットフォームGUI技術を解説します。本稿では、.NET MAUI Blazorを取り上げます。デスクトップとモバイル（Android）に対応した簡単なアプリを作成して、フレームワークの使い方を解説します。 対象読者 C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法など
Blazor Server で Scoped なサービスに状態保存してたら、.NET 8 の新しい Render Mode では危ないかもね、という話 - Qiita
Blazor Server で Scoped なサービスに状態保存してたら、.NET 8 の新しい Render Mode では危ないかもね、という話BlazorBlazorServer お題 まずは .NET 6~7 あたりのバージョンでの Blazor Server アプリケーションを、標準のプロジェクトテンプレートから生成したところから話しを始めましょう。 この標準のプロジェクトテンプレートから生成したばかりの .NET 7 (あるいは6) Blazor Serevr アプリケーションでは、"Counter" ページ上で "Click me" ボタンをクリックして増やしたカウント回数は、"Home" や "Weather" などの他のページに遷移すると、失われてしまいます。 これはもちろん、カウント回数が、"Counter" ページコンポーネントのフィールド変数として実装されているか
【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その3～ - Qiita
前回 【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その1～ 【Blazor入門】Blazor初心者がログインからチャット機能まで付けてデプロイしてみた ～その2～ の続きです。 前回までは、チャットページでSignalRを使用してブラウザ間で文字のやり取りが見れる所までやりました。 今回はログイン機能の見直しをしたいと思います。 現在のログイン画面の問題点 前にもちらっと書きましたが、今のままだとユーザーIDとパスワードに何かしらの文字さえ入れておけば認証が通る仕組みです。 なので、事前に登録したユーザーID・パスワードを使用してログイン出来るようにしてみましょう。 どのようにログイン情報を保持するか ぱっと思いつく方法だと、自前のDBにユーザー情報を登録しておき、ログインボタン押下時にユーザーIDとパスワードでレコードが抽出できるか、とい
.NET Maui BlazorアプリはBlazor Server相当らしいという仮説 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題提起 § .NET Maui Blazorアプリで抱え込んだ謎がある。 Console.WriteLineでコンソールにデバッグメッセージを出せないのはなぜかリロードしてもプロセス空間がリセットされないのはなぜか ページ切換がサクサクできることから、Blazor WebAssembly相当の機能が動いていると考えると謎である。 結論 § Blazor Server相当の機能が動いている。 サクサク動くのは、Blazor Server相当の機能とWebブラウザ相当の機能が直結しているから。
AI画像生成(Stable Diffusionなど)を行うDiscordのBotを追加するサイトをBlazorで作成したお話 - Qiita
AI画像生成(Stable Diffusionなど)を行うDiscordのBotを追加するサイトをBlazorで作成したお話 Zennにも同様の記事を投稿しています。 https://zenn.dev/kawa0x0a/articles/d2a1ca23be053a TL;DR WebサイトをBlazor Serverで作った。 AIで画像生成を行うDiscordのBotを作った。 作成したWebサイト : https://stablediffusiondiscordbot.azurewebsites.net/ リポジトリ : https://github.com/kawa0x0A/StableDiffusionDiscordBot Blazorで作ったWebサイト Blazor Server製 ホスティングはAzureで決済サービスはStripeを使用 勉強になったこと : ログインの認
この記事では、Blazor WebAssembly アプリでの Microsoft Graph API の使用方法について説明します。これは、アプリが Microsoft Cloud サービス リソースにアクセスできるようにする RESTful Web API です。 Blazor アプリで Microsoft Graph を直接操作するには、2 つの方法があります。 Graph SDK: Microsoft Graph SDK は、Microsoft Graph にアクセスする高品質かつ効率的で、回復性を備えたアプリケーションの構築を簡素化するように設計されています。 この方法を使うには、この記事の上部にある [Graph SDK] ボタンを選んでください。 名前付き HttpClient と Graph API: 名前付き HttpClient は、Web API 要求を Graph
認証ライブラリを使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する
この記事では、Blazor WebAssembly 認証ライブラリを使用して、ASP.NET Core Blazor WebAssembly スタンドアロン アプリをセキュリティで保護する方法について説明します。 Blazor WebAssembly 認証ライブラリ (Authentication.js) は、Microsoft Authentication Library (MSAL、 msal.js) を介した Proof Key for Code Exchange (PKCE) 認可コード フローのみをサポートします。 他の許可フローを実装するには、MSAL ガイダンスにアクセスして MSAL を直接実装しますが、Blazor アプリに PKCE 以外の許可フローを使用することはサポートされておらず、推奨もされていません。 Microsoft Entra (ME-ID) と Azur
個別認証で生成した場合のユーザー情報DB -au Individual で生成した場合、プロジェクトフォルダ直下にapp.dbが作成され、ここにユーザー情報が格納されます。 app.db には、以下のテーブルが含まれます。 ubuntu@ip-172-31-31-143:~/remoteDir/usefuledge20211023/blazorauthsample$ sqlite3 app.db SQLite version 3.31.1 2020-01-27 19:55:54 Enter ".help" for usage hints. sqlite> .tables AspNetRoleClaims AspNetUserLogins AspNetUsers AspNetRoles AspNetUserRoles __EFMigrationsHistory AspNetUserClaim
グレープシティ、業務アプリ開発支援ツール最新版「ComponentOne 2021J v1」をリリース―.NET 5とBlazorの対応を強化 グレープシティ株式会社は2021年4月28日、同社の.NET対応業務アプリケーション開発支援ツール「ComponentOne」の最新版「ComponentOne 2021J v1」をリリースした。 .NET開発用コンポーネントセット「ComponentOne 2021J v1」 ComponentOneは、.NET/Xamarin/Blazor用の各種コンポーネントを収録している開発支援ツールで、今回のバージョンアップでは.NET 5およびBlazorへの対応が強化された。 データ集計・データ表示関連のコントロールで.NET 5対応が進む Windows Forms用エディションに含まれている以下のコントロールにて、.NET 5のサポートが強化され
[助けを求む] Blazor Server を Playwright で E2E テストするとき、Playwright の初動が早すぎてテストが失敗する - Qiita
[助けを求む] Blazor Server を Playwright で E2E テストするとき、Playwright の初動が早すぎてテストが失敗するBlazorPlaywright Playwright で Blazor Server の E2E テストを書いたらテスト失敗するようになってしまった! Blazor アプリケーションのエンド・ツー・エンド (End-to-End, 略して E2E) テストを実装する際、ここ最近は Selenium ではなく、Playwright (の .NET バインディング) を使って Web ブラウザの自動操作を実装しています。 先日も、とある手持ちの Blazro Server アプリケーションの E2E テストを、Seleinum を使って実装していたところを、Paywright を使った実装に置き換えたりしていました。 すると、その Playw
![[助けを求む] Blazor Server を Playwright で E2E テストするとき、Playwright の初動が早すぎてテストが失敗する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/59423fc4a809b3fbf606a971d0229711d1e8d2b5/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU1JThBJUE5JUUzJTgxJTkxJUUzJTgyJTkyJUU2JUIxJTgyJUUzJTgyJTgwJTVEJTIwQmxhem9yJTIwU2VydmVyJTIwJUUzJTgyJTkyJTIwUGxheXdyaWdodCUyMCVFMyU4MSVBNyUyMEUyRSUyMCVFMyU4MyU4NiVFMyU4MiVCOSVFMyU4MyU4OCVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MSVBOCVFMyU4MSU4RCVFMyU4MCU4MVBsYXl3cmlnaHQlMjAlRTMlODElQUUlRTUlODglOUQlRTUlOEIlOTUlRTMlODElOEMlRTYlOTclQTklRTMlODElOTklRTMlODElOEUlRTMlODElQTYlRTMlODMlODYlRTMlODIlQjklRTMlODMlODglRTMlODElOEMlRTIlODAlQTYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWFkNjVhOGQyZWQyYWE4Yzc0NWI3YjRhYWY4MmJhMmM1%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwanNha2Ftb3RvJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ZDhiMzFmNzI5NjE1YWMyNTcwZTIzNzA2Y2QyNDcyMQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D5b9547e55227753250d6e9a4148a8efa)
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Blazor で使える Material Design なコンポーネント 6 選 - Qiita
ASP.NET Core Blazor で画像を使用する
Flux を Blazor に活用してみる | Moonmile Solutions Blog
Blazor向けにコンポーネント間で状態を共有する状態管理ライブラリを作った - Qiita
ASP.NET core 6 BlazorでUIフレームワーク「MatBlazor」を使用する
新しいBlazorスキャフォールディング機能でCRUDしてみる
Blazor WebAssemblyのベンチマークをとってみた - Qiita
Blazor Hybrid でテキストボックスの右クリックメニューを表示する
Blazor Serverで実装するシンプルで高速なDBトランザクション処理（on SQLServer）
Blazorで画像を選択して表示する - JBS Tech Blog
.NET Core 3.0のBlazor + ElectronでGUIアプリ開発 - Qiita
Blazor with Intro.js - Qiita
[ASP.NET Core] Blazor Server 入門 (セットアップ編)
社内業務系WEBシステムを新規開発するなら Blazor Server 一択
Blazor の InputSelect コンポーネントについて学ぶ - 放浪軍師のアプリ開発局
ASP.NET Core Blazor 向けに TypeScript で開発する方法
blazorでファイルダウンロード | 元技術者のぶーろぐ
ASP.NET Core Blazor Server でオレオレ認証を追加したい without Cookie
Blazorで作成したウェブサイトをGitHub Pagesで公開する - Qiita
Blazor のコンポーネントをパッケージ化して再利用する - Qiita
【Blazor】ReactivePropertyを使用してデータを反映させる - Qiita
初めての「.NET MAUI Blazor」──デスクトップとモバイルに対応した簡単なアプリを作成しよう
ASP.NET Core Blazor WebAssembly で Graph API を使用する
Blazor Server で ユーザー認証機能の自動生成とコード生成（スキャフォールディング）
グレープシティ、業務アプリ開発支援ツール最新版「ComponentOne 2021J v1」をリリース―.NET 5とBlazorの対応を強化 | gihyo.jp