Asp.netCore3.1 Blazor入門


Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架:使用 C# 代替 JavaScript 來創建豐富的交互式 UI。共享使用 .NET 編寫的服務器端和客戶端應用邏輯。將 UI 呈現為 HTML 和 CSS,以支持眾多瀏覽器,其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發可提供以下優勢:

  • 使用 C# 代替 JavaScript 來編寫代碼。

  • 利用現有的 .NET 庫生態系統。

  • 在服務器和客戶端之間共享應用邏輯。

  • 受益於 .NET 的性能、可靠性和安全性。

  • 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。

  • 以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成。

Blazor 是一個使用 .NET 生成交互式客戶端 Web UI 的框架:

  • 使用 C# 代替 JavaScript 來創建豐富的交互式 UI。
  • 共享使用 .NET 編寫的服務器端和客戶端應用邏輯。
  • 將 UI 呈現為 HTML 和 CSS,以支持眾多瀏覽器,其中包括移動瀏覽器。

使用 .NET 進行客戶端 Web 開發可提供以下優勢:

  • 使用 C# 代替 JavaScript 來編寫代碼。
  • 利用現有的 .NET 庫生態系統。
  • 在服務器和客戶端之間共享應用邏輯。
  • 受益於 .NET 的性能、可靠性和安全性。
  • 始終高效支持 Windows、Linux 和 macOS 上的 Visual Studio。
  • 以一組穩定、功能豐富且易用的通用語言、框架和工具為基礎來進行生成。

組件

Blazor應用基於組件 。 Blazor 中的組件是指 UI 元素,例如頁面、對話框或數據輸入窗體。

組件是內置到 .NET 程序集的 .NET 類,用來:

組件類通常以 Razor 標記頁(文件擴展名為 .razor )的形式編寫。 Blazor 中的組件有時被稱為 Razor 組件 。 Razor 是用於將 HTML 標記與專為提高開發人員工作效率而設計的 C# 代碼結合在一起的語法。 借助 Razor,可以使用 IntelliSense 支持在同一文件中的 HTML 標記和 C# 之間切換。 Razor Pages 和 MVC 也使用 Razor。 與圍繞請求/響應模型生成的 Razor Pages 和 MVC 不同,組件專門用於處理客戶端 UI 邏輯和構成。

以下 Razor 標記演示組件 (Dialog.razor ),該組件可以嵌套在另一個組件中:

<div>
    <h1>@Title</h1>
 
    @ChildContent
 
    <button @onclick="OnYes">Yes!</button>
</div>
 
@code {
    [Parameter]
    public string Title { get; set; }
 
    [Parameter]
    public RenderFragment ChildContent { get; set; }
 
    private void OnYes()
    {
// www.zyiz.net原創         Console.WriteLine(
"Write to the console in C#! 'Yes' button was selected.");     } }

對話框的正文內容 (ChildContent) 和標題 (Title) 由在其 UI 中使用此組件的組件提供。 OnYes 是由按鈕的 onclick 事件觸發的 C# 方法。

Blazor 使用 UI 構成的自然 HTML 標記。 HTML 元素指定組件,並且標記的特性將值傳遞給組件的屬性。

在以下示例中,Index 組件使用 Dialog 組件。 ChildContent 和 Title 由 <Dialog> 元素的屬性和內容設置。

Index.razor:

@page "/"
 
<h1>Hello, world!</h1>
 
Welcome to your new app.
 
<Dialog Title="Blazor">
    Do you want to <i>learn more</i> about Blazor?
</Dialog>

在瀏覽器中訪問父級 (Index.razor ) 時,將呈現該對話框:

瀏覽器中呈現的對話框組件

如果在應用中使用此組件,Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用語法和參數補全的開發。

組件呈現為瀏覽器文檔對象模型 (DOM) 的內存中表現形式,稱為“呈現樹” ,用於以靈活高效的方式更新 UI。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM