ちょっと目をはなしてる隙に、こんなドキュメントが出来てた！ ASP.NET Core Blazor WebAssembly をセキュリティで保護する Blazor WebAssembly でもログイン機能が公式でいけるんですね。 やってみよう ということでやってみようと思います。とりあえず、Twitter やら独自ログインやらなんでもござれの Azure AD B2C でやってみようかな。ドキュメントに手順もあるし。 Azure Active Directory B2C を使用して ASP.NET Core Blazor のスタンドアロンアプリをセキュリティで保護する Azure Active Directory B2C を使用して、ASP.NET Core Blazor Webashosted アプリをセキュリティで保護する このドキュメントを見ていて気付いたのですが、プロジェクトをつく
概要 .NET 5の正式版がリリースされ、Blazorも新機能が追加されました。 WebAssemblyがGAされてからしばらくBlazorから遠のいていましたが、リハビリを兼ねて新機能に関して簡単なサンプルを見ながら説明していこうと思います。 MSの公式ドキュメントに書いてある事をなぞっている点が多いとは思いますが、合わせて読むことで理解の助けになればと思います。 大した内容ではありませんが、下記にデモとソースを公開しています。 Demoはこちら GitHubのソースはこちら 今回、紹介する項目は下記になります。 CSSの分離 JavaScriptの分離とオブジェクト参照 InputRadioおよびInputRadioGroupコンポーネント InputFileコンポーネント コンポーネントの仮想化 UIフォーカスの設定 アセンブリの遅延読み込み ※基本的にWebAssemblyの視点で
次の場所でダウンロードできます: https://aka.ms/blazor-ebook エディション v6.0 - .NET 6 に更新 書籍の更新とコミュニティへの投稿については、変更ログに関するページを参照してください。 発行者 Microsoft 開発部門、.NET および Visual Studio 製品チーム A division of Microsoft Corporation One Microsoft Way Redmond, Washington 98052-6399 Copyright © 2022 by Microsoft Corporation All rights reserved. 本書のいかなる部分も、書面による発行者の許可なしに、いかなる形式または方法によっても、複製または伝送することを禁じます。 本書は "現状有姿" で提供され、著者の見解と意見を表して
CX事業本部@大阪の岩田です。 Auth0のブログで紹介されている、BlazorにAuth0の認証機能を組み込むチュートリアルを試してみたので内容をご紹介します。 What is Blazor? A Tutorial on Building Web Apps with Authentication 環境 今回利用した環境です。 OS:Mac OS X 10.14.6 .NET Core: 3.0.101 そもそもBlazorとは？ このチュートリアルではBlazorというフレームワークを利用します。Microsoftのドキュメントによると、Blazorは以下のように紹介されています。 Blazor は、.NET を使って対話型のクライアント側 Web UI を構築するためのフレームワークです。 ASP.NET Core Blazor の概要 そうです。なんとC#でSPAの開発ができる！！と
ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする - Qiita
[ { "bookId": 1, "title": "たったひとつの冴えたやりかた", "author": "ジェイムズ・ティプトリー・ジュニア" }, { "bookId": 2, "title": "アンドロイドは電気羊の夢を見るか?", "author": "フィリップ・K・ディック" }, { "bookId": 3, "title": "夏への扉", "author": "ロバート・A. ハインライン" }, { "bookId": 4, "title": "幼年期の終り", "author": "アーサー C クラーク" }, { "bookId": 5, "title": "われはロボット", "author": "アイザック・アシモフ" } ] こういう UI を構築する。 環境 Visual Studio 2019 16.6.1 .NET Core 3.1 ASP.NET
初めに この記事は、普段レガシーよりの開発環境で作業をされている方へ向けて（私もそうです。） 最近のフロントエンドに触れてみようという内容です。暇つぶしに読んでいただければ幸いです。 （結構長文です。） 目次 ・この記事のゴール ・最近のC#とはどんな言語か ・WebAssemblyって何？ ・Blazorって何？ ・SPAって何？ ・実際に作ってみよう 想定読者 ・FrontEnd開発にJavaScript以外の選択肢が欲しい方 ・jQuery以外を使ったことがない方 ・C#が好きな方 この記事のゴール この記事では、razor→C#を呼び出して、どんな感じに動作するかを解説します。 最近のC#とはどんな言語か（宣伝） かつてのC#といえば、Microsoft社が作ったJavaというイメージを持たれている方も多いかと思います。 最近のC#は、Webアプリケーション、ゲーム開発（ちょっと違
【2022年版】Blazor vs React 比較 - どちらを選ぶべきか？ - インフラジスティックス・ジャパン株式会社Blog
（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン） この記事では、現在のモダンウェブ開発において注目されている Blazor と React の2つのフレームワークを比較します。読者様にとって、どちらを採用するのがよりご自身の状況に対して適切かを判断する材料になれば幸いです。(2022年4月最新情報に更新しました。) Information 本記事の更新版【2023年版】が発行されています。下記リンクから参照いただけます。 【2023年版】Blazor vs React 比較 - どちらを選ぶべきか？ シングルページアプリケーションを開発する場合、様々なフレームワークの選択肢があります。最も一般的な選択肢は、Angular、Vue、Reactの3つです。ただし、これらのフレームワークでは、JavaScript または TypeScript を使用する必要があります。J
Blazor Server-SideアプリケーションでBlazorだけで、チャットアプリを作ります。 驚くほど簡単にできます 開発環境 Windows10 Visual Studio 2019 .Net Core 3.0 メッセージ管理クラスの作成 Sharedフォルダに、List<string>型のチャット情報を保持するだけのChatClassを作ります。 using System; using System.Collections.Generic; using System.Linq; using System.Threading.Tasks; namespace BlazorApp30.Shared { public class ChatClass { /// <summary> /// チャットメッセージを保持する /// </summary> private List<strin
背景 bitflyerの12/22のアドベンドカレンダーは、「Blazor WebAssemblyを用いた新規の業務システムの開発（現在進行中）」の話をしたいと思います。Blazor WebAssemblyを検討している人や現在開発中の方の手助けになればと思います。 bitFlyerのバックエンドの言語は基本的にC#で、クラウドはAzureを使用しています。そのため、他のクラウドを使用している場合は、一部異なる可能性があります。 また、検討および開発を2022年4月下旬に開始したため、最新と多少異なる可能性があります。 bitFlyerでのバックエンドの開発環境は、 言語：C# フレームワーク：.Net Framework 4.7.2, .Net Core3.１, .Net 5, .Net 6 インフラ：Azure （参照：https://bitflyer.com/ja-jp/recrui
Blazor WebAssembly を使ってみた
2020年5月の「Microsoft Buld 2020」で、「Blazor WebAssembly」の正式リリースが発表されました。Blazor WebAssemblyは、C#を用いて、Webブラウザ上で実行可能なWebアプリケーションを開発できるフレームワークです。 Webフロントエンドシステムは、JavaScript系フレームワークが流行っていますが、JavaScriptを書かなくても、SPAアプリケーションが作成できます。 ということで、早速使ってみることにしました。 前回の記事 では、ASP.NET Coreを使った簡単なREST API（以下、従業者管理APIと呼びます）を作りましたので、Blazor WebAssemblyで作ったアプリから、そのAPIを呼び出してみます。 1. 環境 本記事では、以下の環境を使用しています。 OS：Windows 10 IDE：Visual
概要 Blazor WebAssembly 3.2.0 Preview 3がリリースされ、Visual Studio(とVisual Studio Code)のデバッグに対応したようなので、Visual Studioでのデバッグを試した際のメモです。 参照元 環境 Windows 10(64bit) 1909 Google Chorome 80.0.3987.149 (64bit) .NET Core SDK 3.1.300-preview-015048 Microsoft.AspNetCore.Blazor 3.2.0-preview3.20168.3 Visual Studio 2019 Version 16.6.0 Preview 2.0 セットアップ 最新の.NET Core SDK(3.1.201) のインストール 下記から最新バージョンのSDKをインストールします。 リンク テ
.NET Core 3.1 SDKをMacにインストールして「Blazor WebAssembly App (3.2.0)」を試してみる。 - Qiita
.NET Core 3.1 SDKをMacにインストールして「Blazor WebAssembly App (3.2.0)」を試してみる。.NETWebAssembly.NETCoreBlazor
Blazor WebAssembly を試してみようかなと思い立ったので以下のドキュメントを写経してみました。 ASP.NET Core Blazor の概要 プロジェクトテンプレートのインストール 今のところプレビューなので自前で入れます。.NET Core SDk 自体も 3.1.102 以降である必要があります。私は、現時点での最新版の 3.1.201 が入っていました。以下のコマンドでプロジェクトテンプレートをいれます。 dotnet new -i Microsoft.AspNetCore.Components.WebAssembly.Templates::3.2.0-preview2.20160.5 入れると、Visual Studio のプロジェクトテンプレートの Blazor アプリの中に Blazor WebAssembly App が生えます。 右下の ASP.NET C
[Microsoft] 番外. C#ソースコードとRazorの分離 - Angularチュートリアル Tour of Heroes を Blazor で再実装する - Qiita
@page "/dashboard" @using BlazorTourOfHeroes.Model @using BlazorTourOfHeroes.Service @inject IHeroService HeroService <h3>Top Heroes</h3> <div class="grid grid-pad"> @foreach (var hero in heroes) { <NavLink href="@("detail/" + hero.Id)" class="col-1-4"> <div class="module hero"> <h4>@hero.Name</h4> </div> </NavLink> } </div> @code { private IEnumerable<Hero> heroes; protected override async Task O
![[Microsoft] 番外. C#ソースコードとRazorの分離 - Angularチュートリアル Tour of Heroes を Blazor で再実装する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c36dd0cca941023a47eacf29c94d1d5aff53ac5d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTWljcm9zb2Z0JTVEJTIwJUU3JTk1JUFBJUU1JUE0JTk2LiUyMEMlMjMlRTMlODIlQkQlRTMlODMlQkMlRTMlODIlQjklRTMlODIlQjMlRTMlODMlQkMlRTMlODMlODklRTMlODElQThSYXpvciVFMyU4MSVBRSVFNSU4OCU4NiVFOSU5QiVBMiUyMC0lMjBBbmd1bGFyJUUzJTgzJTgxJUUzJTgzJUE1JUUzJTgzJUJDJUUzJTgzJTg4JUUzJTgzJUFBJUUzJTgyJUEyJUUzJTgzJUFCJTIwVG91ciUyMG9mJTIwSGVyb2VzJTIwJUUzJTgyJTkyJTIwQmxhem9yJTIwJUUzJTgxJUE3JUU1JTg2JThEJUUyJTgwJUE2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz1kNmIyYTQ3MGVmOGRiMjYwNWNkYTY5NjBhNzdiNzhiNw%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1jZDgwZGFmNTk4ZDRjNWYwOGYyYmRiMTZiODgwNjQxOA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D61a9260ca61c5f180ac02f9941116608)
.NET 8 の Blazor の静的 サーバー レンダリング (SSR) で JavaScript を使う方法
はじめに .NET 8 の Blazor で追加された静的 サーバー レンダリング (SSR) で JavaScript を使う方法を紹介します。 SSR では、普通に script タグをページに追加しても JavaScript が実行されません。この動作自体は今まであった Blazor Server や Blazor WebAssembly でも同じで基本的には OnAfterRenderAsync で JavaScript を読み込んで実行する必要があります。 SSR では OnAfterRender や OnAfterRenderAsync メソッドは呼び出されないので別の方法で JavaScript を読み込んで実行するようにする必要があります。そのため、Blazor のドキュメントの JavaScript 相互運用の所に静的サーバー レンダリングという項目が追加されています。
I’m going to go out on a limb here and make a prediction. Since the web’s inception, much of our industry has spent effort to be on the web but to escape web technologies like JavaScript, HTML and CSS. Examples include Java Applets (1995–around 2013), Microsoft ActiveX (shipped with Internet Explorer 3.0 in 1996), Microsoft’s ASP.NET Web Forms (2002), JavaServer Faces (JSF), the Google Web Toolkit
.NET MAUI と Blazor を統合させる、.NET MAUI Blazor アプリを触ってみる | DevelopersIO
.NET MAUI と Blazor を統合させる、.NET MAUI Blazor アプリを触ってみる いわさです。 先日、.NET MAUI アプリを少し触ってみたのですが、その際のプロジェクトテンプレートに「.NET MAUI Blazor アプリ」というものがありました。 Blazorをネイティブアプリ上でホスティングしてハイブリッドアプリを作成出来るような仕組みのようです。 本日はこちらを使ってみて、どういうものなのかを調べて、そしてプラットフォーム固有の機能を使った簡単なコンポーネントを実装してみました。 本記事では一部プレビュー機能について触れています。 公式ドキュメントのリンクを多めに入れておいたので、最新情報については公式ドキュメントもご確認ください。 まずは新規作成して実行してみる 新規作成すれば動くはずです。 まずはそのまま実行してみましょう。 マルチプラットフォーム
The Qiita Advent Calendar 2019 is supported by the following companies, organizations, and services.
GitHub - AdrienTorris/awesome-blazor: Resources for Blazor, a .NET web framework using C#/Razor and HTML that runs in the browser with WebAssembly.
ASP.NET Blog's archives - Archives of the ASP.NET blog about Blazor. Blazor - Official website of Blazor, from Microsoft. Blazor courses on Microsoft Learn - Blazor courses on Microsoft Learn. Blazor-Dev gallery on .NET Foundation - Daily builds of the 'dev' branch of Blazor. Blazor Extensions - Curated extensions for Microsoft ASP.Net Core Blazor. Blazor University - Unofficial documentation webs
概要 つい最近正式版がリリースされた、Blazor WebAssemblyですが、 そのBlazorのコンポーネント向けのテストフレームワークのbUnitを試した際のメモです。 bUnit公式 サンプルコード 前提 Windows 10 (64bit) Visual Studio 2019 16.6 .NET Core SDK (3.1.300) ※今回はBlazor WebAssemblyを使用しています。 (Server-sideは未検証ですが恐らく動くと思います。) 手順 Blazorプロジェクトの作成 Visual Studioもしくはdotnetコマンドから、Blazor WebAssemblyの新規プロジェクトを作成してください。 bUnit用のテンプレートをインストール 下記のコマンドでテンプレートをインストールします。 バージョンは2020/5/22時点で1.0.0-bet
BlazorクライアントアプリケーションをFirebase Hostingにデプロイし、Firebase Databaseと連携したいと思います。 開発環境 Windows10 Visual Studio 2019 Preview .Net Core 3.0 Preview 9 Firebase CLI for Windows(beta) Firebaseの準備 Firebase-CLIを使えるようにする VisualStudioのプロジェクトをFirebaseにデプロイするために、Firebase-Cliを準備します。Firebase CLI for Windows(beta)は、Node.jsなどのインストールが不要なので便利です。 PATHを通しておきます。 Firebaseにログインし、新しいプロジェクトを作成 Firebaseアカウントを作成し、ログインして、新しいプロジェクトを
【2023年版】Blazor vs React 比較 - どちらを選ぶべきか？ - インフラジスティックス・ジャパン株式会社Blog
（原文：Jason Beres／翻訳：インフラジスティックス・ジャパン） この記事では、現在のモダンウェブ開発において注目されている Blazor と React の 2 つのフレームワークを比較します。読者の皆様にとって、どちらを採用するのがよりご自身の状況に対して適切かを判断する材料になれば幸いです。(2023年2月最新情報に更新しました。) シングルページアプリケーションを開発する場合、様々なフレームワークの選択肢があります。最も一般的な選択肢は、Angular、Vue、React の 3 つです。ただし、これらのフレームワークでは、JavaScript または TypeScript を使用する必要があります。JavaScript を扱いたくない場合の解決策としては、Blazor があります。 この記事では、以下の内容を取り上げます。 Blazorの概要 - 現在の状況／特徴 Web
.NET 5やBlazor WebAssemblyに対応する表形式のグリッドやチャートなどのコンポーネントを揃えた「ComponentOne」最新版が登場
.NET 5やBlazor WebAssemblyに対応する表形式のグリッドやチャートなどのコンポーネントを揃えた「ComponentOne」最新版が登場 2020年11月に、マイクロソフトは同社のアプリケーションフレームワーク「.NET 5」正式版をリリースしました。 .NET 5は、Windowsアプリケーションのためのフレームワークだった「.NET Framework」と、新たにオープンソースで開発された「.NET Core」フレームワークを統合、両者の後継となるフレームワークです。 参考：［速報］マイクロソフト「.NET 5」正式リリース。1つのフレームワークでWindows／Mac／Linuxのデスクトップ、サーバアプリ、Webアプリなどが開発可能に .NET 5のリリースと同時に、.NETとC#などを用いてWebブラウザ上で実行可能なWebアプリケーションを開発できるフレームワ
こんにちは！ インフラジスティックス・ジャパン、テクニカルコンサルティングチームの古堅です。 C# で SPA を構築できるテクノロジーとして ASP.NET Core Blazor (以降、Blazor) が注目されていますね。 Blazor を採用したいというお声もよく聞くようになりましたが、実際に必要なスキルセットは何か？ どんな開発者体制が良いのか？ 本記事で解説します！ Blazor 案件に必要なスキルセット 必要なスキルセット Blazor アプリケーションの構築には、必要なスキルセットは以下となります。 ・HTML + CSS ... デザイン面 ・C# ... ビジネスロジック ・JavaScript ... Blazor がサポートしていない機能のカバー Blazor は JavaScript の代わりに C# でコードが書けるのではないか？と疑問に思う方もいるかと思いま
はじめに 同じようなタイトルで 1 年と半年前に以下の記事を書きました。 この時には Fluent UI Blazor イマイチだなぁと思っていたのですが、あれから 1 年半で Fluent UI Blazor が結構進化していました。そして .NET 8 で Blazor が大進化を遂げたのにも、しっかり対応していました。 まだ、細かいところをみると .NET 8 の Blazor の進化への対応は、ドタバタしてる感じはありますが、即対応版を出してくれているところは安心感があります。 ということで .NET 8 で Fluent UI Blazor を試してみて感想を書いていこうと思います。 Fluent UI Blazor とは Fluent UI Blazor は Microsoft のデザイン システムの Fluent UI に沿ったコンポーネントを提供する Blazor 向けの
先日、ログイン機能を付けた Blazor Server アプリを試してみました。 これは純粋にログインしている・していないで表示を分けたりすることと、ロールベースの承認を動かしてみました。今日は、これに加えてクレームベースとポリシーベースの承認をためしてみたいと思います。 といっても先日の記事の内容までトレースしていたらすぐできる内容になります。 クレームベースの承認 以下のページが公式のクレームベースの承認のドキュメントになります。基本的にこれを組み込んでいく形になります。 組み込む前にログイン処理を実装している Areas/MyLogin/Pages/Index.cshtml.cs のコードを以下のようにして、適当にユーザー名でクレームが変わるようにしておきました。 using System.ComponentModel.DataAnnotations; using System.Se
ASP.NET Core Blazor WebAssembly - 学ぶべきポイントまとめ【フロントエンド開発入門者向け】 - Qiita
ASP.NET Core Blazor WebAssembly - 学ぶべきポイントまとめ【フロントエンド開発入門者向け】Blazor こんにちは！ テクニカルコンサルティングチームの古堅です。 ASP.NET Core Blazor (以下 Blazor) の入門者向けに、学ぶべきポイントのまとめ、および、参考になるページを紹介します！ 本記事では、詳細の解説はしていませんが、気になる方はお気軽にお問い合せください！ Blazor 概要 ASP.NET Core Blazor の概要 Blazor プロジェクトの構成 Blazor プロジェクトの構成を、Blazor WebAssembly と Blazor Server を比較しながら確認する - ASP.NET Core Blazor で始めるフロントエンド 開発（入門編）- ① レイアウト ASP.NET Core Blazor レ
バージョン 1.4 ダウンロード 597 ファイルサイズ 3.82 MB ファイル数 1 投稿日 2021年3月16日 最終更新日時 2022年2月22日
ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする [.NET 6 版] - Qiita
ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする [.NET 6 版]C#EntityFrameworkASP.NET_CoreBlazor はじめに 2022 年 11 月に .NET 6 と Visual Studio 2022 がリリースされました。ということで .NET 6 版の Blazor WebAssembly / ASP.NET Core Web API / Entity Framework を使って CRUD アプリケーションを作っていきたいと思います。 （以前書いたこれの .NET 6 版です） 完成イメージ 環境 Windows 10 Pro Microsoft Visual Studio Communit
![ASP.NET Core Blazor WebAssembly と Web API と Entity Framework Core で SQL Server のデータを取得したり追加したり更新したり削除したりする [.NET 6 版] - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ddb2da00505e096f32bf0dc1f74b7c5db8c76e58/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-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9QVNQLk5FVCUyMENvcmUlMjBCbGF6b3IlMjBXZWJBc3NlbWJseSUyMCVFMyU4MSVBOCUyMFdlYiUyMEFQSSUyMCVFMyU4MSVBOCUyMEVudGl0eSUyMEZyYW1ld29yayUyMENvcmUlMjAlRTMlODElQTclMjBTUUwlMjBTZXJ2ZXIlMjAlRTMlODElQUUlRTMlODMlODclRTMlODMlQkMlRTMlODIlQkYlRTMlODIlOTIlRTUlOEYlOTYlRTUlQkUlOTclRTMlODElOTclRTMlODElOUYlRTIlODAlQTYmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQ5NDZmZDAyMWRmZjU3NDZhYWM1NTFiMWUxMWU3NGU0%26mark-x%3D142%26mark-y%3D100%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB0YW10YW15YXJuJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01ZDk0YzMyNjYxYjM5N2U0ZDIzYjczOGU3ZDIzZjgyMg%26blend-x%3D142%26blend-y%3D504%26blend-mode%3Dnormal%26s%3D2ae8c40e41b00d998a6388a4c2ce039a)
Blazorファーストルック - Qiita
(An English version of this article is also available.) この記事ではMicrosoftにより開発されたBlazorに関して説明していきます。Blazorのプログラミング方法というよりはその用途など、ハイレベルな部分を紹介していきたいと思います。 Blazorとは BlazorはMicrosoftにより開発された、シングルページアプリケーション（SPA）を作成するためのフレームワークです。 .NETの機能を使うことにより、C#でウェブアプリケーションを開発することができます。 現在、Blazorには二種類あります。 Blazor Server Blazor Client (WebAssembly) この記事ではその二種類を合わせて見ていきます。 二種類のBlazor さて、Blazorには二種類あるわけですが、その特徴を見ていきます。
Azure Static Web Apps with .NET and Blazor - .NET Blog
Join us on September 18th as we dive deep into building world-class cloud native applications with .NET and Azure. Azure Static Web Apps is a service that automatically builds and deploys full stack web apps from a GitHub repository. Azure Static Web Apps consist of a static web frontend, and an Azure Functions based backend. When you create a Static Web Apps resource, Azure sets up a GitHub Actio
C#でSPAを実現する、Blazorコンポーネントの開発
対象読者 C#とWebシステムの基礎的な知識がある方を対象とします。C#の基本文法などの解説は割愛します。 はじめに 前回は、ASP.NET Core Blazorについての概要と開発環境、そしてBlazor WebAssemblyのテンプレートプロジェクトの作成までを解説しました。今回からは、テンプレートプロジェクトを元に、実際のアプリを作成していきます。 今回は、日記アプリを作成します。ごくシンプルなアプリでも、Blazor WebAssemblyアプリならではの手法がいろいろ必要となります。 日記アプリ 作成するアプリは次のように、カレンダー表示、テキスト入力、ボタンだけが配置されたページとなります。カレンダー部分はコンポーネントとして作成します。 日記アプリ アプリの動作は簡単です。カレンダーの日付をクリックすると、日記が書かれたデータを読み込み、表示します。「保存する」ボタンを押
はじめに 仕事で作成しているBlazorのアプリケーションで、Handsontableを使用して一覧表を表示しています。 検証作業を実施している同僚から、2台のPCで同じ画面を表示した際に一覧表を表示する処理を実施すると、後から起動したPC側に一覧表が表示され、本来表示されるPC側には何も表示されないとの報告を受けました。 土日の休日を使って解決策を見つけることが出来たので、備忘録として記事に残しておきます。 問題1 現象 会社では複数PCが使用できますが、自宅ではPC1台です。 そこで、違うブラウザChromeとEdgeで同じ現象が出るか試してみました。Visual Studio上で Chromeを起動しておき、後からEdgeを起動して、一覧表を表示する処理を実施するとEdge側に一覧表が表示されました。 これなら Visual Studio上から デバッグ も可能で調査が進みます。 調
Blazorが一般公開になりました。 身の回りでは（大いなる誤解含みで）にわかに話題になっています。 自分はAngularが好きなので、AngularでできることがBlazorだとどうなるのかを調べてみたいと思います。 コンポーネント Angularのコンポーネントと、Blazorのコンポーネントはほぼほぼ同じ意味です。 コンポーネントを用意していくことで画面を組み立てます。 思いついたものをまとめました。 比較項目 Angular Blazor
![[Microsoft] Angular側からBlazorを眺めて比較する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/ab4d02d2a6bb68de99768dca4f42999f4c5ce290/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCTWljcm9zb2Z0JTVEJTIwQW5ndWxhciVFNSU4MSVCNCVFMyU4MSU4QiVFMyU4MiU4OUJsYXpvciVFMyU4MiU5MiVFNyU5QyVCQSVFMyU4MiU4MSVFMyU4MSVBNiVFNiVBRiU5NCVFOCVCQyU4MyVFMyU4MSU5OSVFMyU4MiU4QiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnM9NDU2ZWRiNDA5NjgyNWUxZTMxOTMzZTQ0OWJmNDBiNjY%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBzZW5nb2t1JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1lYWNiYmI4Yzk1MmVkYjkwODY3MTMxMTVkMzMzNGY1Nw%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D8b9ceebc8c3ec98bfb20f561ae542991)
概要 Blazor向けのUIフレームワークであるRadzen Blazor Componentsを導入して試すまでのメモ。 Demo https://nobu17.github.io/RadzenBlazorTest/ ソース https://github.com/nobu17/RadzenBlazorTest/ 背景 Blazor単体にはSPA用のUIフレームワークは用意されていないので別途インストールが必要です。 Boootstrap等の一般的なHTML,css用のフレームワークを使用してゴリゴリHTMLを書く方法も考えられますが、今回はBlazorに特化されたものを使用してみようと思います。 前提 使用している.NET Core及びBlazorのテンプレートのバージョン等は下記です。 .NET Core 3.0 Preview SDK 3.0.100-preview7-012821
.NET Conf 2021 focus on Windows を見た 先日上記の動画を見ていて個人的に気になったのが Blazor セッションでした。 自分の理解が間違っていなかったら Mobile Blazor Bindings が Blazor Desktop Apps になるのではないかと思います。 Blazor Desktop Apps は、Blazor (C# で SPA 作る奴) を使ってデスクトップアプリを作ってしまおうという欲張りプロジェクトです。 Mobile Blazor Bindings 自体は現時点でも試すことが出来ます。 試してみよう プロジェクトテンプレートを入れると現時点でも試せます。以下のコマンドを入れましょう。
Blazorは、簡単に言えばサーバーサイド言語の「C#」だけで、フロントエンドからバックエンドまでの処理が書けるWebフレームワークです。 これまで、フロントエンドの処理は「JavaScirpt」を用いて実装するのが常識で、他に選択肢などほありませんでした。 Blazorを利用することで、多くのバックエンドエンジニアに親しまれている「C#」を使って、フロントエンドの処理が記述できるようになりました。 スポンサーリンク なぜフロントエンドでC#が使える？ 何故、C#がブラウザ上で動くのか疑問に思った方もいるでしょう。 まず、Blazorには「Blazorサーバー」を使う方法と、「WebAssembly」を使う２つの方法が用意されている。 Blazorサーバーを使うと、SignalR通信（WEBソケットまたはAjaxなど）を通じて、HTMLタグなどのDOMをサーバーサイドでレンダリングしてブラ
デバッグしよう Blazor WebAssembly を触ってみる - その①環境を整える、サンプルを動かす の続きです。 今回は以下の記事を参考にデバッグ操作を試してみたいと思います。 ASP.NET Core Blazor WebAssembly をデバッグする https://docs.microsoft.com/ja-jp/aspnet/core/blazor/debug?view=aspnetcore-3.1#visual-studio-code Visual Studio Code でやってみる 1. launch.json の確認 .vscode\launch.json がない状態で Run -> Start Debugging (F5) でデバッグ実行をクリックすると、以下のように環境の選択肢が表示されたと思います。 ここで .NET Core を選択すると以下のようなデバ
Blazor WebAssemblyで高機能なデータグリッドコントロールを使用する | MESCIUS.devlog - メシウス株式会社
メシウス株式会社のDeveloper Solutions〈開発支援ツール〉の情報発信メディア「MESCIUS.devlog」 .NET 5で対応されないASP.NET Web Formsの移行先としても注目を集める「ASP.NET Core Blazor」ですが、その本命とも言われている「Blazor WebAssembly」が2020年5月に正式リリースされました。 こちらは2020年7月17日まで開催中のオンラインイベント「de:code 2020」にて、マイクロソフト コーポレーションの井上章さんのセッションの中で詳しい解説やデモを見ることができます。 今回の記事では、Blazor WebAssemblyの公式のプロジェクトテンプレートをベースに、Blazor WebAssemblyの基本的な使い方や、標準のテーブルを高機能なデータグリッドに置き換える手順などをご紹介したいと思います
2023/11/27 追記 この記事を書いて 1 年半ほどたって状況が結構変わっていたので新しい記事を書きました。最新では、かなり良くなっているので、そちらを参照してください。 はじめに これは知っていることや調べたことを体系的にまとめたものではなく、試してみたことの記録用のメモです。なので綺麗にまとまってないし、随所に個人的なお気持ちが散りばめられています。 本文 Blazor は結構好き！でも画面作るためには HTML/CSS が大きな比重を占めてしまうのが現実…。 HTML/CSS でそれっぽい画面を組む以前に、左半分はこれを出して右半分は、上下に分割して、それぞれ別のものを表示したい…！とかボーダーレイアウト組みたいとか、既存の UI フレームワークだと簡単に組めるようなものが結構めんどい…。 grid layout や flex layout で結構マシというか、ちゃんと覚えれば
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ASP.NET Core Blazor WebAssembly でログインを作ってみる - Qiita
.NET 5で追加されたBlazorの新機能の説明(サンプル付き) - Qiita
ASP.NET Web Forms 開発者向け Blazor
C#でSPAが開発できるBlazorにAuth0で認証機能を付けてみる | DevelopersIO
C#でSPA(Blazor)をして、モダンフロントエンドに触れてみる(導入～開発①編) - Qiita
Blazor Server-Side アプリで作る 簡単チャットアプリ - Qiita
Blazor WebAssemblyで新規の業務システムを開発している話
Blazor WebAssemblyのアプリケーションをVisual Studioでデバッグする - Qiita
ASP.NET Core Blazor WebAssembly のハローワールド - Qiita
Why Blazor, via WebAssembly, is the future
Blazorのカレンダー | Advent Calendar 2019 - Qiita
Blazorコンポーネント向けのテストフレームワークのbUnitを使ってみる - Qiita
BlazorアプリをFirebase Databaseと連携させる - Qiita
ASP.NET Core Blazor 案件を成功させる為のスキルセットや開発体制について - Qiita
Blazor で HTML を書きたくないよぉ…(Fluent UI Blazor 編 on .NET 8)
ASP.NET Core Blazor Server でクレームベースの承認とポリシーベースの承認をする
猫でもわかるBlazor入門｜Blazorマスターへの道
BlazorでJavaScriptから.NETの動的(インスタンス)メソッドを呼び出す - Qiita
[Microsoft] Angular側からBlazorを眺めて比較する - Qiita
Blazor向けのUIフレームワークのRadzen.Blazorを使ってみる - Qiita
Blazor Desktop Apps 面白そうじゃない？
Blazorの解説！C#だけでフロント・バックエンドが作れる凄いやつ!
Blazor WebAssembly を触ってみる - その②デバッグしてみる - Qiita
Blazor で画面作るために HTML 使いたくないよぉ… Fluent UI 編