在 ASP.NET Core Blazor 專案編譯後的 .cshtml & .razor 變成甚麼呢？
現在，可以建立一個伺服器端的 Blazor 專案，並且建置成功之後，接著，可以使用任何一套 .NET 組件 Assembly 的反组譯工具，開啟這個 Blazor 專案的組件，就可以看到原先的 Counter.razor 原始碼為
@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++;
}
}
從編譯之後的組件內，會看到在 Pages 命名空間內有個 Counter 節點，點選這個節點，就會看到編譯後的 Counter.razor 所產生的類別
// BlazorApp10.Pages.Counter
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Rendering;
using Microsoft.AspNetCore.Components.Web;
using System;
[Route("/counter")]
public class Counter : ComponentBase
{
private int currentCount = 0;
protected override void BuildRenderTree(RenderTreeBuilder __builder)
{
__builder.AddMarkupContent(0, "<h1>Counter</h1>\r\n\r\n");
__builder.OpenElement(1, "p");
__builder.AddContent(2, "Current count: ");
__builder.AddContent(3, currentCount);
__builder.CloseElement();
__builder.AddMarkupContent(4, "\r\n\r\n");
__builder.OpenElement(5, "button");
__builder.AddAttribute(6, "class", "btn btn-primary");
__builder.AddAttribute(7, "onclick", EventCallback.Factory.Create<MouseEventArgs>((object)this, (Action)IncrementCount));
__builder.AddContent(8, "Click me");
__builder.CloseElement();
}
private void IncrementCount()
{
currentCount++;
}
}
這裡產生了一個 Counter 類別，並且是繼承了 ComponentBase 類別，而且其中，宣告在 .razor 檔案內的 HTML 標記宣告內容，將會由 BuildRenderTree 方法重新呈現出來；而對於 @code 區段內的程式碼，則就會存在於該類別內。
現在來看看 _Host.cshtml，在 Blazor 預設專案範本建立的時候，會呈現如下的標記宣告內容
@page "/"
@namespace BlazorApp10.Pages
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BlazorApp10</title>
<base href="~/" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
<link href="css/site.css" rel="stylesheet" />
</head>
<body>
<app>
<component type="typeof(App)" render-mode="ServerPrerendered" />
</app>
<div id="blazor-error-ui">
<environment include="Staging,Production">
An error has occurred. This application may no longer respond until reloaded.
</environment>
<environment include="Development">
An unhandled exception has occurred. See browser dev tools for details.
</environment>
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.server.js"></script>
</body>
</html>
上面的檔案在編譯之後，將會出現在另外一個組件上
在該組件內會有一個 Pages__Host 類別，該類別繼承了 Page 類別，底下就是這個 Razor Page (Razor 頁面) 經過編譯器產生的類別原始碼
// BlazorApp10.Pages.Pages__Host
using BlazorApp10;
using BlazorApp10.Pages;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.Razor;
using Microsoft.AspNetCore.Mvc.Razor.Internal;
using Microsoft.AspNetCore.Mvc.Razor.TagHelpers;
using Microsoft.AspNetCore.Mvc.RazorPages;
using Microsoft.AspNetCore.Mvc.Rendering;
using Microsoft.AspNetCore.Mvc.TagHelpers;
using Microsoft.AspNetCore.Mvc.ViewFeatures;
using Microsoft.AspNetCore.Razor.Hosting;
using Microsoft.AspNetCore.Razor.Runtime.TagHelpers;
using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Text.Encodings.Web;
using System.Threading.Tasks;
[RazorCompiledItemMetadata("RouteTemplate", "/")]
[RazorSourceChecksum("SHA1", "c4eef6e21b532050217466a050cf103768022b7b", "/Pages/_Host.cshtml")]
public class Pages__Host : Page
{
private static readonly TagHelperAttribute __tagHelperAttribute_0 = (TagHelperAttribute)(object)new TagHelperAttribute("href", (object)new HtmlString("~/"), (HtmlAttributeValueStyle)0);
private static readonly TagHelperAttribute __tagHelperAttribute_1 = (TagHelperAttribute)(object)new TagHelperAttribute("include", (object)"Staging,Production", (HtmlAttributeValueStyle)0);
private static readonly TagHelperAttribute __tagHelperAttribute_2 = (TagHelperAttribute)(object)new TagHelperAttribute("include", (object)"Development", (HtmlAttributeValueStyle)0);
private TagHelperExecutionContext __tagHelperExecutionContext;
private TagHelperRunner __tagHelperRunner = (TagHelperRunner)(object)new TagHelperRunner();
private string __tagHelperStringValueBuffer;
private TagHelperScopeManager __backed__tagHelperScopeManager = null;
private HeadTagHelper __Microsoft_AspNetCore_Mvc_Razor_TagHelpers_HeadTagHelper;
private UrlResolutionTagHelper __Microsoft_AspNetCore_Mvc_Razor_TagHelpers_UrlResolutionTagHelper;
private BodyTagHelper __Microsoft_AspNetCore_Mvc_Razor_TagHelpers_BodyTagHelper;
private ComponentTagHelper __Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper;
private EnvironmentTagHelper __Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper;
private TagHelperScopeManager __tagHelperScopeManager
{
get
{
//IL_0028: Unknown result type (might be due to invalid IL or missing references)
//IL_0032: Expected O, but got Unknown
if (__backed__tagHelperScopeManager == null)
{
__backed__tagHelperScopeManager = (TagHelperScopeManager)(object)new TagHelperScopeManager((Action<HtmlEncoder>)base.StartTagHelperWritingScope, (Func<TagHelperContent>)base.EndTagHelperWritingScope);
}
return __backed__tagHelperScopeManager;
}
}
[RazorInject]
public IModelExpressionProvider ModelExpressionProvider
{
get;
private set;
}
[RazorInject]
public IUrlHelper Url
{
get;
private set;
}
[RazorInject]
public IViewComponentHelper Component
{
get;
private set;
}
[RazorInject]
public IJsonHelper Json
{
get;
private set;
}
[RazorInject]
public IHtmlHelper<Pages__Host> Html
{
get;
private set;
}
public ViewDataDictionary<Pages__Host> ViewData => (ViewDataDictionary<Pages__Host>)(object)base.PageContext?.ViewData;
public Pages__Host Model => ViewData.get_Model();
public override async Task ExecuteAsync()
{
((RazorPageBase)this).set_Layout((string)null);
((RazorPageBase)this).WriteLiteral("\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("head", (TagMode)0, "c4eef6e21b532050217466a050cf103768022b7b4361", (Func<Task>)async delegate
{
((RazorPageBase)this).WriteLiteral("\r\n <meta charset=\"utf-8\" />\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\r\n <title>BlazorApp10</title>\r\n ");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("base", (TagMode)1, "c4eef6e21b532050217466a050cf103768022b7b4775", (Func<Task>)async delegate
{
});
__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_UrlResolutionTagHelper = ((RazorPageBase)this).CreateTagHelper<UrlResolutionTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_UrlResolutionTagHelper);
__tagHelperExecutionContext.AddHtmlAttribute(__tagHelperAttribute_0);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n <link rel=\"stylesheet\" href=\"css/bootstrap/bootstrap.min.css\" />\r\n <link href=\"css/site.css\" rel=\"stylesheet\" />\r\n");
});
__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_HeadTagHelper = ((RazorPageBase)this).CreateTagHelper<HeadTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_HeadTagHelper);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("body", (TagMode)0, "c4eef6e21b532050217466a050cf103768022b7b6703", (Func<Task>)async delegate
{
((RazorPageBase)this).WriteLiteral("\r\n <app>\r\n ");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("component", (TagMode)1, "c4eef6e21b532050217466a050cf103768022b7b6982", (Func<Task>)async delegate
{
});
__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper = ((RazorPageBase)this).CreateTagHelper<ComponentTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper);
__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper.set_ComponentType(typeof(App));
__tagHelperExecutionContext.AddTagHelperAttribute("type", (object)__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper.get_ComponentType(), (HtmlAttributeValueStyle)0);
__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper.set_RenderMode((RenderMode)3);
__tagHelperExecutionContext.AddTagHelperAttribute("render-mode", (object)__Microsoft_AspNetCore_Mvc_TagHelpers_ComponentTagHelper.get_RenderMode(), (HtmlAttributeValueStyle)0);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n </app>\r\n\r\n <div id=\"blazor-error-ui\">\r\n ");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("environment", (TagMode)0, "c4eef6e21b532050217466a050cf103768022b7b9004", (Func<Task>)async delegate
{
((RazorPageBase)this).WriteLiteral("\r\n An error has occurred. This application may no longer respond until reloaded.\r\n ");
});
__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper = ((RazorPageBase)this).CreateTagHelper<EnvironmentTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper);
__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper.set_Include((string)__tagHelperAttribute_1.get_Value());
__tagHelperExecutionContext.AddTagHelperAttribute(__tagHelperAttribute_1);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n ");
__tagHelperExecutionContext = __tagHelperScopeManager.Begin("environment", (TagMode)0, "c4eef6e21b532050217466a050cf103768022b7b10361", (Func<Task>)async delegate
{
((RazorPageBase)this).WriteLiteral("\r\n An unhandled exception has occurred. See browser dev tools for details.\r\n ");
});
__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper = ((RazorPageBase)this).CreateTagHelper<EnvironmentTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper);
__Microsoft_AspNetCore_Mvc_TagHelpers_EnvironmentTagHelper.set_Include((string)__tagHelperAttribute_2.get_Value());
__tagHelperExecutionContext.AddTagHelperAttribute(__tagHelperAttribute_2);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n <a");
((RazorPageBase)this).BeginWriteAttribute("href", " href=\"", 931, "\"", 938, 0);
((RazorPageBase)this).EndWriteAttribute();
((RazorPageBase)this).WriteLiteral(" class=\"reload\">Reload</a>\r\n <a class=\"dismiss\">\ud83d\uddd9</a>\r\n </div>\r\n\r\n <script src=\"_framework/blazor.server.js\"></script>\r\n");
});
__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_BodyTagHelper = ((RazorPageBase)this).CreateTagHelper<BodyTagHelper>();
__tagHelperExecutionContext.Add((ITagHelper)(object)__Microsoft_AspNetCore_Mvc_Razor_TagHelpers_BodyTagHelper);
await __tagHelperRunner.RunAsync(__tagHelperExecutionContext);
if (!__tagHelperExecutionContext.get_Output().get_IsContentModified())
{
await __tagHelperExecutionContext.SetOutputContentAsync();
}
((RazorPageBase)this).Write((object)__tagHelperExecutionContext.get_Output());
__tagHelperExecutionContext = __tagHelperScopeManager.End();
((RazorPageBase)this).WriteLiteral("\r\n</html>\r\n");
}
}
更多關於 Blazor 教學影片，可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。
當設計好 Blazor 專案之後，經過建置、編譯之後，原先的 .cshtml & .razor 會變成甚麼內容呢？原則上，不論剛剛提到的兩個類型檔案，都會變成 c# 的類別。