寫在前面

最近，剛開始學習Blazor。

對于后端出身的程序員來說，使用Blazor上手開發前端程序，門檻確實降低了不少。還在觀望的朋友可以嘗試入坑了。

在學習和編寫Blazor程序的過程中，我產生了一些想法，將會逐漸在本系列中呈現。

razor文件的問題

每個Blazor組件就是一個.razor文件。

razor文件可以包含razor標記、HTML和C#代碼。類似下面這種：

@page?"/counter"<h1>Counter</h1><p>Current?count:?@currentCount</p><button?class="btn?btn-primary"?@onclick="IncrementCount">Click?me</button>@code?{private?int?currentCount?=?0;private?void?IncrementCount(){currentCount++;} }

這種混合代碼的方式編輯起來不太方便。而且如果在真實項目中，代碼邏輯復雜，文件會變得更長，更加難以維護。

要是能像ASP.NET WebForm那樣，C#代碼和HTML分開編寫多好！

這只是一個想法，直到一次偶然發現！

偶然發現

在學習部署Blazor的時候，我注意到一個現象，在Blazor項目發布的目錄下，并沒有發現razor文件的身影，只發現對應項目名稱的dll。?

這與ASP.NET WebForm不同，aspx文件會一同發布，而C#代碼則是編譯放在對應項目名稱的dll中。?

這是不是意味著razor文件也變成了C#代碼的一部分？探究一下！

打開obj目錄（用于存放編譯過程中生成的中間臨時文件），在razor文件的對應目錄發現了Counter.razor.g.cs文件，正好驗證了我們的猜測：

代碼太長，只節選了部分。

namespace?WebApplication1.Pages {[Microsoft.AspNetCore.Components.RouteAttribute("/counter")]public?partial?class?Counter?:?Microsoft.AspNetCore.Components.ComponentBase{protected?override?void?BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder?__builder){__builder.AddMarkupContent(0,?"<h1>Counter</h1>\r\n\r\n");__builder.OpenElement(1,?"p");__builder.AddContent(2,?"Current?count:?");......}private?int?currentCount?=?0;private?void?IncrementCount(){currentCount++;}} }

發現契機

通過上面的代碼可以看到，原來razor標記和Html全部轉換成了C#代碼，放到了BuildRenderTree方法輸出到了Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder對象__builder中，再通過__builder渲染到頁面。而@code代碼塊則是原樣復制。

最關鍵的是這句代碼：

public?partial?class?Counter?:?Microsoft.AspNetCore.Components.ComponentBase

居然是partial類型。

這不就表示，可以像ASP.NET WebForm那樣把代碼放在不同文件中了嗎！

示例驗證

在Page目錄下創建Counter.cs，定義成partial類型。并把@code代碼塊全部剪切過來，還重載了OnInitializedAsync方法測試能否執行：

public?partial?class?Counter?:?Microsoft.AspNetCore.Components.ComponentBase {protected?override?Task?OnInitializedAsync(){currentCount?=?100;return?base.OnInitializedAsync();}?private?int?currentCount?=?0;private?void?IncrementCount(){currentCount++;} }

運行后，發現一切正常：

現在唯一的缺點就是，Counter.cs文件與Counter.razor是平級放置的，不太好看。

試著像ASP.NET WebForm那樣，將Counter.cs文件名改為Counter.razor.cs。

嗯！現在就順眼多了。

結論

在這篇文章中，我們了解到Blazor如何實現將razor代碼最終渲染到頁面上，以及partial 類的使用方式。

帶著問題去學習新技術，而不是僅僅跟著教程Step by Step。這就是我的學習方式。

如果你覺得這篇文章對你有所啟發，請關注我的個人公眾號”My IO“，記住我！

總結

以上是生活随笔為你收集整理的Hello Blazor：(1)像ASP.NET WebForm一样写代码的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。