筆者は当初、ASP.NET Core API + Blazor Serverを使用していたので、Blazor Serverのデモンストレーションを行い、Blazor Web Assemblyを研究した後に追加します。
まず、コンポーネントは再利用可能なので、Index.razorに2つのカウンターを配置してプロジェクトを開始します。（完全にデバッグしたくない場合は、ctrl+F5を押すことができます。デバッグモードを起動します。起動速度は比較的速く、ファイルを保存するたびに、Blazorは監視します。Webページの再ロードは新しいプログラムをロードすることができます）、ブラウザ上の二つのCounterはそれぞれのClick meボタンを持っています。それぞれクリックした後、数字がそれぞれ増加するのを見ることができます。代表は異なるComponentで、これらの数字はどこで定義されますか？
Counter.razorを開きます。一番上に@pageインジケータがあります。次に、HTMLといくつかのC#プログラム、最後に@codeブロックがあります。これはBlazorの素晴らしいところです。@codeは、変数の定義、メソッドの実装、バックエンドやAPIへのリクエストの送信など、一般的なWeb JSに相当しますが、BlazorはC#で書かれており、ここではプライベート変数currentCountが定義され、IncrementCount（）メソッドがあります。このメソッドを呼び出すのはClick meボタンで、ボタンをクリックするたびにcurrentCount+1になります。結果はp要素に含まれます。
currentCountの定義方法とページのレンダリングはモデル結合model bindingであり、データとページの結合関係があることを意味し、. NET FrameworkのViewの@modelまたは@Viewbag、Angularの[ngModel]も同様であり、すべてがページにデータをフローした後、ページの操作がデータの動作に影響を与えることができます。
我们来定义另一个变量 myClass，给这变量一些 bootstrap 的 class，再把变量放在 button 的 class 里面，记住在 html 里面用到 C#的程序必须以@开头，不然 Blazor 不知道要编译。重新加载页面可以看到按钮的样式变了，Blazor 帮我们把 myClass 的值 text-primary bg-warning 放进 button 的 class。
次にFetchData.razorを見てみましょう。@using BlazorServer.Dataがあります。このusingを_import.razorに入れることができます。@inject WeatherForecast Service Forecast Serviceとは何でしょうか？まず@codeブロックを見て、WeatherForecast配列型の変数forecastsを定義し、非同期メソッドOnInitializedAsyncを使用してForecastService.GetForecastAsync（DateTime.Now）を呼び出し、結果をforecastsに返します。鋭い目の肥えた人は、一番上のForecastServiceが@codeブロックのForecastServiceと同じであることに気づくはずです。
GetForecastAsync（）メソッドをクリックしてF 12を押すと、このメソッドは5つのランダムに生成された気象データの配列を返します。HTMLはforecastsがnullかどうかを判断し、そうでない場合はforeachを使用してforecastsの日付、摂氏、華氏、天気状態を1つずつ表示するテーブルを生成します。
Blazorは1つのウェブページしかなく、他のコンテンツはコンポーネントで構成されており、イベントがトリガーされるたびに、サーバーまたはWeb Assemlbyは対応するコンポーネントをブラウザにレンダリングしますが、Blazorはどのコンポーネントをレンダリングするかを知る方法ですか？
原因就是@page 指示词，这个指示词相当于传统的路由，可以看到 Index.razor 的@page 为"/"，表示这是首页，Counter.razor 及 FetchData.razor 也有相应的@page 指示词。一个页面可以有多个@page 指示词，不过开头一定要有斜线且用双引号包起来，笔者曾想过建立 enum 集中管理不同 Component 的@page，可惜目前 Blazor 不支持这种做法。另外若两个 Component 用了相同的@page，编译阶段就会出现错误提示，所以也不用担心若有重复路由 Blazor 会怎么处理。
では、左のメニューのHome、Counter、Fetch dataページはまたどこでされていますか。MainLayout.razorを開くとNavMenu要素が表示され、NavMenu.razorを開くと3つのNavLinkコンポーネントが表示されます。これらはサーバーによってブラウザが認識するa要素に変換されるため、Devツールを開いてもa要素のみが表示されます。
MainLayout.razorに戻ると、@Bodyインジケータが表示されます。これは他のComponentが配置される場所であり、placeholderの一種と言えます。App.razorにはFoundとNotFoundの2つのComponentがあります。文字通り、前者は入力されたURLが一致するComponentを見つけたときにここに入り、後者は一致するComponentが見つからず、両方がMainLayoutを使用していることがわかります。また、異なるレイアウトを適用するページがある場合は、独自に定義することもできます。
ここでは、Blazor Serverがどのようになったかを確認し、Angularに似ていることがわかります。管理が簡単です。Blazor Web AssemlbyとBlazor Serverのindex.htmlと_Layout.cshtmlはほぼ同じで、appsettings.jsonファイルがなく、通常、プログラムとデータベースの接続に必要な接続文字列がこのファイルに配置されます。Blazor Web Assemlbyは実際に受動的にデータを受信するだけで、積極的にデータベースに接続できないことを証明します。筆者はここでEF Coreを参照しようとしましたが、Blazor Web Assemlbyはデータベースにアクセスできません。. NET Frameworkの世界では、XML形式のweb.configを使用し、. NET CoreではJSON形式のappsettings.jsonを使用します。
引用: ASP NET Core blazor project structure
**注：このコードは. NET 6 + Visual Studio 2022リファクタリングを通じて、元のリンクとリファクタリング後のコードを比較することができます。読んでいただきありがとうございます。