Blazor WebAssembly アプリの GitHub Pages への発行を、より楽にする - Qiita
Blazor WebAssembly アプリは、GitHub Pages 上にも配置できる Blazor は C# で SPA を実装するフレームワークやランタイムでありますが、とりわけ Blazor の WebAssembly 版は、JavaScript 製の SPA フレームワークと同じくブラウザ上で動作します。 そのため、静的コンテンツを配置・配信可能な Web サーバーであれば何であっても、そのサーバー上に Blazor WebAssembly アプリの発行成果物を配置すれば、それをブラウザで開いて動作させることができます。 実際、Blazor WebAssembly アプリは、GitHub Pages 上に配置することもできます。 自分が GitHub Pages 上に配置・公開している Blazor WebAssembly アプリを以下に2つほど例示しておきます。 Awesom
内容としては、ここらへんで紹介されているものになります。 Blazor のコンポーネントで URL のクエリ パラメーターを使うのが凄く簡単になりました。今までは自分でクエリパラメーターを取得するような処理を書かないといけなかったのですが、.NET 6 では基本的にこの機能で賄えるようになると思います。 因みに今までクエリパラメーター使おうと思うと大体以下のような感時にする必要がありました。クエリパラメーターをパースしてくれるライブラリを参照に追加（例えば Microsoft.AspNetCore.WebUtilities) して、コンポーネントの OnInitialized メソッドでパラメーターを解析して頑張る！ ちょっとやってみましょう。Blazor WebAssembly のプロジェクトを新規作成して Index.razor に実装していきます。 @page "/" @using
Blazor WebAssembly で ReactiveProperty 使って MVVM やってみる - 放浪軍師のアプリ開発局
どうも放浪軍師です。みなさんGWを楽しんでおられますでしょうか？私はもう育成育成育成しまくりで、マニーをたらふくため込んでいます。ただSPが枯渇してて辛いところですね。え？何の話だって？そりゃあもちろんGW(ゴルシウィーク)の事ですヨ。 Blazor WebAssembly で ReactiveProperty 使って MVVM 前回 Blazor WebAssembly の基本を押さえてみたわけですが、どうやら MVVM でも書けるらしいってんで挑戦してみました。もちろんみんな大好き ReactiveProperty も使っちゃいましょう！ 環境 Microsoft Visual Studio Community 2019 Version 16.8.2 Microsoft.AspNetCore.Components.WebAssembly 3.2.1 ReactiveProperty 7
ASP.NET Core Blazorでsqlserverに接続してデータを表示する 作成日 2022.01.19 更新日 2022.01.21 ASP.NET Core ASP.NET Core ASP.NET Coreを使ってBlazorでsqlserverに接続してデータを表示する手順を記述してます。.NET Coreのバージョンは6を使用してます。 環境 OS windows10 proIDE Visual Studio 2022.NET Core 6Sql Server 2019 Blazorプロジェクト作成 プロジェクト作成時に「Blazor WebAssembly」アプリを選択します。 任意の名前でプロジェクトを作成します。 ※ここでは「TestBlazor」という名前で作成してます。 「ASP.NET Coreでホストされた」をチェックして、「作成」ボタンを押下します。 A
SPA 開発となると、そのフレームワーク/ライブラリの選択肢の多くは Angular、React、Vue と言った JS のフレームワーク/ライブラリが一般的かと思います。 今回はそれ以外の選択肢である Blazor を利用して C# で書ける SPA 開発を紹介します。 とりあえず動かしたい!!って人は以下の概要を読み飛ばして、Hello World のハンズオンに飛んでください！ macOS でも Linux でも Windows でもクロスプラットフォームで開発でき、動きます。 ASP.NET Core Blazor JavaScript ではなく C# (.NET) で書ける SPA (Single Page Application) 向けのフロントエンドフレームワーク Blazor WebAssembly (上) と Blazor Server (下) の 2 種類がある Bla
こんにちは！ ねこじょーかーです。 みなさんは「Blazor」を知っていますか？ Blazor は、C# と .NET Core を用いて Web アプリケーションの開発ができるようになるフレームワークのことです。 ASP.NET Core Blazor とも呼ばれます。 フロントエンドに HTML と CSS を使用するのは変わりませんが、バックエンドのロジック部分を C# で書くことができます。 この記事は、Blazor をゼロから学習して、簡易的な EC サイトが作れるように解説した本を執筆した話をします。 執筆したお知らせツイートと EC サイトの完成イメージはこちら↓ 執筆した話の 5W や EC サイトに実装されている機能を紹介していきたいと思います。 執筆した話の5W 執筆者は誰？ 普段は「ねこじょーかー」という名前で発信しています。 C# と執筆が好きで、書籍は 11 冊を
Maui&Blazorの衝撃・まさか、全ての解決策になるのか、.NET Maui Blazorアプリよ! 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
これまでのあらすじ § 2010年代初頭、ANGFのモジュールをいくつも作成して一応一つの世界を完成させた自分であったが、そこで「Windowsだけで良いのか」という巨大な疑問が沸いてきた。スマホで動かないとだめではないかと思ったわけだ。 しかし、iPhone開発は金がいくら掛かるか分からないぐらい掛かると分かって、バカヤローと思ってスマホのネイティブ開発はすぐに断念した。 全機種対応はWebでやるしかないと考えた。 その結果、ANGFのWeb版を作らないとダメだろうということで、ANGFWebPlayerを試作した。しかし、これはサーバに過大な負荷を掛けるアーキテクチャ(全プレイヤーの全プレイ過程がサーバに集中する)なので、利用者が増えてもコストが掛かるだけで余り嬉しくなかった。 この流れが変化したのはWebAssemblyとBlazor登場後である。 WebAssemblyとBlazo
先日、ASP.NET Core Blazor Server にオレオレ ログインを追加してみましたが、これは認証機能をもったテンプレートに手を入れてる形でやりました。今回は認証機能を持ってないテンプレートに足していく形でやってみようと思います。 そのまま前の記事のクローンをつくるのはつまらないので、業務アプリにありがちな以下のような形で作っていこうと思います。 ログインしていないユーザーが来たら、まずはログインページに行く ログインは外部の IdP ではなく自分たち（もしくは何処かの DB などの情報をもとに認証する ログインユーザーの権限で、ページにアクセス出来る・出来ないが変わる 処理によってはログインユーザーの権限を見て処理をわける プロジェクトの作成と初期設定 では、Visual Studio 2022 で Blazro サーバーのプロジェクトを認証無しで作ります。 そして、Pro
Azure Static Web Apps + Communication Services + Blazor + Functions してみた - Qiita
Azure Static Web Apps + Communication Services + Blazor + Functions してみたC#AzureAzureFunctionsBlazor とりまやってみましょう。 Azure Communication Services は Azure 上に必須なので作ります。 Token の払い出しを行うサーバーサイドの作成 これは Functions で行います。こちらにある通り。 Azure Functions を使用して、信頼できる認証サービスを構築する 今回は以下のような感じでいこうかなと思います。URL のクエリに id という名前のパラメーターがあるときは、それをユーザー ID としてトークンを取得。id 指定がない場合はユーザーを作成してトークンを取得といった感じにします。 id は、適当な値を設定しても Azure Commu
document.title を設定したい! Blazor アプリを開発してて、ページ (ドキュメント) のタイトル (ブラウザのタブに表示されるテキストですね) を、コンポーネントごとに設定したいことってありませんか? 残念ながら、Blazor 上の標準的な C# コードだけでは、これは実現できないはず、です。 というのも、Blazor というかそのコンポーネントのレンダリング対象は、<app> 要素の内部の DOM に限られているためです。 なので、<app> 要素の外側というか親側というか、とにかく <head> 要素は普通には Blazor で扱えません。 ではどうするかといえば、Blazor 上の C# コードから JavaScript 相互運用機能を利用して、JavaScript に頼る必要があります。 とはいえ、自前でこれを実装するのは、不可能ではないにせよ、面倒な仕事です。
ASP.NET CoreとBlazor Serverアプリケーションに対応したVisual Studio 2019 for Mac
Spring BootによるAPIバックエンド構築実践ガイド 第2版 何千人もの開発者が、InfoQのミニブック「Practical Guide to Building an API Back End with Spring Boot」から、Spring Bootを使ったREST API構築の基礎を学んだ。この本では、出版時に新しくリリースされたバージョンである Spring Boot 2 を使用している。しかし、Spring Boot3が最近リリースされ、重要な変...
先に結論 System.OperatingSystem.IsBrowser() を実行してください。true が返る場合は、ブラウザ上で (いわゆる Blazor WebAssembly として) 実行されています。 背景 Blazor には Blazor WebAssembly、Blazor Server の基本2形態があり、さらに 2023年11月リリースの .NET 8 からは、Blazor Static Server Side Rendering が加わりました。このように、Blazor は、サーバー側プロセスとして実行される場合と、Web ブラウザ内の WebAssembly 上で実行される場合の、2つの場合があります。 また、一般に Blazor WebAssembly に分類される場合でも、サーバー側事前レンダリングを実装していると、その事前レンダリング処理はサーバー側プロセ
この記事では、Blazor Hybrid アプリの Web および Web Views 用 Razor コンポーネントを作成および整理する方法について説明します。 Razor コンポーネントは、複数のホスティング モデル (Blazor WebAssembly、Blazor Server、および Blazor Hybrid の Web View) と複数のプラットフォーム (Android、iOS、Windows) で動作します。 各ホスティング モデルとプラットフォームには、コンポーネントで利用できる固有の機能がありますが、複数のホスティング モデルとプラットフォームで実行されるコンポーネントでは、次の例に示すように、固有の機能を個別に利用する必要があります。 Blazor WebAssembly では、同期 JavaScript (JS) 相互運用がサポートされています。これは、Bla
Blazor入門トレーニング開講記念ウェビナー ～この夏、Blazor プログラミングデビューして差をつけろ!
Cookieポリシー:このサイトでは利用者の利便性向上やサイトの利用状況把握のため、弊社および第三者のクッキーを使用しています。本サイトの利用を続行された場合は、Cookieポリシーに同意いただいたものといたします。 Event Description Blazor入門トレーニング開講記念ウェビナー開催 〜この夏、Blazorプログラミングデビューして差をつけろ！〜 ★お得なウェビナー参加特典あり！★ ウェビナー概要 Microsoft MVPである坂本純一が制作・監修したオンデマンド版Blazor入門トレーニングがついに完成！いよいよ開講となります。これを記念したウェビナーとしてトレーニング内容、特徴などを製作者本人によるインタビューする形式で解説いたします。 このトレーニングは、ASP.NET Core Blazor Server（以下 Blazor）フレームワークを採用した Web
Blazor とは、C#と.NET Core を用いて Web アプリケーションの開発ができるようになるフレームワークのことです。ASP.NET Core Blazor とも呼ばれます。 フロントエンドに HTML と CSS を使用するのは変わりませんが、バックエンドのロジック部分を C# で書くことができます。 Web アプリケーションを開発するときには必須の知識になっていた JavaScript も必須ではなくなり、 C#によるプログラミングで SPA(Single Page Application)の Web アプリケーションを開発できます。 Blazor は Azure Static Web Apps と相性がよく、簡単かつサーバーレスに Web アプリを公開することができます。 「C#が好き」という人は、確実にハマりますので、一度使ってみてください。 本記事では、Blazor
Porting Assistant for .NETを使ってASP.NET Web FormsアプリケーションをBlazorへ移植する | DevelopersIO
Porting Assistant for .NETを使ってASP.NET Web FormsアプリケーションをBlazorへ移植する いわさです。 本記事は、Blazor Advent Calendar 2021の25日目です。 ASP.NET Webアプリケーションのモダナイゼーションを支援するためのツールとしてAWSよりPorting Assistant for .NETというスタンドアロンツールが無償提供されています。 このツールは、以前以下の記事で、ASP.NET MVCをASP.NET MVC Coreへ移行した際に紹介させて頂いていまして、AWSでアプリケーションを動かすわけでなくても利用できます。(Azureでも良い) そのツールが今回アップデートされまして、最新バージョンでは.NET6.0への移植に加えて、なななんとASP.NET Web FormsアプリケーションをAS
素の input 要素を相手にする限りは 2023年12月現在も変わりありません Blazor がまだ v.0.5 (!) だった頃、以下の記事を書きました。 上記記事は 2023年12月現在、かれこれ 6 年近く前の記事となります。本記事では、Blazor が公式リリース後に、ラジオボタン input 要素に双方向データバインドする方法がどうなったのか、確認します。 まず、以下のようについ書きたくなるコードは、引き続き残念ながら、 Eerror RZ10008: The attribute 'value' is used two or more times for this element. Attributes must be unique (case-insensitive). The attribute 'value' is used by the '@bind' directiv
![[改訂版] Blazor でラジオボタン input 要素に双方向データバインドする方法 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c4b8ab5b0a721aeb4286febb1f970bd01c2749f1/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCJUU2JTk0JUI5JUU4JUE4JTgyJUU3JTg5JTg4JTVEJTIwQmxhem9yJTIwJUUzJTgxJUE3JUUzJTgzJUE5JUUzJTgyJUI4JUUzJTgyJUFBJUUzJTgzJTlDJUUzJTgyJUJGJUUzJTgzJUIzJTIwaW5wdXQlMjAlRTglQTYlODElRTclQjQlQTAlRTMlODElQUIlRTUlOEYlOEMlRTYlOTYlQjklRTUlOTAlOTElRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTMlODMlOTAlRTMlODIlQTQlRTMlODMlQjMlRTMlODMlODklRTMlODElOTklRTMlODIlOEIlRTYlOTYlQjklRTYlQjMlOTUmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWQwNGM5Njg3Y2Y1MTQ4MGIxMmZmNWIxYjEyNDhlYjll%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTcxNiZ0eHQ9JTQwanNha2Ftb3RvJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzImdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ZDhiMzFmNzI5NjE1YWMyNTcwZTIzNzA2Y2QyNDcyMQ%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3D02c4f15e1a0818c0a25d5a7baeec71f5)
ASP.NET Web Forms フレームワークは、2002 年に .NET Framework が最初に出荷されて以降、.NET Web 開発の中心となってきました。 Web の大部分が未成熟であった頃、ASP.NET Web Forms では、デスクトップ開発に使用されていたパターンの多くを採用することで、簡単で生産性の高い Web アプリ作成を実現しました。 ASP.NET Web Forms では、再利用可能な UI コントロールから Web ページをすばやく組み立てることができます。 ユーザーによる操作は、イベントとして自然に処理されます。 Web Forms UI コントロールの豊富なエコシステムが Microsoft およびコントロール ベンダーによって提供されています。 これらのコントロールにより、データ ソースに接続し、高度なデータ視覚化を表示する作業が容易になります。
CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。
Created at: 2020-12-25 これは Blazor Advent Calendar 2020 の25日目のエントリーです。 Blazor はお手軽に Single Page Application を作れるのですがコンポーネントのライフサイクル、ステート関連について知らないと若干不思議な仕組みで動いているように見えます。 例えばプロジェクトテンプレートの Counter は @onclick="IncrementCount" でプライベート変数 currentCount をインクリメントするとページのカウントがアップしますが、これは初見ではなかなか不思議な挙動です。Blazor は currentCount の変更をどうやって知ったのか?としばらく不思議に思っていました。そういったこともライフサイクルを知ることで理解できます。 基本的には ASP.NET Core Blaz
BlazorのValidationSummaryでasp-validation-summaryのように表示エラーメッセージを絞り込みたい
ASP.NET Core Blazor のバリデーションのエラーメッセージを表示する際にプロパティのエラーは各コントロールの横に表示して、モデル全体にかかわるエラーに関してはフォームの上のほうに、リスト形式で出したいというケースがあると思います。 以下のような感じですね。 プロパティに紐づくエラーは、入力項目のすぐそばに表示 オブジェクト全体に紐づくエラーはフォームの上に表示 ただ、以下のように普通に ValidationSummary コンポーネントを置くとプロパティに紐づくエラーもオブジェクトに紐づくエラーもどちらも表示されてしまいます。 <EditForm Model="_model" OnValidSubmit="OnValidSubmit" OnInvalidSubmit="OnInvalidSubmit"> <DataAnnotationsValidator /> <Valid
Blazor WebAssembly + OpenCVSharpでブラウザ上で動作するカスタマバーコードリーダーを作成した(実装解説) - Qiita
Blazor WebAssembly + OpenCVSharpでブラウザ上で動作するカスタマバーコードリーダーを作成した(実装解説)C#OpenCVOpenCvSharpWebAssemblyBlazor Blazor WebAssemblyって何？ .NET 6や.NET 7で提供されているBlazorフレームワークのモデルの一つ BlazorはWebUIに関するフレームワーク SPA(Single Page Application)方式でブラウザ上にWebページの描画を動的に行う Blazorで使用可能なモデル Blazor Server: 前者はサーバー側で描画処理 Blazor WebAssembly: ブラウザ側で描画処理 今回は、後者を使用 Blazor WebAssemlbyの凄いところ 通常ブラウザで動的な描画を行う場合は、JavaScriptによるDOM操作やVue.j
認証が有効な Blazor Wasm アプリで、アクセストークンなしで匿名アクセス可能なエンドポイントに HTTP リクエストを送信する | @jsakamoto
C#、ASP.NET、TypeScript、Angular を中心にプログラミングに関した話題を諸々。 by @jsakamoto body,td,div,li{font-family:meiryo,verdana,arial,sans-selif;} #TOP{width:860px;} .b{font-weight:bold;font-size:130%;} h2{border-bottom:solid 3px silver;} h2.POST_TTL{font-size:16pt;border-bottom:none;width:560px !important;} h2.POST_TTL a:hover{color:#5297D3; text-decoration:none;} code, pre{margin:1em 0 1em 0;white-space:pre;display
Blazor には 7 つのプロジェクト タイプがあります。 今回はわりとシンプルな Blazor Hybrid (.NET MAUI プロジェクトを作ってみたいと思います。 ■ dotnet command 今回はビルドや実行には Visual Studio が便利なのでコマンドでは作成せず Visual Studio でやっていきたいと思います。 ■ Visual Studio 参考 docs.microsoft.com 正直なところ、ここに書いてあることで十分なので特に補足することはないのですが、やっていきたいと思います。 準備 Visual Studio のプレビュー版をインストールします。 ワークロード .NET によるモバイル開発 が必要です。 プロジェクト (ソリューション) 作成 Visual Studio のプロジェクトの作成から。 プロジェクト (ソリューション) が作
【.NET8対応】猫でもわかるBlazor ECサイト編〜誰でもかんたんにECサイトを作る！〜 - nekojoker - BOOTH
この商品は PDF の「ダウンロード販売」です。 紙の本ではありませんのでご注意ください。 ※スマホの場合はもっと下にスクロールすると、詳細情報が確認できます。 💡 好評につき第３弾ができました！これまで、第１弾の入門編と第２弾の実践編を執筆し、合計で500冊以上も読んでいただくことができました。本当にありがとうございます。 自分で書いた本が、Blazorを勉強する足がかりになったことをとても嬉しく思います。 さらに学習を進めていきたい方向けに、続編を執筆しました。 😖 基本から応用まで学習できる教材がない公式ドキュメントを読めば、ある程度Blazorの知識をつけることができます。 しかし、学んだ知識を組み合わせて何かアプリを作ろうと思うと、途端に難易度が上がって手が動かなかくなるんですよね。 Blazorは比較的新しい技術なので、出ている情報も英語が多く、少し調べるのにも苦労します。
2024: Blazor の個人認証アカウントのウェブアプリでPostgreSQLのDBを利用 (ASP.NET Core / .Net 8.0 対象） - Qiita
2024: Blazor の個人認証アカウントのウェブアプリでPostgreSQLのDBを利用 (ASP.NET Core / .Net 8.0 対象）PostgreSQLWebアプリケーションASP.NET_CoredotnetBlazor Blazor プロジェクトの新規作成 Visual Studio 2022を開いて プロジェクトの新規作成を押下 Blazorのウエブアプリテンプレートを選択 「次」を押下 プロジェクト名を入力 「次」を押下 「認証タイプ」のドロップダウンで個人アカウントを選択 「作成」を押下 PostgreSQLの設定 デフォールトの設定でSQLServerのデータベースの設定されていますので変更しないといけません。 PostgreSQLのパッケージのインストール ソリューションを右クリック 右クリックすると表示されるコンテキストメニューで Manage NuGe
ドキュメントを軽くあさってみたら Blazor WebAssembly で、既に構成ファイルの扱いまでサポートしているんですね。 ASP.NET Core Blazor hosting model configuration ということで試してみました。 Blazor WebAssembly のプロジェクトを作成しておきます。 NuGet のパッケージの管理で Blazor まわりのライブラリが 3.2 の Preview 3 以降であることを確認します。 では、構成ファイルを置いてい置きましょう。Blazor WebAssembly では wwwroot の下に構成ファイルを置くみたいです。こんな感じで。 それぞれの中身はこのようにしてみました。
はじめに タイトルの通り、C#(Blazor)でClaude APIを使う方法について説明します。 初回登録時に一定額の無料クレジットが付与されますので、無料で試すことができます。 Claudeとは Anthropic社が開発したAIモデル ChatGPTのように人間と自然な会話をすることができ、質問に答えたり助言したりすることが可能です。 ※会員登録が必要です。 詳しい解説はしませんが、まだClaudeを使ったことがない方には以下の記事がわかりやすいかもしれません。 Claudia 非公式ながらも強力な機能を備えたClaude API clientです。 Readmeが丁寧で初心者にもやさしい！ Function Calling、Amazon Bedrockにも対応しています。 Unofficial Anthropic Claude API client for .NET. We hav
株式会社ジェイテックジャパン CTOの高丘 @tomohisaです。この記事では、C#でフロントエンドを開発できるBlazorでつまづいた点を備忘として残しておきます。 最近、私たちジェイテックジャパンで開発しているC#によるイベントソーシング・CQRSフレームワークSekibanおよびC#による鉄道指向プログラミングライブラリ ResultBoxのサンプルとして、簡単な勤怠管理プログラムを作成しています。 これを作成するにあたり、最近.NETの開発のためのスタックとしてマイクロソフトが開発している、Aspire を使用して開発しているのですが、Aspireのデフォルトのフロントエンド開発環境が Blazor という、C#でウェブアプリケーションを記述するフレームワークで、使ってみたいと思っていたので、勉強がてら使ってみています。 ただ、最初はかなりクセがあり、使いにくく、問題に当たった時
前に ASP.NET Core Blazor Server でオレオレ ログインを作りたい という記事を書きました。この時はログイン画面は ASP.NET Core Razor Pages で作成をしていましたが、.NET 8 になって Blazor でも静的サーバーサイドレンダリングがサポートされたのでログイン画面まで含めて Blazor で作成することが出来るようになりました。ここでは、その方法と Static SSR/InteractiveServer/InteractiveWebAssmelby 間でログイン情報を受け渡す方法を紹介します。 プロジェクトの作成 Blazor Web App プロジェクトテンプレートでアプリケーションを作成します。 以下の画面の内容でプロジェクトを作成します。この段階では認証はつけないでください。 ここに手を加えて最終的には InteractiveS
参考記事 Blazorとは 様々な方法でホストできるWeb UIコンポーネント(Razorコンポーネント)を構築するためのWebフレームワーク Razorコンポーネントはサーバー側ではASP.NET Coreで実行できるのに対し、クライアント側ではWebAssemblyベースの.NETランタイム上のブラウザ(Blazor WebAssembly、Blazor WASM)で実行できる ネイティブモバイルアプリやデスクトップアプリでRazorコンポーネントをホストすることもでき、ホスティングモデルが何であっても、Razorコンポーネントを構築する方法は同じ(ソースの流用が可能) WebAssemblyはJavaScriptとは異なり、CPU上でネイティブに近い速度で実行されるコンパイル済みソフトウェア Blazor Server Blazor Serverホスティングモデルを使用すると、コンポ
『マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ』へのコメント
テクノロジー マイクロソフト、「Blazor WebAssembly」正式版を5月にリリース。BlazorでPWAやデスクトップアプリも開発へ
Azure上のBlazorアプリを更新してもChrome上のアプリが更新されない 【▲→川俣晶の縁側→ソフトウェア→技術雑記】
問題 § AzureのApp ServiceにBlazorアプリをデプロイしている。 コードを書きかえて再デプロイしてもChrome上のアプリに修正が反映されない。 リロードボタンを押してもキャッシュクリアしてもだめ。
こんにちは！ 本記事では、デスクトップから Web への移行。WPF から Web に移行するなら Blazor がおすすめな理由について解説します！ なぜ Blazor が良いのか？ WPF から Blazor へ移行する際のポイントを解説 新しいスキルセットの習得が少ない Blazor は .NET テクノロジーですので、WPF で慣れ親しんだ C# コードで Web フロントエンドが作れます。 既存システムの作り直しとなった場合、現行の主力メンバーが新規システムの開発に携わることも多いかと思いますが、新しいテクノロジーを採用すると学習コストが掛かってしまいます。 その点、WPF から Blazor であれば、.NET テクノロジーの経験を活かし、スムーズに Web フロントエンドへの移行を行う事が出来ます。 また、以下の記事でフロントエンドフレームワークの Angular, Vue.
Wpf、winUI3から、blazorで、spring batchで作成したアプリを、WebUIで画面に表示する。 - Google 検索
learn.microsoft.com › ja-jp › aspnet › core › blazor › hybrid › tutorials 2024/04/11 · このチュートリアルでは、WPF の Blazor アプリを構築して実行する方法を示します。 学習内容は次のとおりです。 WPF Blazor アプリ プロジェクトを作成 ...
AWS Toolkit for Visual Studio で Blazor WebAssembly をデプロイした CloudFront ディストリビューションを削除する方法 | DevelopersIO
AWS Toolkit for Visual Studio で Blazor WebAssembly をデプロイした CloudFront ディストリビューションを削除する方法 いわさです。 AWS Toolkit for Visual Studio を使うと以下の記事のように Blazor WebAssembly を CloudFront + S3 へ簡単にデプロイすることが出来ます。 しかし、今回デプロイしたリソースを削除するために CloudFront ディストリビューションを削除したかったのですが Visual Studio から削除出来ないことに気がつきました。 いくつか気づいたことがあったのでシェアしたいと思います。 本記事で使用している AWS Toolkit for Visual Studio 2022 のバージョンは 1.38.0.0 です。 まずはデプロイ、超簡単 まず
Web ブラウザの View Transition 機能 ここでいう "View Transition" というのは、Web ブラウザが提供する機能のことで、2 つの表示状態の遷移にアニメーション効果を付けることのできる、JavaScript API として公開されている機能です。 下記リンク先の冒頭の動画がわかりやすいです。画面間の遷移がアニメーション効果で滑らかに繋がってヌルヌル動きます。 MDN の説明は以下のリンク先を参照ください。 基本的な使い方はとてもシンプルで、表示を変更・書換えを行なう処理を、document オブジェクトの startViewTransition メソッドに渡すだけです。こうすると、変更前の表示状態と、変更後の表示状態が、アニメーション効果で滑らかに繋がって遷移します。下記例は同期処理を startViewTransition の引数に渡していますが、Pr
"ゲームなどでよく見る「長押しのボタン」のUIをWEBで表現してみた" を Blazor で実装してみた - Qiita
プロローグ 先日、Qiita で以下の記事を見ました。 自分は、CSS の background-image で conic-gradient という指定を使うと、このように円グラフ状の Progress 表示が実現できるとは知らず、それまで SVG を使った実装しか使ったことがなく、とても勉強になりました。 さて自分は、何か Web アプリケーションを作るとなると、いちばん好きなフレームワークは、C# で実装できる Blazor なので、この「長押しボタン」を Blazor のコンポーネントとして実装してみました。 Blazor プロジェクトを新規作成し、メーター部分の HTML & CSS を記述 まずは新規に Blazor WebAssembly プロジェクトを作成します (もちろん、Blazor Server や、Interactive Mode に None 以外を指定した Bl
Blazorチートシート - Qiita
<input @bind="<変数名>" @bind:event="oninput" /> 即時反映される。 <input @bind="<変数名>" @bind:event="onchange" /> 入力確定時、Enter押下かフォーカスが外れたとき
Blazor Hybrid では BlazorWebView をネイティブの画面に埋め込んでいます。この BlazorWebView ですが Windows の場合はブラウザと同じように F5 キーで画面がリフレッシュされたりといったブラウザ固有のキー操作が有効になっています。場合によっては、この操作を無効化したくなると思います。今回はこの操作を無効化する方法について紹介します。 因みに、今回の内容ですが Windows 以外の場合では確認できていません。 BlazorWebView では、WebView2 が内部で使われています。この WebView2 では F5 キーなどのキーを無効化にするオプションがあります。Blazor Hybrid で、この WebView2 が生成された直後にアクセスするには BlazorWebView コントロールの BlazorWebViewInitial
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
.NET 6 の Blazor のコンポーネントでクエリ パラメーターを使うのが簡単になりました
ASP.NET Core Blazorでsqlserverに接続してデータを表示する
5 分で Hello World できる Blazor WebAssembly (C#) - Qiita
【Blazor】約300ページにわたる技術書をひとりで執筆した話
ASP.NET Core Blazor Server に 1 からオレオレ認証機能を付けてみよう
Blazor で、タイトルや OGP 用メタ要素を設定する - Qiita
Blazor - サーバーで実行されているのかブラウザで実行されているのかを判別する方法 - Qiita
ASP.NET Core Blazor Hybrid アプリで Razor コンポーネントを再利用する
【Blazor】Azure Static Web Apps にアプリをデプロイする手順 - Qiita
[改訂版] Blazor でラジオボタン input 要素に双方向データバインドする方法 - Qiita
ASP.NET Web Forms 開発者向け Blazor の概要 - .NET
C#でSPAが実現できる、Blazor WebAssemblyのはじめかた
Blazor のコンポーネントのステートについて - ぷろじぇくと、みすじら。
Blazor Hybrid (.NET MAUI) プロジェクトの作り方 - rksoftware
ASP.NET Core Blazor WebAssembly で構成ファイルを扱う - Qiita
Blazor C# チュートリアル - Claude APIを使ってみる - Qiita
.NET Blazor Serverアプリをストップさせる2つの原因
.NET 8 の Blazor にオレオレ ログイン機能を付けよう
ASP.NET Core Blazorについて - Qiita
デスクトップから Web への移行。WPFからWebに移行するなら Blazor がおすすめ
Blazor でも View Transition したい - Qiita
Blazor Hybrid で F5 キーでリフレッシュなどのブラウザ固有のキー操作を無効化したい