前言
這篇文章不會介紹什麼是 Blazor，若想理解基本概念，請自行百度或查看微軟官方文檔。這篇文章是偏向技術的，也就是說它不是概念，而是教你從零開始搭建一個 Blazor 項目，前提是你必須先掌握 ASP.NET CORE 的基本知識。
學習Blazor的前提知識點
- ASP.NET CORE 的基本概念
- Razor Page 的基本概念
- 依賴注入的知識
言歸正傳
Blazor 是屬於 ASP.NET CORE 3.0 體系下的又一套框架，所以你第一件事要做的就是下載 ASP.NET CORE 3.0 SDK 環境。而且僅支持 Visual Studio 2019 的版本，如果沒有的話，出門右轉。
小夥伴們一定要轉變一個思維：
Blazor 是使用 C# 語言來進行客戶端開發的框架。
和 React / Vue / Angular 這些客戶端框架一樣，是用來做前端的。具體怎麼實現的，大家自己去看文檔吧。
從零開始
請記住：這篇教程是從零開始，而不是從一個 Blazor 模版開始。
而是使用
1. 創建一個空的解決方案
然後爲這個解決方案創建一個空項目或者一個控制檯項目
創建完成後，只有一個 Program.cs
2.修改項目文件
- 修改項目文件【直接點擊項目，或使用右鍵->編輯項目文件】
![在這裏插入圖片描述]()
然後會看到如下顯示代碼：<Project Sdk="Microsoft.NET.Sdk"> <PropertyGroup> <OutputType>Exe</OutputType> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> </Project> - 修改節點【Project】的 SDK 值爲【Microsoft.NET.Sdk.Web】，表示使用的是 Web 項目。
<Project Sdk="Microsoft.NET.Sdk.Web"> <PropertyGroup> <OutputType>Exe</OutputType> <TargetFramework>netcoreapp3.0</TargetFramework> </PropertyGroup> </Project>
3. 添加 Startup.cs 類
public class Startup
{
public void Configure(IApplicationBuilder app)
{
throw new NotImplementedException();
}
public void ConfigureServices(IServiceCollection services)
{
throw new NotImplementedException();
}
}4.修改 Program.cs 類
class Program
{
static void Main(string[] args)
{
CreateHostBuilder(args).Build().Start();
}
static IHostBuilder CreateHostBuilder(string[] args)
=> Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(configure =>
{
configure.UseStartup<Startup>();
});
}對比一下 ASP.NET CORE 2.2 的寫法
public class Program
{
public static void Main(string[] args)
{
CreateWebHostBuilder(args).Build().Run();
}
public static IWebHostBuilder CreateWebHostBuilder(string[] args) =>
WebHost.CreateDefaultBuilder(args)
.UseStartup<Startup>();
}大致猜測
3.0 將 Host 抽象出來，可能是爲了更好的兼容 Winform 和 WPF，也有可能是爲了下一代的跨平臺 App 做準備，因此他們託管的不一定就是 WebHost，可以是其他容器。
5. 修改 Starup.cs 的代碼
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddRazorPages();
services.AddServerSideBlazor();
}
public void Configure(IApplicationBuilder app)
{
app.UseStaticFiles(); //必須要有
app.UseRouting();
app.UseEndpoints(configure =>
{
configure.MapBlazorHub();
configure.MapFallbackToPage("/_Host");
});
}
}services.AddRazorPages()
這是添加 Razor Page 的服務，Blazor 也兼容 Mvc 視圖模式，你也可以改成services.AddMvc()，這裏不過是添加依賴注入的服務的位置。services.AddServerSideBlazor()
同理，也需要添加 Server-Side Blazor 的服務。點這裏查看有關Blazor for Server-Side 和 Blazor for Client-Side(Blazor WebAssembly) 的區別。
在3.0中，映射路由的中間件代碼，從原來的
app.UseMvc()改爲使用了app.Endpoints()終結點模式。相關3.0的遷移改動請移步微軟官方遷移文檔。
app.MapBlazorHub()
添加 Singlr 對 Blazor 的路由機制。app.MapFallbackToPage()
這是一個失敗處理的路由，如果路由匹配失敗，則跳轉到該頁面。
6. 添加一個 _Host.cshtml 頁面
Razor Page 默認是在 Pages 文件夾下。
代碼如下：
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="~/" />
</head>
<body>
<script type="text/javascript" src="_framework/blazor.server.js"></script>
</body>
</html>注意事項
- @page 標記一定要有，而且是“/”，表示根目錄。
- @addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers 必須要有
- 在
<head></head>中，一定要有<base href="~/" />這段代碼。 - 在底部必須有
<script type="text/javascript" src="_framework/blazor.server.js"></script>代碼，這個 js 是內置的，路徑和名字就得原封不動是這個。
7. 在 Pages 外面添加一個 _Imports.razor 組件
_Imports.razor 組件是用來導入全局命名空間的，相當於 using 命名空間，否則就得在每一個 razor 組件中自己引用命名空間。
默認會有以下命名空間：
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.JSInterop需要其他的，自行添加。
8. 添加 App.razor 組件
該組件是一個基本路由組件，用來呈現 SPA(Single Page Application)的單頁面容器。（學過前端的應該都懂這個基本概念吧。）
<Router AppAssembly="typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="routeData"></RouteView>
</Found>
<NotFound>
<h2>抱歉！找不到頁面。</h2>
</NotFound>
</Router>Router 組件，位於 Microsoft.AspNetCore.Components.Routing 命名空間。AppAssembly是必填的，要指定一個路由所在的程序集。因此你可以有多個不同的路由形式。
Found 組件，當找到頁面了顯示的內容區域。Coontext是必填的，聲明一個變量。RouterView 組件，顧名思義就是顯示的視圖容器，RouteData屬性要求必填，使用Found 組件聲明的Context的變量即可。
NotFound 組件當然就是找不到視圖要顯示的內容了。
9. 修改 _Host.cshtml 頁面
@page "/"
@addTagHelper *,Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html>
<head>
<title></title>
<base href="/" />
</head>
<body>
@(await Html.RenderComponentAsync<BlazorApp.App>(RenderMode.ServerPrerendered))
<script type="text/javascript" src="_framework/blazor.server.js"></script>
</body>
</html>在 body 內部增加了一段代碼，用於呈現某個組件：@(await Html.RenderComponentAsync<BlazorApp.App>(RenderMode.ServerPrerendered))
10. 最後，你可以新建一個 Index.razor 來顯示首頁
@page "/"
<h1>這裏是首頁</h1>然後運行你的項目吧！！準備好雀躍一番_
恭喜你完成了第一個 Blazor App 的搭建
現在你學會了 Blazor Server-Side 從零開始搭建的技能，所以接下來可以趁熱打鐵，開始搭建屬於自己的應用程序咯。