生成第一个 Blazor 应用

前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。

概述:Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架使用 C# 创建丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。

Blazor Server和Blazor WebAssembly

**Blazor Server:**Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。

运行时停留在服务器上并处理:

  • 执行应用的 C# 代码。
  • 将 UI 事件从浏览器发送到服务器。
  • 将 UI 更新应用于服务器发送回的已呈现的组件。

Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。

前言:博主文章仅用于学习、研究和交流目的,不足和错误之处在所难免,希望大家能够批评指出,博主核实后马上更改。

概述:Blazor 是一个使用 Blazor 生成交互式客户端 Web UI 的框架使用 C# 创建丰富的交互式 UI。共享使用 .NET 编写的服务器端和客户端应用逻辑。将 UI 呈现为 HTML 和 CSS,以支持众多浏览器,其中包括移动浏览器。

Blazor Server和Blazor WebAssembly

**Blazor Server:**Blazor Server在 ASP.NET Core 应用中支持在服务器上托管 Razor 组件。 可通过 SignalR 连接处理 UI 更新。

运行时停留在服务器上并处理:

  • 执行应用的 C# 代码。
  • 将 UI 事件从浏览器发送到服务器。
  • 将 UI 更新应用于服务器发送回的已呈现的组件。

Blazor Server用于与浏览器通信的连接还用于处理 JavaScript 互操作调用。

在这里插入图片描述

**Blazor WebAssembly:**Blazor WebAssembly 是单页应用 (SPA) 框架,用于使用 .NET 生成交互式客户端 Web 应用。

当 Blazor WebAssembly 应用生成并运行时:

  • C# 代码文件和 Razor 文件将被编译为 .NET 程序集。
  • 该程序集和 .NET 运行时将被下载到浏览器。
  • Blazor WebAssembly 启动 .NET 运行时,并配置运行时,以为应用加载程序集。 Blazor WebAssembly 运行时使用 JavaScript 互操作来处理 DOM 操作和浏览器 API 调用。

在这里插入图片描述

1.启动 Visual Studio 并选择“创建新项目”。

在这里插入图片描述

2.在“配置新项目”窗口中,输入 BlazorApp 作为项目名称,然后选择“下一步”。

在这里插入图片描述

3.在“其他信息”窗口中,如果尚未选择,则在“框架”下拉列表中选择“.NET 6.0 (标准期限支持)”,然后单击“继续”按钮。

在这里插入图片描述

4.项目结构

在这里插入图片描述

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

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

如果一切正常,请选择下面的 继续 按钮以转到下一步。

运行效果

首页

在这里插入图片描述

计数器

在这里插入图片描述

数据项

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

nvm安装教程(一篇文章所有问题全搞定,非常详细)

nvm 是什么? nvm 是一款 nodejs 版本管理工具,通过 nvm 可以简化我们切换 nodejs 版本的操作。 nvm 的安装流程 一、首先进入 nvm 的官网下载安装包 官网地址:http://nvm.uihtm.com 找到自己系统对应的版本进行下载,以下以 w…

SpringBoot集成-阿里云对象存储OSS

文章目录 阿里云 OSS 介绍准备工作SpringBoot 集成 OSS 阿里云 OSS 介绍 阿里云对象存储 OSS (Object Storage Service),是一款海量、安全、低成本、高可靠的云存储服务。使用 OSS,你可以通过网络随时存储和调用包括文本、图片、…

掌握Maven和SpringBoot的灵活性:定制化lib目录和依赖范围

前言 在开发基于Maven和SpringBoot的项目时,我们经常会使用第三方库来满足需求。然而,有时候我们需要更灵活地控制这些库的依赖范围和加载方式。本文将介绍如何使用Maven和SpringBoot实现定制化的lib目录和依赖范围。经过如下定制化后,打包执…

数据库实验:SQL的数据视图

目录 视图概述视图的概念视图的作用 实验目的实验内容实验要求实验过程 视图概述 视图是由数据库中的一个表或多个表导出的虚拟表,其作用是方便用户对数据的操作 视图的概念 视图是一个虚拟表,其内容由查询定义。同真实的表一样,视图包含一…

关于ROS的网络通讯方式TCP/UDP

一、TCP与UDP TCP/IP协议族为传输层指明了两个协议:TCP和UDP,它们都是作为应同程序和网络操作的中介物。 **TCP(Transmission Control Protocol)协议全称是传输控制协议,是一种面向连接的、可靠的、基于字节流的传输…

k8s:二进制搭建 Kubernetes v1.20

目录 1 操作系统初始化配置 2 部署 etcd 集群 2.1 准备签发证书环境 2.2 生成Etcd证书 3 部署 docker引擎 4 部署 Master 组件 5 部署 Worker Node 组件 k8s集群master01:192.168.30.105 kube-apiserver kube-controller-manager kube-scheduler etcd k8s集…

使用QEMU模拟启动uboot

uboot的相关知识,可以参考:uboot基本概念。 一、环境配置 WSL: ubutu20.04 模拟开发板:vexpress-a9 uboot版本:u-boot-2023.10 二、安装QEMU 2.1、安装sudo apt install qemu2.2、查看支持哪些开发板qemu-system-arm -M help结…

点亮户外空间:户外灯饰的选择与设计

在我们的日常生活中,户外空间变得越来越重要。庭院、露台和花园不再只是白天的领地,夜幕降临时,它们也成为了社交和放松的场所。要想让户外空间在夜间同样迷人,户外灯饰变得至关重要。本文将带您深入了解户外灯饰的选择与设计&…

ZKP Introduction of Nova (Yu Guo) 手写笔记

ZKP学习笔记 郭宇老师Nova课程手写笔记

〔001〕虚幻 UE5 发送 get、post 请求、读取 json 文件

✨ 目录 🎈 安装 varest 扩展🎈 开启 varest 扩展🎈 发送 get 请求🎈 发送 post 请求🎈 读取 json 文件🎈 安装 varest 扩展 打开 虚幻商城,搜索 varest 关键字进行检索, varest 是一个 api 调用插件,支持 http/https 请求,也支持 json 文件的读取,最关键是该…

STM32-HAL库08-TIM的输出比较模式(输出PWM的另一种方式)

STM32-HAL库08-TIM的输出比较模式(输出PWM的另一种方式) 一、所用材料: STM32F103C6T6最小系统板 STM32CUBEMX(HAL库软件) MDK5 示波器或者逻辑分析仪 二、所学内容: 通过定时器TIM的输出比较模式得到预…

阿里云OS系统Alibaba Cloud Linux 3系统的安全更新命令

给客户部署的服务,进入运维阶段,但是经常被客户监测到服务器漏洞,现在整理一下,服务器漏洞问题更新命令步骤。 服务器系统: 阿里云linux服务器:Alibaba Cloud Linux 3 漏洞类型和描述: #3214…