前面我們通過幾篇文件介紹了什麼是Blazor以及給出了我們的hello Word, 同時介紹了典型的部署Server和WebAssembly模板創建出來的文件結構是什麼樣的，特別是創建不同的部署模型，應用是如何配置和啟用的， 如果您對這些概念還不是很清楚，建議您通過如下的文章複習一下。
什麼是Blazor?
Hello, Blazor World! (基於WebAssembly部署)
Hello, Blazor World! (基於Blazor Server部署)
深入理解Blazor Server技術
Blazor和PWA讓桌面、安卓&iOS App開發多了一個選擇和可能
今天我們使用基於BlazorServer的部署模型創建一個簡單的TodoList應用，雖然這個應用非常簡單，但是基本包含了Blazor應用開發的很多要點：
如何定義應用默認的Layout。
如何使用預定義的組件。
如何新建一個自定義的組件。
如何進行數據綁定。
如何監聽一個事件。
如何使用單獨的CSS，對自定義的組件定義外觀。
深入的理解基於Blazor的UI渲染。
該教程的原始碼，您可以從這裡下載：
https://github.com/hylinux/AzureDeveloperCN/tree/main/TodoList
該項目運行的結果圖:
創建應用:
dotnet new blazorserve -o TodoList
使用模板BlazorServer 創建一個應用，名字叫做TodoList, 創建完成後，你可以進入目錄TodoList, 然後嘗試瀏覽一下使用模板BlazorServer創建出來的項目結構以及文件結構是什麼樣子的，可以仔細的觀察一下Program.cs, Startup.cs, 以及App.razor 等文件是整個應用最為重要的運行入口。
如何定義默認的Layout：
在創建應用的時候，我們就提到整個應用的入口就是Program.cs, 在該文件中，創建一個普通的webhost, 然後將該webhost通過Startup.cs進行配置。
Startup.cs裡有兩個方法最為重要:ConfigureServer和Configure, 為了運行基於BlazorServer運行的Blazor應用，請注意只需要在Startup.cs中添加劃紅線的語句就可以了。
這其中，添加RazorPages方法，AddServerSideBlazor() 擴展方法，以及最後在endpoint裡配置，都是為了使得一個基於Blazor Server技術構架的應用正常運行，要查看自己的項目是否是可以運行Blazor Server的應用，最低要檢查這幾個設定和步驟。
從上述文件可以觀察到，從mappingendpoint的時候開始，整個應用的首頁是位於項目根目錄下的Pages裡的_Host.cshtml, 打開_Host.cshtml 文件可以觀察到如下所示：
從上述劃紅線處可以看到：
該頁面是一個Razor Pages類型的可以承接路由的頁面。
指定了該Razor Pages頁面的名稱空間
並且由於該文件是一個Razor Page項目中的頁面，同時也是在部署的時候用戶訪問根目錄的入口文件，也即是首頁，相當於我們之前的index.html, index.jsp, index.asp, index.php 這些頁面的作用，同時也需要注意到部署為blazor server入口文件是_Host.cshtml, 但是部署為webassembly是index.html.
從<component type="typeof(App)"> 這一行指明我們首個組件，也即是App.razor.
Iii. 理解App.razor的內容：
從App.razor的內容可以學習到，整個App.razor 直接使用了Blazor內置的組件Router, 該組件定義了項目需要使用的程序集，也即typeof(Program).Assembly, 之後關於項目所需要的類，名稱空間，接口等信息全是從該程序集搜索，另外也可以觀察到在blazor中應用組件的模式均使用html形式的標記形式，
例如
<Router.…>
<Found>
</Found>
<NotFound>
</NotFound>
</Route>
同時需要注意在Found組件內，繼續使用了組件<RouteView> 同時指定了默認的Layout組件為MainLayout組件。
MainLayout.razor 內容：
請注意在Mainlayout組件中，使用了內置的組件<NavMenu/> 代表渲染左側側菜單。同時在Layout文件中，使用@Body代表渲染內容。
Iii. 如何使用預定義的組件
關於如何使用預定義的組件，前面我也講述過了，對於Blazor而言，在UI的部分直接以類似HTML標記一樣的語法使用預定義的組件。
IV. 如何新建一個自定義的組件
下面我們將自定義一個組件，並逐漸豐富該組件的內容, 完成我們上述如結果圖所示的功能。進入到項目的根目錄，運行如下的命令:
dotnetnew razorcomponent -n Todo -o Pages
通過該命令即創建了一個新的組件，該命令的意思是創建一個新的razor組件，-n 指定該組件的名稱為Todo, -o 指定該組件輸出到 Pages目錄，這裡有一個默認的約定需要遵守，即所有的自定義的帶路由的組件必須位於項目根目錄下的Pages目錄下，可以通過在Startup.cs 中ConfigureServer中傳遞選項參數進行更改，目前我們項目直接使用這個就好。
還有需要注意的是組件名稱首字母必須大寫！！！
使用VS Code 打開該文件的內容，我們一一講解要點:
首先看自定義組件的三個主要的部分：
以@+關鍵字部分：主要用於使用Blazor關鍵字指定該組件的特性，例如@page 指定該組件是帶路由功能的。@using 指令引入其他程序集中名稱空間的包， @inject 通過DI引入Service 類，等等。
定義UI的部分： 這個部分使用HTML 標記和C#代碼以及Blazor 指令，代碼塊來定義UI呈現的外觀，
定義代碼部分：在Blazor中使用@code { } 代碼塊來定義 代碼部分，一個組件中可以擁有多個代碼塊，可以定義filed, 屬性，方法三個類型的內容。
這裡有一個很重要的概念需要先期理解：Razor 組件的目的是為了UI輸出。所有在Razor組件中的代碼都只有兩個目的一個是輸出UI內容，一個不輸出。因此在第二部分中，Razor的表達式一定是要輸出內容的，這裡大家如果對Razor不熟悉的話，有必要再參考一下前面我翻譯整理的Razor 語法參考。
如何進行數據綁定
數據綁定是什麼？數據綁定的意思是在UI上的一個組件值和組件的屬性說這是filed是一起聯動的，改變組件filed或者屬性的值，UI上的組件值也會相應改變，同時會觸發組件重新渲染，這個設計很重要，後面我們就會看到。圖片上標紅2的地方，我們通過razor 表達式綁定了值，我們並沒有在其上綁定任何監聽的事件，但是點擊列表中的checkbox, 這裡的表達值是自動重新計算的，這就是綁定的魅力，希望大家好好理解。
當前顯示3， 點擊checkbox, 變成4， 但是我們並沒有像在javascript中一樣需要寫監聽的事件，然後由事件更改當前已經完成的事件數，這就是數據綁定的結果：
當然數據綁定的模式本身很簡單，直接使用指令@bind就可以完成綁定了。例如4， 5， 6都是數據綁定的實例。
VI. 如何監聽一個事件
監聽事件以@on{事件名稱} = "方法名」 定義一個事件監聽，這些事件例如click事件，雙擊事件，移動滑鼠，數據更新等等。部分支持事件參數的事件描述:
VII. 如何使用單獨的CSS對自定義組件定義全新外觀
如果需要對自定義的組件外觀進行重新定義，只需要定義和Razor組件一樣名字的css文件，並放置在同一個目錄就可以了，例如我們自定義的組件名稱叫: Todo.razor, 其CSS文件名稱即為Todo.razor.css, 然後在該CSS文件中定義CSS外觀就可以了。
Blazor會將組件的CSS自定義的獨立文件編譯成一個大的CSS文件，並將會重新定義CSS的名字，形成獨立的名字，不會和其他組件的定義衝突，如下是使用Edge Developer tool 觀察到CSS定義：
同時Blazor編譯後的各個組件的獨立的CSS會被放入文件{項目名}.styles.css 的文件中，例如本項目是:
TodoList.styles.css
VIII. 如何深入理解Blazor框架是如何對UI進行渲染
這裡要理解的是對於UI的渲染，Blazor 會將所有的組件在內存形成一個基於DOM的圖形樹，當有組件UI更新事件或者Blazor框架直接會和瀏覽器的DOM進行溝通，從而直接渲染頁面。