ASP.NET Core 簡介 BlazorIntroduction to ASP.NET Core Blazor

作者:Daniel RothLuke LathamBy Daniel Roth and Luke Latham

歡迎使用 Blazor !Welcome to Blazor!

Blazor 是使用 .net建立互動式用戶端 web UI 的架構:Blazor is a framework for building interactive client-side web UI with .NET:

  • 使用 c # 而非 JavaScript來建立豐富的互動式 ui。Create rich interactive UIs using C# instead of JavaScript.
  • 共用以 .NET 撰寫的伺服器端與用戶端應用程式邏輯。Share server-side and client-side app logic written in .NET.
  • 將 UI 轉譯為 HTML 和 CSS 以支援寬瀏覽器,包括行動裝置瀏覽器。Render the UI as HTML and CSS for wide browser support, including mobile browsers.
  • 與新式裝載平臺(例如 Docker)整合。Integrate with modern hosting platforms, such as Docker.

使用 .NET 進行用戶端網頁程式開發可提供下列優點:Using .NET for client-side web development offers the following advantages:

  • 以 C# 撰寫而不是 JavaScript。Write code in C# instead of JavaScript.
  • 利用 .net 程式庫的現有 .net 生態系統。Leverage the existing .NET ecosystem of .NET libraries.
  • 跨伺服器和用戶端共用應用程式邏輯。Share app logic across server and client.
  • 從 .NET 的效能、可靠性和安全性中獲益。Benefit from .NET's performance, reliability, and security.
  • 利用 Windows、Linux 和 macOS 上的 Visual Studio 保持生產力。Stay productive with Visual Studio on Windows, Linux, and macOS.
  • 以常用的語言、架構和工具建置,不僅穩定、功能豐富,而且容易使用。Build on a common set of languages, frameworks, and tools that are stable, feature-rich, and easy to use.

單元Components

Blazor 應用程式是以 元件 為基礎。Blazor apps are based on components . 中的元件 Blazor 是 UI 的元素,例如頁面、對話方塊或資料輸入表單。A component in Blazor is an element of UI, such as a page, dialog, or data entry form.

元件是內建在 .net 元件 中的 .Net c # 類別:Components are .NET C# classes built into .NET assemblies that:

  • 定義彈性 UI 轉譯邏輯。Define flexible UI rendering logic.
  • 處理使用者動作。Handle user events.
  • 可以為巢狀結構,且可重複使用。Can be nested and reused.
  • 可以共用和散發為 Razor 類別庫NuGet 套件Can be shared and distributed as Razor class libraries or NuGet packages.

元件類別通常是以 Razor 具有副檔名的標記頁面形式來撰寫 .razorThe component class is usually written in the form of a Razor markup page with a .razor file extension. 中的元件 Blazor 統稱為 Razor 元件Components in Blazor are formally referred to as Razor components . Razor 是一種語法,可將 HTML 標籤與設計為開發人員生產力的 c # 程式碼結合。Razor is a syntax for combining HTML markup with C# code designed for developer productivity. Razor 可讓您使用 Visual Studio 中的 IntelliSense 程式設計支援,在相同檔案中的 HTML 標籤與 c # 之間切換。Razor allows you to switch between HTML markup and C# in the same file with IntelliSense programming support in Visual Studio. Razor Pages 和 MVC 也會使用 Razor 。Razor Pages and MVC also use Razor. 不同 Razor 于建立在要求/回應模型周圍的頁面和 MVC,元件專門用於用戶端 UI 邏輯和組合。Unlike Razor Pages and MVC, which are built around a request/response model, components are used specifically for client-side UI logic and composition.

Blazor 使用自然 HTML 標籤進行 UI 組合。Blazor uses natural HTML tags for UI composition. 下列 Razor 標記示範的元件 (Dialog.razor) 會顯示對話方塊,並在使用者選取按鈕時處理事件:The following Razor markup demonstrates a component (Dialog.razor) that displays a dialog and processes an event when the user selects a button:

<div class="card" style="width:22rem">
    <div class="card-body">
        <h3 class="card-title">@Title</h3>
        <p class="card-text">@ChildContent</p>
        <button @onclick="OnYes">Yes!</button>
    </div>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public string Title { get; set; }

    private void OnYes()
    {
        Console.WriteLine("Write to the console in C#! 'Yes' button selected.");
    }
}

