CSharp中Blazor初体验

news2024/11/15 8:34:11

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. 创建一个项目

在这里插入图片描述

  1. 选择Blazor项目
    在这里插入图片描述

  2. 输出Blazor基本信息

在这里插入图片描述

  1. 打开项目
    在这里插入图片描述

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 方法。
在这里插入图片描述

  1. 创建页面和逻辑

在这里插入图片描述

  • 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);
};

最终效果

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1324856.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

【SpringBoot快速入门】(1)SpringBoot的开发步骤、工程构建方法以及工程的快速启动详细讲解

【SpringBoot快速入门】(1)SpringBoot的开发步骤、工程构建方法以及工程的快速启动详细讲解

目录 SpringBoot简介1 SpringBoot快速入门1.1 开发步骤1.1.1 创建新模块1.1.2 创建 Controller1.1.3 启动服务器1.1.4 进行测试 2 对比3 官网构建工程3.1 进入SpringBoot官网3.2 选择依赖3.3 生成工程 4 SpringBoot工程快速启动4.1 问题导入4.2 打包4.3 启动 之前我们已经学习的…
阅读更多...
鸿蒙原生应用再添新丁！喜马拉雅入局鸿蒙

鸿蒙原生应用再添新丁！喜马拉雅入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;喜马拉雅入局鸿蒙 来自 HarmonyOS 微博12月20日消息&#xff0c; #喜马拉雅正式完成鸿蒙原生应用版本适配#&#xff0c;作为音频业巨头的喜马拉雅 &#xff0c;将基于#HarmonyOS NEXT#创造更丰富、更智慧的全场景“声音宇宙”&#xff01;#鸿…
阅读更多...
校园导游系统-Java实现

校园导游系统-Java实现

一. 题目 设计一个校园导游系统。设计学校的校园平面图&#xff0c;选取若干个具有代表性的景点抽象成一个无向带权图&#xff0c;以图中顶点表示校内各景点&#xff0c;边上的权值表示两景点之间的距离。存放景点代号、名称、简介等信息供用户查询。为来访客人提供图中任意景…
阅读更多...
python多线程中：如何关闭线程？

python多线程中：如何关闭线程？

嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! python更多源码/资料/解答/教程等 点击此处跳转文末名片免费获取 使用 threading.Event 对象关闭子线程 Event 机制工作原理&#xff1a; Event 是线程间通信的一种方式。其作用相当于1个全局flag&#xff0c;主线程通过控制 e…
阅读更多...
基于Java版本与鸿鹄企业电子招投标系统的二次开发实践-鸿鹄企业电子招投标系统源代码+支持二开+鸿鹄电子招投标系统

基于Java版本与鸿鹄企业电子招投标系统的二次开发实践-鸿鹄企业电子招投标系统源代码+支持二开+鸿鹄电子招投标系统

随着市场竞争的加剧和企业规模的扩大&#xff0c;招采管理逐渐成为企业核心竞争力的重要组成部分。为了提高招采工作的效率和质量&#xff0c;我们提出了一种基于电子化平台的解决方案。该方案旨在通过电子化招投标&#xff0c;使得招标采购的质量更高、速度更快&#xff0c;同…
阅读更多...
JAVA线上事故：递归导致的OOM

JAVA线上事故：递归导致的OOM

最近因为人员离职&#xff0c;接手一个项目&#xff0c;是xxljob的客户端&#xff0c;部署在k8s上&#xff0c;在排查线上工单时&#xff0c;发现了一个问题&#xff1a; 在管理界面上&#xff0c;我惊讶的发现&#xff0c;三个月的时间&#xff0c;2个Pod&#xff0c;每个都重…
阅读更多...
ClickHouse中的CPU调度

ClickHouse中的CPU调度

本文字数&#xff1a;14267&#xff1b;估计阅读时间&#xff1a;36 分钟 作者&#xff1a;Maksim Kita 审校&#xff1a;庄晓东&#xff08;魏庄&#xff09; 本文在公众号【ClickHouseInc】首发 概述 在这篇文章中&#xff0c;我将描述向量化的工作原理&#xff0c;什么是CP…
阅读更多...
ASP.NET MVC权限管理系实战之一验证码功能实现

ASP.NET MVC权限管理系实战之一验证码功能实现

1&#xff0c;权限的管理系统&#xff1a;开发项目必备的一个的功能&#xff1b;该项目使用 ASP.NET MVC5 SqlServer EF6 IOC容器 BoostStrap 2&#xff0c;登录界面验证码功能实现&#xff0c;整体效果如下&#xff1b; 3&#xff0c;接下来就是代码部分实现&#xff0c;前端…
阅读更多...
C#使用HTTP方式对接WebService

C#使用HTTP方式对接WebService

C#使用HTTP方式对接WebService C#对接WebService的几种方式 1.直接引用服务 添加服务 添加成功后, 会显示服务详细 调用服务 使用HTTPPost调用WebService option.RequestDataStr GetHttpRequestXml(strXmlBody); // 创建一个 HttpClient 对象 using (HttpClient client …
阅读更多...
vba中字典的应用实例

