营销型网站建设首选,网站开发的技术要求,在线做c 题的网站,龙岗外贸网站建设公司价格Blazor 是一个由微软开发的开源 Web 框架#xff0c;用于构建富客户端 Web 应用程序使用 C# 语言和 .NET 平台。Blazor 允许开发人员使用 C# 语言来编写前端 Web 应用程序#xff0c;而不需要像传统的 JavaScript 框架#xff08;如 Angular、React 或 Vue.js#xff09;那…Blazor 是一个由微软开发的开源 Web 框架用于构建富客户端 Web 应用程序使用 C# 语言和 .NET 平台。Blazor 允许开发人员使用 C# 语言来编写前端 Web 应用程序而不需要像传统的 JavaScript 框架如 Angular、React 或 Vue.js那样使用 JavaScript 或其他语言。
Blazor 提供两种模型来构建 Web 应用程序 Blazor Server 在 Blazor Server 模式下应用程序的 UI 逻辑在服务器上运行而 UI 的渲染结果通过 SignalR 实时通信协议发送到客户端。用户与应用程序交互时会触发与服务器之间的信号传输从而更新 UI。这种模式适合需要在服务器上处理敏感逻辑或需要维护连接的应用程序。 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 的主要优势和原因有多个 统一的编程语言 对于已经熟悉和喜爱使用 C# 编程语言的开发人员来说Blazor 提供了一个机会使他们能够在 Web 开发中继续使用这种语言而不必转向学习 JavaScript 或其他前端语言。这种统一的编程语言减少了学习曲线并促进了开发速度和效率。 代码重用性 Blazor 支持组件化开发使得开发人员能够构建可重用的组件。这些组件可以在应用程序的不同部分重复使用从而提高了代码的可维护性和可扩展性。 .NET 生态系统 Blazor 与 .NET 平台紧密集成可以利用.NET Core/.NET 5 的各种功能、库和工具。开发人员可以轻松地访问和使用 .NET 生态系统中丰富的资源如 Entity Framework、ASP.NET Core、Azure 服务等从而加速开发过程。 减少前后端分离的复杂性 Blazor 可以在客户端使用 C# 与服务器进行通信减少了传统前后端分离架构中的一些复杂性。Blazor Server 模式下的实时通信机制和 Blazor WebAssembly 模式下的单页应用模式都可以减少开发人员在管理和维护应用程序状态时的工作量。 性能优势 Blazor WebAssembly 提供了较高的性能并能够在用户的浏览器中独立运行减少了对服务器的依赖提供了更快的加载速度和响应能力。 跨平台兼容性 Blazor 支持跨多种现代 Web 浏览器和平台这意味着可以针对不同的设备和用户进行开发并确保应用程序在各种环境中的一致性和稳定性。
总的来说Blazor 提供了一个用 C# 编写现代 Web 应用程序的新途径。它的优势在于减少了跨前后端的学习曲线、提高了代码的可维护性和可重用性并允许开发人员利用.NET 平台的各种功能来构建高性能、现代化的 Web 应用程序。
2.创建一个新的项目
创建一个项目 选择Blazor项目 输出Blazor基本信息 打开项目
3.代码结构 已创建多个文件以为你提供可运行的简单 Blazor 应用。
Program.cs 是启动服务器以及在其中配置应用服务和中间件的应用的入口点。App.razor 为应用的根组件。Routes.razor 配置 Blazor 路由器。Components/Pages 目录包含应用的一些示例网页。BlazorApp.csproj 定义应用项目及其依赖项且可以通过双击解决方案资源管理器中的 BlazorApp 项目节点进行查看。Properties 目录中的 launchSettings.json 文件为本地开发环境定义不同的配置文件设置。创建项目时会自动分配端口号并将其保存在此文件上。 左侧导航目录 导航切换页面信息 数据点击页面信息 绑定数据 4.使用EChart 引用EChart.JS 安装Package
使用 NuGet 如果您更喜欢使用 NuGet 进行安装可以在 Blazor 项目中使用 Microsoft.JSInterop 和 Blazored.Toast可选库来调用 JavaScript 方法。
创建页面和逻辑 NavMenu.razor
div classtop-row pl-4 navbar navbar-darka classnavbar-brand hrefWebAppForm/abutton classnavbar-toggler οnclickToggleNavMenuspan classnavbar-toggler-icon/span/button
/divdiv classNavMenuCssClass οnclickToggleNavMenuul classnav flex-columnli classnav-item px-3NavLink classnav-link href MatchNavLinkMatch.Allspan classoi oi-home aria-hiddentrue/span Home/NavLink/lili classnav-item px-3NavLink classnav-link hrefcounterspan classoi oi-plus aria-hiddentrue/span Counter/NavLink/lili classnav-item px-3NavLink classnav-link hreffetchdataspan classoi oi-list-rich aria-hiddentrue/span Fetch data/NavLink/lili classnav-item px-3NavLink classnav-link hrefechartsspan classoi oi-list-rich aria-hiddentrue/span ECharts/NavLink/li/ul
/divcode {private bool collapseNavMenu true;private string NavMenuCssClass collapseNavMenu ? collapse : null;private void ToggleNavMenu(){collapseNavMenu !collapseNavMenu;}
}
EChartsComponent.razor
page /echartsdiv idechartsContainer stylewidth: 600px; height: 400px;/divcode {[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);
};
最终效果
