# 如何讓 ASP.NET Core Blazor Server 在斷線時不影響頁面瀏覽

由於第一版 [Blazor](https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-3.1) 屬於連線式的 SPA 應用，所有的頁面變更與資料繫結事實上都是從後端進行計算，透過一種類似 VDOM 的機制，自動計算出網頁要更新的範圍，並且產生必要的 JS 回瀏覽器執行。過程中由於透過 WebSockets 連線，大幅減少前後端通訊的延遲狀況，效率比透過 AJAX 還高出許多。不過預設的 Blazor 專案範本，當網頁在瀏覽器與伺服器斷線時，網頁會無法瀏覽，本篇文章特別點出這個小問題，告訴你該怎樣解決這個小困擾。

### 前言

從 ASP․NET Core 3.1 開始，ASP.NET 生態系全新的開發框架 [Blazor](https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-3.1) Server 正式推出，這個框架有個非常顯著的特色，那就是你可以用 C# 撰寫前端網頁，開發 SPA (單一頁面應用程式) 所需的程式碼，從基本頁面 Binding (資料繫結)、多頁面路由、變更偵測、... 等等，全部都不用再寫 JavaScript 了，只要會寫 C# 與 Razor 語法，就可以立即上手前端網頁開發。

Blazor 應用程式是以**元件**為基礎，在 Blazor 中所有頁面都是一個一個的元件組成，例如頁面、對話方塊或資料輸入表單、... 都是元件。除此之外，你甚至可以透過 [Razor 類別庫](https://learn.microsoft.com/zh-tw/aspnet/core/razor-pages/ui-class?view=aspnetcore-3.1) (RCL) 讓寫好的元件共用於 MVC 與 Blazor 之間，還能封裝成 NuGet 套件進行共用，非常的方便。

目前 Blazor 框架區分成兩個版本：

1.  Blazor Server (正式版)
2.  Blazor WebAssembly (預覽版)

詳細說明請參考 [ASP.NET Core Blazor 簡介](https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-3.1) 文件。

### 起手式

1.  請確認安裝 [.NET Core SDK 3.1](https://dotnet.microsoft.com/download)
    
2.  建立專案
    
    ```bash
    dotnet new blazorserver -n demo1
    ```
    
3.  使用 VSCode 開啟專案
    
    ```bash
    code demo1
    ```
    
4.  檢查 `Pages/_Host.cshtml` 首頁
    
    這個檔案是 SPA 的真正入口頁：
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/a8ebd2e088e3fec3119f-72307611-d2b0bd00-36b5-11ea-8186-503de3eadf3f.png)
    
5.  檢查 `App.razor` 首頁
    
    這頁已經進入到 Razor 頁面，定義了**路由**比對成功之後該怎樣顯示頁面：
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/dedae66c95fc27c3f23c-72307725-418e1600-36b6-11ea-889b-25c50284ac85.png)
    
6.  檢查 `Shared/MainLayout.razor` 頁面
    
    這是 Blazor 的**主版頁面** (Layout)
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/7811c5ec43c35f40f56a-72307802-80bc6700-36b6-11ea-99d7-19f455281432.png)
    
7.  啟動 ASP.NET Core Blazor 網站
    
    ```bash
    dotnet run
    ```
    
    ![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/65a7f163d86a43152ed7-72307950-d2fd8800-36b6-11ea-8336-99828e46c230.png)
    

### 斷線處理

當你將 Blazor 應用程式停止 (按下 `Ctrl+C` 快捷鍵)，就會立刻看到網頁畫面呈現如下圖的介面：

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/cfbeeeceeb08f9b4377d-72310892-f11ab680-36bd-11ea-8139-88f5bb6f5095.png)

如果只是瞬間斷線或是應用程式重啟，其瀏覽器會自動重連一次，但這段時間內，使用者將無法瀏覽網頁。

如果不想讓提示使用者網路已經斷線，或是不要這麼暴力的將網站內容遮蔽，你可以試著在 `Pages/_Host.cshtml` 檔案加入 `<div id="components-reconnect-modal"></div>` 標籤，這個標籤將會在與伺服器斷線時自動顯示出來，並透過 CSS 調整顯示樣式。

如下範例，我刻意將所有**重新連線**的提示隱藏，這樣在斷線的時候就不會影響使用者瀏覽網頁了：

```html
<div id="components-reconnect-modal"></div>
<style>
    .components-reconnect-modal .components-reconnect-show, .components-reconnect-failed, .components-reconnect-rejected {
        display: none;
    }
</style>
```

![image](https://stwillblogassets.blob.core.windows.net/files/images/external/user-images.githubusercontent.com/33bfa8570178f8d1c0d8-72312837-55d90f80-36c4-11ea-8e2d-d76727571e17.png)

### 相關連結

-   [ASP.NET Core Blazor 簡介](https://learn.microsoft.com/zh-tw/aspnet/core/blazor/?view=aspnetcore-3.1)
-   [aspnet/Blazor - Gitter](https://gitter.im/aspnet/Blazor)
-   [Blazor Videos](https://www.youtube.com/user/Backslider64/videos)
-   [WHAT'S NEW IN ASP.NET CORE 3.0, BLAZOR AND SIGNALR](https://blog.zhaytam.com/2019/09/13/whats-new-asp-net-core-3/)