在上述範例中, OnYes 是按鈕事件所觸發的 c # 方法 onclickIn the preceding example, OnYes is a C# method triggered by the button's onclick event. 對話方塊的 text (ChildContent) 和 title (Title) 是由在其 UI 中使用此元件的下列元件所提供。The dialog's text (ChildContent) and title (Title) are provided by the following component that uses this component in its UI.

Dialog元件會使用 HTML 標籤,以內嵌在另一個元件中。The Dialog component is nested within another component using an HTML tag. 在下列範例中, Index 元件 (Pages/Index.razor) 使用上述 Dialog 元件。In the following example, the Index component (Pages/Index.razor) uses the preceding Dialog component. 標記的屬性會將 Title 標題的值傳遞給 Dialog 元件的 Title 屬性。The tag's Title attribute passes a value for the title to the Dialog component's Title property. Dialog元件的文字 (ChildContent) 是由元素的內容設定 <Dialog>The Dialog component's text (ChildContent) are set by the content of the <Dialog> element. Dialog 元件新增至 Index 元件時, Visual Studio 中的 IntelliSense 會使用語法和參數完成來加速開發。When the Dialog component is added to the Index component, IntelliSense in Visual Studio speeds development with syntax and parameter completion.

@page "/"

<h1>Hello, world!</h1>

<p>
    Welcome to your new app.
</p>

<Dialog Title="Learn More">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

當您 Index 在瀏覽器中存取元件時,就會呈現此對話方塊。The dialog is rendered when the Index component is accessed in a browser. 當使用者選取該按鈕時,瀏覽器的開發人員工具主控台會顯示方法所撰寫的訊息 OnYesWhen the button is selected by the user, the browser's developer tools console shows the message written by the OnYes method:

在瀏覽器中以內嵌在索引元件內的對話方塊元件。

元件會轉譯成瀏覽器 檔物件模型 (DOM) 的記憶體中標記法,稱為轉譯 樹狀結構 ,可用來以彈性且有效率的方式更新 UI。Components render into an in-memory representation of the browser's Document Object Model (DOM) called a render tree , which is used to update the UI in a flexible and efficient way.

Blazor WebAssembly

Blazor WebAssembly 是 單一頁面應用程式, (SPA) 架構 ,可使用 .net 建立互動式用戶端 web 應用程式。Blazor WebAssembly is a single-page app (SPA) framework for building interactive client-side web apps with .NET. Blazor WebAssembly 使用開放式 web 標準,而不使用外掛程式或將程式碼重新編譯成其他語言。Blazor WebAssembly uses open web standards without plugins or recompiling code into other languages. Blazor WebAssembly 適用于所有新式網頁瀏覽器,包括行動瀏覽器。Blazor WebAssembly works in all modern web browsers, including mobile browsers.

WebAssembly (縮寫) 可讓您在網頁瀏覽器內執行 .net 程式碼 wasmRunning .NET code inside web browsers is made possible by WebAssembly (abbreviated wasm). WebAssembly 是一種精簡的位元組程式碼格式,針對快速下載和最快執行速度而最佳化。WebAssembly is a compact bytecode format optimized for fast download and maximum execution speed. WebAssembly 是開放式的 Web 標準,在不含外掛程式的網頁瀏覽器中支援。WebAssembly is an open web standard and supported in web browsers without plugins.

WebAssembly 程式碼可以透過 JavaScript 存取瀏覽器的完整功能,稱為 javascript 互通性 ,通常會縮短為 JAVAscript interopJS interopWebAssembly code can access the full functionality of the browser via JavaScript, called JavaScript interoperability , often shortened to JavaScript interop or JS interop . 在瀏覽器中透過 WebAssembly 執行的 .NET 程式碼會在瀏覽器的 JavaScript 沙箱執行,且受沙箱所提供對用戶端電腦之惡意動作的保護。.NET code executed via WebAssembly in the browser runs in the browser's JavaScript sandbox with the protections that the sandbox provides against malicious actions on the client machine.

:::非 loc (Blazor WebAssembly) :::在瀏覽器中使用 WebAssembly 執行 .NET 程式碼。

