After downloading Visual Studio, first create a Blazor solution, and create a Blazor Server project in it. You can choose the solution location (Note: The new version of Visual Studio separates the new project templates of Blazor Server and Blazor WebAssembly, which is more intuitive). Regardless of the programs inside, press F5 to execute, and then press F12 on the web page or Ctrl + Shift + I to open the developer tools.(Dev tool), after switching to the Network tab and reloading the web page, you can see several files. Among them, blazor.server.js is the file used to establish a WebSocket channel between the server and the browser through SingalR.
Then clear the files downloaded to the browser, and then click the Counter and Fetch data pages. In the previous website, this was a refreshing operation to refresh the web page, and the files required for the web page would be downloaded again. However, you can see that nothing was downloaded on these two pages (there is favicon.ico download, smart, do you know why?), Because after the connection is established for the first time, subsequent files are passed through SingalR.
接着在同一个解决方案建立一个 Blazor WebAssembly 项目，可以看到这里有 渐进式 Web 应用程序 选项，如果选了，这个网站就可以在电脑下载下来。
You can start the project directly after the project is built, but what if you want to see both Blazor Server and Blazor WebAssembly launched at the same time? You can set both projects as launch projects, and then press F5 to launch the project.
When I was developing a few months ago, I could still see that many dll files were downloaded, but I can see that the files sent by Blazor WebAssembly to the browser are not much different from Blazor Server, because Microsoft has changed the rules for Blazor WebAssembly to download dLs to the browser only when a Component sends a request, which greatly reduces the burden on the browser.
Next, I look at the project structure. For convenience, I frame the equivalent files with the same color and mark them with numbers. First look at No. 5, you can see that Blazor Server and Blazor WebAssembly have Program.cs, and the program entry point for both is Program.cs.
Blazor Server's Program.cs file:
Blazor Wasm's Program.cs file:
Both projects inject services through builder.Services. In the preview version of. NET 6 or before, there is an additional Startup.cs file, and services are "configured" in the ConfigureServices method (If there is a related service that needs to be used, you need to use Dependency Injection here. The benefits of Dependency Injection will be explained later.), The two have the same effect. Does. NET 6 look much cleaner?
通过var app = builder.Build();得到的 app 实例，和原来 Startup.cs 中的 Configure 方法作用也是类似的。用于处理 request 或是注册 middleware 的地方，举例来说，如果想使用别人写的身分验证套件，就必须在这里注册。定义路由也是在这里做的，MapBlazorHub()是建立 Server 跟浏览器间 SingalR 连接的方法，MapFallbackToPage("/_Host")代表网页入口是_Host，Controller 跟 razor page 之外的 request(也就是第一次连接、或是连接出错时)是从这里进入，之后的 Component 触发都是经由 6 号框的 App.razor 更动。
Then look at box No. 2, you can see that Blazor Server has more_Host.cshtml,_Layout. cshtml and Error.cshtml. As mentioned before,_Layout. cshtml (Blazor Server) is similar to index.html (Blazor Wasm). It is the main page of the website, and Error.cshtml is the page that will be directed to when a connection error occurs. Files with other razor file names are components.
Box 3 shows that both items are the same. MainLayout. razor and NavMenu. razor are the page layout and menu respectively. If every page of a website uses the same Sidebar and Menu, every update (such as changing the company logo or adding contact information) would have to be processed. This was too inefficient, so Blazor pulled out these pages and only needed to change one place to apply all pages. SurveyPrompt. razor is a simple example provided by Blazor._ Imports. razor places the used namespaces here, such as@using System;, so that each razor page does not have to refer to their own namespaces. If you want to distinguish the namespaces of different components, you can also create a separate_Imports. razor file in different folders._Imports. razor in different folders will only affect the Components in the folder.
Finally, there is the wwwroot folder in box 1. Blazor WebAssembly has an additional sample-data directory, icon-192.png and index.html. The sample-data directory is the weather data downloaded to the browser, and icon-192.png seems to be nowhere to use? index.html is the file equivalent to_Host.cshtml in Blazor Server (mentioned in the previous paragraph).
And there is an unmentioned Data folder in Blazor Server. What is in it? In fact, it is the weather data sent to the browser by the server. WeatherForecastService asks you to remember this word, and the subsequent dependency injection depends on it.
Finally, there is Blazor Server's appsettings.json. This is a JSON format file. You can place data that needs to be modified frequently here, such as the connection string used to connect to the database. If you write it in the program, the program will have to be recompiled every time it is changed. Putting it in appsettings.json will be more flexible.
- 引用: Lazy load assemblies in ASP.NET Core Blazor WebAssembly
- 引用: ASP NET Core blazor project structure
-
- Note: The code in this article is refactored through. NET 6 + Visual Studio 2022. You can click on the original link to compare and learn the refactored code. Thank you for reading and support the original author **