vba中字典的应用实例

vba中熟练使用字典可以帮我们解决很多问题&#xff0c;以下为字典的应用方法及案例&#xff1a; Sub dictionary() Dim d As New dictionary 定义字典 Dim mykey As Variant Dim myitems d.Add "1100000", "身份证" 字典录入key关键字和item条目 d.Add &q…
阅读更多...
数字化技术助力英语习得 iEnglish成智慧化学习新选择

数字化技术助力英语习得 iEnglish成智慧化学习新选择

日前,美剧《老友记》中钱德勒的扮演者马修派瑞去世的消息引发不少人的回忆杀。《老友记》官方发文悼念马修派瑞:“对于马修派瑞去世的消息,我们深感悲痛,他是给我们所有人的真正礼物,我们的心和他的家人、爱人、所有的粉丝在一起。” 作为不少国人刷剧学习英语的首选,《老友记…
阅读更多...
排序算法——快排

排序算法——快排

快速排序算法最早是由图灵奖获得者Tony Hoare设计出来的,他在形式化方法理论以 及ALGOL.60编程语言的发明中都有卓越的贡献,是20世纪最伟大的计算机科学家之—。 而这快速排序算法只是他众多贡献中的—个小发明而已。 快速排序&#xff08;Quick Sort&#xff09;的基本算法思…
阅读更多...
1_js基本简介数据类型变量的使用

1_js基本简介数据类型变量的使用

1. 编程语言简介 1.1 计算机编程语言 计算机编程语言是程序设计的最重要的工具&#xff0c;它是指计算机能够接受和处理的、具有一定语法规则的语言。从计算机诞生&#xff0c;计算机语言经历了机器语言、汇编语言和高级语言几个阶段。 高级语言&#xff1a;JavaScript&#x…
阅读更多...
vue打包内存问题解决办法＜--- Last few GCs ---＞＜--- JS stacktrace ---＞

vue打包内存问题解决办法＜--- Last few GCs ---＞＜--- JS stacktrace ---＞

**<— Last few GCs —> [18484:0000026763669610] 106760 ms: Mark-sweep 4016.0 <— JS stacktrace —> FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory** 解决办法&#xff1a; set NODE_OPTION…
阅读更多...
PaddleOCR Docker 容器快捷调用，快捷调用OCR API

PaddleOCR Docker 容器快捷调用，快捷调用OCR API

文章目录 搞环境命令行测试Python调用测试转fastapi服务打包成镜像服务快速启动paddleOCR paddleOCR迎来大更新&#xff0c;搞一把新的api接口&#xff0c;直接用起来。 搞环境 搞容器&#xff1a; FROM nvidia/cuda:11.8.0-cudnn8-devel-ubuntu22.04 ENV DEBIAN_FRONTENDno…
阅读更多...
CUDA 学习记录2

CUDA 学习记录2

1.是否启用一级缓存有什么影响&#xff1a; 启用一级缓存&#xff08;缓存加载操作经过一级缓存&#xff09;&#xff1a;一次内存十五操作以128字节的粒度进行。 不启用一级缓存&#xff08;没有缓存的加载不经过一级缓存&#xff09;&#xff1a;在内存段的粒度上&#xff…
阅读更多...
条款6：若不想使用编译器自动生成的函数，就该明确拒绝

条款6：若不想使用编译器自动生成的函数，就该明确拒绝

有些场景我们不需要编译器默认实现的构造函数&#xff0c;拷贝构造函数&#xff0c;赋值函数&#xff0c;这时候我们应该明确的告诉编译器&#xff0c;我们不需要&#xff0c;一个可行的方法是将拷贝构造函数和赋值函数声明为private。 class HomeForSale { ... }; HomeForSal…
阅读更多...
故障排查：shell脚本输出乱码

故障排查：shell脚本输出乱码

博客主页&#xff1a;https://tomcat.blog.csdn.net 博主昵称&#xff1a;农民工老王 主要领域&#xff1a;Java、Linux、K8S 期待大家的关注&#x1f496;点赞&#x1f44d;收藏⭐留言&#x1f4ac; 目录 故障详情故障原因解决方法iconv命令介绍 故障详情 最近的工作中遇到一…
阅读更多...
Python Opencv实践 - 手势音量控制

Python Opencv实践 - 手势音量控制

本文基于前面的手部跟踪功能做一个手势音量控制功能&#xff0c;代码用到了前面手部跟踪封装的HandDetector.这篇文章在这里&#xff1a; Python Opencv实践 - 手部跟踪-CSDN博客文章浏览阅读626次&#xff0c;点赞11次&#xff0c;收藏7次。使用mediapipe库做手部的实时跟踪&…
阅读更多...
Linux静态ip

Linux静态ip

Linux静态ip Ⅰ、修改静态ip Ⅰ、修改静态ip 修改静态ip必须是root用户 su root //切换root用户 ip a //查看修改前的动态ipvi /etc/sysconfig/network-scripts/ifcfg-ens33 //打开网卡配置文件&#xff0c;修改一处&#xff0c;新增四处 BOOTPROTO&quo…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023