2019年12月20日 星期五

在 ASP.NET Core Blazor 專案編譯後的 .cshtml & .razor 變成甚麼呢?

在 ASP.NET Core Blazor 專案編譯後的 .cshtml & .razor 變成甚麼呢?

更多關於 Blazor 教學影片,可以參考 Blazor 教學影片播放清單 或者 Blazor 快速體驗教學影片撥放清單。也歡迎訂閱本 .NET / Blazor / Xamarin.Forms 影片頻道 。


當設計好 Blazor 專案之後,經過建置、編譯之後,原先的 .cshtml & .razor 會變成甚麼內容呢?原則上,不論剛剛提到的兩個類型檔案,都會變成 c# 的類別。
現在,可以建立一個伺服器端的 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");
    }
}



沒有留言:

張貼留言