CSharp中Blazor初体验

Blazor 是一个由微软开发的开源 Web 框架，用于构建富客户端 Web 应用程序使用 C# 语言和 .NET 平台。Blazor 允许开发人员使用 C# 语言来编写前端 Web 应用程序，而不需要像传统的 JavaScript 框架（如 Angular、React 或 Vue.js）那样使用 JavaScript 或其他语言。

Blazor 提供两种模型来构建 Web 应用程序：

1. Blazor Server： 在 Blazor Server 模式下，应用程序的 UI 逻辑在服务器上运行，而 UI 的渲染结果通过 SignalR 实时通信协议发送到客户端。用户与应用程序交互时，会触发与服务器之间的信号传输，从而更新 UI。这种模式适合需要在服务器上处理敏感逻辑或需要维护连接的应用程序。

2. Blazor WebAssembly： 在 Blazor WebAssembly 模式下，应用程序完全在用户的 Web 浏览器中运行。C# 代码通过 WebAssembly 在浏览器中运行，使得应用程序可以独立于服务器运行。这种模式允许更高的性能和更快的加载速度，并允许构建完全脱机运行的 Web 应用程序。

Blazor 提供了一组丰富的组件和功能，包括数据绑定、组件化、路由、表单验证等。它与 .NET 生态系统紧密集成，开发人员可以利用 .NET Core/.NET 5+ 的所有功能和库来构建功能强大的 Web 应用程序。

Blazor 的特点包括：

• C# 和 Razor 语法： 使用熟悉的 C# 编写客户端代码，以及 Razor 语法来构建动态 Web 页面。
• 组件化开发： 使用组件化思想构建应用程序，使得代码重用性更高。
• 现代化的 Web 开发体验： 提供了现代化的前端开发体验，同时利用了 .NET 生态系统的优势。
• 跨平台兼容性： 支持跨各种现代 Web 浏览器的平台，不受特定操作系统的限制。

Blazor 已经吸引了许多开发人员的注意，并且在.NET开发者中获得了广泛的关注和使用。它为开发人员提供了一种新的方式来构建 Web 应用程序，使得使用 C# 可以轻松地编写客户端代码，同时充分利用了 .NET 平台的功能和性能优势。

1.Blazor的主要优势

使用 Blazor 的主要优势和原因有多个：

1. 统一的编程语言： 对于已经熟悉和喜爱使用 C# 编程语言的开发人员来说，Blazor 提供了一个机会，使他们能够在 Web 开发中继续使用这种语言，而不必转向学习 JavaScript 或其他前端语言。这种统一的编程语言减少了学习曲线，并促进了开发速度和效率。

2. 代码重用性： Blazor 支持组件化开发，使得开发人员能够构建可重用的组件。这些组件可以在应用程序的不同部分重复使用，从而提高了代码的可维护性和可扩展性。

3. .NET 生态系统： Blazor 与 .NET 平台紧密集成，可以利用.NET Core/.NET 5+ 的各种功能、库和工具。开发人员可以轻松地访问和使用 .NET 生态系统中丰富的资源，如 Entity Framework、ASP.NET Core、Azure 服务等，从而加速开发过程。

4. 减少前后端分离的复杂性： Blazor 可以在客户端使用 C# 与服务器进行通信，减少了传统前后端分离架构中的一些复杂性。Blazor Server 模式下的实时通信机制和 Blazor WebAssembly 模式下的单页应用模式，都可以减少开发人员在管理和维护应用程序状态时的工作量。

5. 性能优势： Blazor WebAssembly 提供了较高的性能，并能够在用户的浏览器中独立运行，减少了对服务器的依赖，提供了更快的加载速度和响应能力。

6. 跨平台兼容性： Blazor 支持跨多种现代 Web 浏览器和平台，这意味着可以针对不同的设备和用户进行开发，并确保应用程序在各种环境中的一致性和稳定性。

总的来说，Blazor 提供了一个用 C# 编写现代 Web 应用程序的新途径。它的优势在于减少了跨前后端的学习曲线、提高了代码的可维护性和可重用性，并允许开发人员利用.NET 平台的各种功能来构建高性能、现代化的 Web 应用程序。

2.创建一个新的项目

1. 创建一个项目

2. 选择Blazor项目
   

3. 输出Blazor基本信息

4. 打开项目
   

3.代码结构

已创建多个文件，以为你提供可运行的简单 Blazor 应用。

• Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。
• App.razor 为应用的根组件。
• Routes.razor 配置 Blazor 路由器。
• Components/Pages 目录包含应用的一些示例网页。
• BlazorApp.csproj 定义应用项目及其依赖项，且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。
• Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。

左侧导航目录

导航切换页面信息

数据点击页面信息

绑定数据

4.使用EChart

1. 引用EChart.JS
   

2. 安装Package

使用 NuGet： 如果您更喜欢使用 NuGet 进行安装，可以在 Blazor 项目中使用 Microsoft.JSInterop 和 Blazored.Toast（可选）库来调用 JavaScript 方法。

3. 创建页面和逻辑

• NavMenu.razor

<div class="top-row pl-4 navbar navbar-dark"><a class="navbar-brand" href="">WebAppForm</a><button class="navbar-toggler" @οnclick="ToggleNavMenu"><span class="navbar-toggler-icon"></span></button>
</div><div class="@NavMenuCssClass" @οnclick="ToggleNavMenu"><ul class="nav flex-column"><li class="nav-item px-3"><NavLink class="nav-link" href="" Match="NavLinkMatch.All"><span class="oi oi-home" aria-hidden="true"></span> Home</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="counter"><span class="oi oi-plus" aria-hidden="true"></span> Counter</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="fetchdata"><span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data</NavLink></li><li class="nav-item px-3"><NavLink class="nav-link" href="echarts"><span class="oi oi-list-rich" aria-hidden="true"></span> ECharts</NavLink></li></ul>
</div>@code {private bool collapseNavMenu = true;private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;private void ToggleNavMenu(){collapseNavMenu = !collapseNavMenu;}
}

• EChartsComponent.razor

@page "/echarts"<div id="echartsContainer" style="width: 600px; height: 400px;"></div>@code {[Inject]public IJSRuntime JSRuntime { get; set; }protected override async Task OnAfterRenderAsync(bool firstRender){if (firstRender){await JSRuntime.InvokeVoidAsync("initializeECharts");}}
}

• echartsInterop.js

window.initializeECharts = () => {// 使用 ECharts 初始化代码，例如创建图表等const chartDom = document.getElementById('echartsContainer');const myChart = echarts.init(chartDom);// ECharts 配置选项const option = {// 此处添加您的 ECharts 配置// 示例：创建一个简单的柱状图xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E', 'F']},yAxis: {type: 'value'},series: [{data: [10, 20, 15, 25, 18, 30],type: 'bar'}]};// 使用指定的配置项和数据显示图表myChart.setOption(option);
};

最终效果