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。
以一组稳定、功能丰富且易用的通用语言、框架和工具为基础来进行生成。

组件

BlazorBlazor 中的组件是指 UI 元素，例如页面、对话框或数据输入窗体。

组件是内置到 .NET 程序集的 .NET 类，用来：

定义灵活的 UI 呈现逻辑。
处理用户事件。
可以嵌套和重用。
http://www.zyiz.net/tutorial/detail-4594.html)或 NuGet 包共享和分发。

与围绕请求/响应模型生成的 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.");
    }
}

OnYes 是由按钮的 onclick 事件触发的 C# 方法。

BlazorHTML 元素指定组件，并且标记的特性将值传递给组件的属性。

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 ) 时，将呈现该对话框：

Asp.netCore3.1 Blazor入门

如果在应用中使用此组件，Visual Studio 和 Visual Studio Code 中的 IntelliSense 可加快使用语法和参数补全的开发。

组件呈现为浏览器文档对象模型 (DOM) 的内存中表现形式，称为“呈现树” ，用于以灵活高效的方式更新 UI。