當 Blazor WebAssembly 應用程式在瀏覽器中建立並執行時:When a Blazor WebAssembly app is built and run in a browser:

  • C # 程式碼檔案和檔案 Razor 會編譯成 .net 元件。C# code files and Razor files are compiled into .NET assemblies.
  • 元件和 .net 運行 時間會下載至瀏覽器。The assemblies and the .NET runtime are downloaded to the browser.
  • Blazor WebAssembly 啟動 .NET 執行時間,並設定執行時間以載入應用程式的元件。Blazor WebAssembly bootstraps the .NET runtime and configures the runtime to load the assemblies for the app. 執行時間會 Blazor WebAssembly 使用 JavaScript interop 來處理 DOM 操作和瀏覽器 API 呼叫。The Blazor WebAssembly runtime uses JavaScript interop to handle DOM manipulation and browser API calls.

發佈的應用程式大小 (它的「承載大小」 ) 是應用程式使用性的重要效能因素。The size of the published app, its payload size , is a critical performance factor for an app's useability. 大型應用程式需要相對較長的時間才能下載至瀏覽器,這點會對使用者體驗造成傷害。A large app takes a relatively long time to download to a browser, which diminishes the user experience. Blazor WebAssembly 優化承載大小以縮短下載時間:Blazor WebAssembly optimizes payload size to reduce download times:

  • 當應用程式由 中繼語言 (IL) 修剪器發行時,未使用的程式碼會從應用程式中移除。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Trimmer.
  • HTTP 回應會進行壓縮。HTTP responses are compressed.
  • .NET 執行階段與組件會在瀏覽器中進行快取。The .NET runtime and assemblies are cached in the browser.
  • 若應用程式是透過中繼語言 (IL) 連接器所發佈的,則會移除未使用的程式碼。Unused code is stripped out of the app when it's published by the Intermediate Language (IL) Linker.
  • HTTP 回應會進行壓縮。HTTP responses are compressed.
  • .NET 執行階段與組件會在瀏覽器中進行快取。The .NET runtime and assemblies are cached in the browser.

Blazor Server

Blazor 將元件轉譯邏輯與應用程式 UI 更新的套用方式分離出來。Blazor decouples component rendering logic from how UI updates are applied. Blazor Server 提供在 Razor ASP.NET Core 應用程式的伺服器上裝載元件的支援。Blazor Server provides support for hosting Razor components on the server in an ASP.NET Core app. UI 更新會透過連接來處理 SignalRUI updates are handled over a SignalR connection.

執行時間會處理:The runtime handles:

  • 從瀏覽器傳送 UI 事件至伺服器。Sending UI events from the browser to the server.
  • 將 UI 更新套用至已轉譯的元件,該元件會由伺服器傳回。Applying UI updates to the rendered component that are sent back by the server.

用 Blazor Server 來與瀏覽器通訊的連接也會用來處理 JavaScript interop 呼叫。The connection used by Blazor Server to communicate with the browser is also used to handle JavaScript interop calls.

:::非 loc (Blazor Server) :::在伺服器上執行 .NET 程式碼,並透過:::無 loc (SignalR) ::: connection 與用戶端上的檔物件模型互動

JavaScript InteropJavaScript interop

對於需要協力廠商 JavaScript 程式庫和瀏覽器 API 存取的應用程式,元件能夠和 JavaScript 交互操作。For apps that require third-party JavaScript libraries and access to browser APIs, components interoperate with JavaScript. 元件可以使用 JavaScript 可以使用的任何程式庫或 API。Components are capable of using any library or API that JavaScript is able to use. C # 程式碼可以 呼叫 javascript 程式碼,而 javascript 程式碼可以 呼叫 c #程式碼。C# code can call into JavaScript code, and JavaScript code can call into C# code.

程式碼共用和 .NET StandardCode sharing and .NET Standard

Blazor 會執行 .NET Standard,讓 Blazor 專案參考符合 .NET Standard 規格的程式庫。Blazor implements the .NET Standard, which enables Blazor projects to reference libraries that conform to .NET Standard specifications. .NET Standard 是所有 .NET 實作都具備的 .NET API 正式規格。.NET Standard is a formal specification of .NET APIs that are common across .NET implementations. .NET Standard 類別庫可以跨不同的 .NET 平臺共用,例如 Blazor .NET Framework、.Net Core、Xamarin、Mono 和 Unity。.NET Standard class libraries can be shared across different .NET platforms, such as Blazor, .NET Framework, .NET Core, Xamarin, Mono, and Unity.

網頁瀏覽器內不適用的 API (例如,存取檔案系統、開啟通訊端與執行緒) 均會擲回 PlatformNotSupportedExceptionAPIs that aren't applicable inside of a web browser (for example, accessing the file system, opening a socket, and threading) throw a PlatformNotSupportedException.

其他資源Additional resources