Visual Studioをダウンロードした後、まずBlazorソリューションを作成し、Blazor Serverプロジェクトを作成し、ソリューションの場所を選択できます。CLARiXのメモ：Visual Studioの新しいバージョンは、Blazor ServerとBlazor Web Assemblyの新しいプロジェクトテンプレートを分割し、内部のプログラムに関係なく、F 5を押して実行し、WebページでF 12またはCtrl+Shift+Iを押して開発者ツールを開きます。Devツール
ブラウザにダウンロードされたファイルを空にして、CounterとFetch dataのページをクリックすると、以前のサイトでは、これはページをリフレッシュする操作ですが、このページに必要なファイルを再ダウンロードすることができます。しかし、この2ページはダウンロードされていません。最初に接続が確立された後、それ以降のファイル転送はSingalR経由で行われます。
接着在同一个解决方案建立一个 Blazor WebAssembly 项目，可以看到这里有 渐进式 Web 应用程序 选项，如果选了，这个网站就可以在电脑下载下来。
ビルド後すぐにプロジェクトを開始できますが、Blazor ServerとBlazor Web Assemblyの両方を同時に起動したい場合はどうでしょうか？両方のアイテムを起動アイテムに設定でき、続いてF5を押すと起動アイテムになる。
数ヶ月前に開発したときには、多くのdllファイルがダウンロードされていましたが、MicrosoftがBlazor Web Assemblyのdllダウンロードルールを変更し、コンポーネントがリクエストを送信したときにのみブラウザにダウンロードされるようにしたため、Blazor Web Assemblyがブラウザの負荷を大幅に軽減しました。
次に、プロジェクト構造を見て、2つの同等のファイルを同じ色でボックス化し、数字でラベルします。5番を見ると、Blazor ServerとBlazor Web AssemblyにはProgram.csがあり、どちらのプログラムもProgram.csがあります。
Blazor Server用のProgram.csファイル：
Blazor Wasmのプログラム. csファイル：
どちらのタイプのプロジェクトもbuilder.Services経由でサービスを注入します。. NET 6プレビュー以前のバージョンでは、Startup.csファイルが追加され、ConfigureServicesメソッドで“サービスを構成”します（関連するサービスを使用する場合は、ここで依存性注入DI Dependency Injectionを使用する必要があります。依存性注入の利点については後述します）。両方の機能は同じですが、. NET 6ははるかにクリーンに見えますか？
通过var app = builder.Build();得到的 app 实例，和原来 Startup.cs 中的 Configure 方法作用也是类似的。用于处理 request 或是注册 middleware 的地方，举例来说，如果想使用别人写的身分验证套件，就必须在这里注册。定义路由也是在这里做的，MapBlazorHub()是建立 Server 跟浏览器间 SingalR 连接的方法，MapFallbackToPage("/_Host")代表网页入口是_Host，Controller 跟 razor page 之外的 request(也就是第一次连接、或是连接出错时)是从这里进入，之后的 Component 触发都是经由 6 号框的 App.razor 更动。
次にボックス2を見ると、Blazor Serverには_Host.cshtml、_Layout.cshtmlとError.cshtmlがあります。_Host.cshtmlは先に述べましたが、_Layout.cshtml（Blazor Server）とindex.html（Blazor Wasm）に似ていて、Webサイトのホームページであり、Error.cshtmlは接続エラーが発生した場合に表示されるページです。他のrazorファイル名のファイルは、個々のコンポーネントComponentである。
3番ボックスは2つの項目が同じで、MainLayout.razor、NavMenu.razorはそれぞれWebページのレイアウトとメニューで、WebサイトはすべてのWebページが同じSidebar、Menuを使用している場合、更新するたびに（会社ロゴを変更する、連絡先を追加するなど）すべてのWebページを処理しなければならないが、非効率的であるため、Blazorはこれらのページを抽出し、1箇所を変更するだけですべてのWebページを適用することができる。SurveyPrompt.razorは、Blazorが提供する簡単な例です。Imports.razorは使用される名前空間をここに配置します。例えば、@using System;のように、各razorページは名前空間を参照する必要はありません。異なるコンポーネントの名前空間を区別するには、別の_Imports.razorファイルを異なるフォルダに作成することもできます。
最後に、ボックス1のw w wrootフォルダ、Blazor Web Assemblyにはsample-dataディレクトリ、icon-192.pngとindex.htmlがあり、sample-dataディレクトリはブラウザにダウンロードされた天気データで、icon-192.pngはどこにもないようですか？index.htmlは、Blazor Serverの_Host.cshtmlに相当します前の段落で説明した。
Blazor Serverには何もないデータフォルダがありますが、そこには何がありますか？実際には、サーバーがブラウザに送信する気象データであり、WeatherForecast Serviceはこの単語を覚えておいてください、依存性注入はそれに依存します。
最後に、Blazor Serverのappsettings.jsonです。これはJSON形式のファイルで、データベースとの接続に使用される接続文字列など、頻繁に変更する必要があるデータをここに置くことができます。プログラムに記述されている場合は、変更ごとにプログラムを再コンパイルする必要があり、appsettings.jsonに配置する柔軟性は比較的大きいです。
- 引用: Lazy load assemblies in ASP.NET Core Blazor WebAssembly
- 引用: ASP NET Core blazor project structure
**注：このコードは. NET 6 + Visual Studio 2022リファクタリングを通じて、元のリンクとリファクタリング後のコードを比較することができます。読んでいただきありがとうございます。