asp.net Core blazor学习笔记

最近在研究学习blazor,为了加深记忆,手动记录一下,以下内容为个人理解记录,仅供参考:

Blazor开发学习

  • 一 分类
    • 1 Blazor Server 应用
    • 2 Blazor WebAssembly 应用
    • 3 Blazor Hybrid 应用和 .NET MAUI
  • 二 基础知识
    • 1 路由
    • 2 组件库的使用
      • 2.1 组件库修饰
      • 2.2 对组件进行分组
      • 2.3 组件继承
      • 2.4级联参数的使用
      • 2.5 新建blazor项目,自带的图标
      • 2.6 动态切换组件显示
      • 2.7 系统配置信息
      • 2.7 内置组件使用
      • 2.8 弹出框组件使用
      • 2.9 支持的 EventArgs 显示在下表中
      • 2.10 延时控制组件
    • 3 注意
      • 3.1 设置打开的第一个界面
      • 3.2 IIS部署
    • 4 涨知识

一 分类

1 Blazor Server 应用

2 Blazor WebAssembly 应用

速度略慢,使用AOT编译可以提供速度,相应的应用会变大。

3 Blazor Hybrid 应用和 .NET MAUI

WPF开发,Windows桌面应用开发及移动设备应用开发。

二 基础知识

1 路由

@page “路由名称(小写字母、横线)”,可以写多个路由

2 组件库的使用

2.1 组件库修饰

若要对组件添加css样式,可创建“组件.razor.css”

2.2 对组件进行分组

使用组件时,添加上分组文件夹即可。

2.3 组件继承

关键字:@inherits 可使用继承组件的属性和方法

2.4级联参数的使用

使用CascadingValue向子组件传递数据,多个级联参数,需要Name属性相关联

//父组件
<CascadingValue Value="@isShowTips" Name="isShowTips"><CascadingValue Value="@tipPosition" Name="tipPosition"><KpComponents.BaseComponents.DlgTips DlgClass="tip-near" TrangleClass="tip-trangle-top" Content="数据归属机构:当前账户所属机构在为哪个机构工作,最终数据归当前机构所有" /></CascadingValue>
</CascadingValue>@code{private bool isShowTips = false;  //是否显示提示框private string tipPosition;
}//子组件/// <summary>/// 是否进行显示/// </summary>[CascadingParameter(Name= "isShowTips")]public bool isShowTips { get; set; }/// <summary>/// 组件位置信息/// </summary>[CascadingParameter(Name= "tipPosition")]public string tipPosition { get; set; }

2.5 新建blazor项目,自带的图标

请添加图片描述
请添加图片描述

2.6 动态切换组件显示

<DynamicComponent Type="组件的命名空间" />

2.7 系统配置信息

系统配置信息在:wwwroot/appsettings.json
使用方式:

//JSON文件
{"h1FontSize": "50px"
}
//组件使用
@page "/configuration-example"
@using Microsoft.Extensions.Configuration
@inject IConfiguration Configuration   //将 IConfiguration 实例注入到组件中来访问配置数据<h1 style="font-size:@Configuration["h1FontSize"]">Configuration example
</h1>

2.7 内置组件使用

PageTitle 用以设置导航栏显示的名称

2.8 弹出框组件使用

没有内置组件,可以使用第三方组件:
请添加图片描述
在Program.cs中进行组件注册:

builder.Services.AddBlazoredModal();

在wwwroot的index.html中引入相关js和css文件:

<link href="_content/Blazored.Modal/blazored-modal.css" rel="stylesheet" />
<script src="_content/Blazored.Modal/blazored.modal.js"></script>

根据需要引入命名空间

@using Blazored.Modal
@using Blazored.Modal.Services

使用方式

[Inject] 
protected IModalService ModalService { get; set; }/// <summary>
/// 方法参数:
///string title:弹出框标题
///ModalParameters parameters:组件参数Dictionary<string, object>
///ModalOptions options:可以控制位置、弹出方式等信息
/// </summary>
ModalService.Show<组件>(方法参数);

2.9 支持的 EventArgs 显示在下表中

请添加图片描述
请添加图片描述

2.10 延时控制组件

	private async Task ShowTips(MouseEventArgs e)      //注意使用async  Task{tipPosition = $"top:{e.PageY + 5}px;left:{e.PageX-260}px;";isShowTips = true;await Task.Delay(3000);     //延时时间设置isShowTips = false;}

3 注意

3.1 设置打开的第一个界面

项目配置打开的首个Razor界面,需要在App.razor中进行配置:
请添加图片描述
注意打开的第一个Razor界面需要:

@inherits LayoutComponentBase

否则界面无法正常显示。

3.2 IIS部署

使用VS工具发布之后,生成的文件内容如下:
在这里插入图片描述
使用IIS无托管部署之后,需要安装:rewrite_amd64_zh-CN
https://www.iis.net/downloads/microsoft/url-rewrite#additionalDownloads

4 涨知识

<link rel="icon" href="images/Mylogo.ico" />  //用以设置标题栏图标

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

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

相关文章

算法的学习笔记—二叉树中和为某一值的路径

&#x1f600;前言 在二叉树中寻找和为某一特定值的路径问题是一个经典的面试题&#xff0c;考察了对二叉树的遍历能力以及递归和回溯算法的理解和应用。本文将详细解析这一问题&#xff0c;并提供一个Java实现。 &#x1f3e0;个人主页&#xff1a;尘觉主页 文章目录 &#x1…

使用Node-RED实现和部署物联网入侵检测的机器学习管道

整理自 《Implementing and Deploying an ML Pipeline for IoT Intrusion Detection with Node-RED》&#xff0c;由 Yimin Zhang 等人撰写&#xff0c;发表于 2023 年 CPS-IoT Week Workshops。以下是根据提供的 PDF 内容整理的论文的详细主要内容&#xff1a; 摘要 (Abstra…

0基础深度学习项目13:基于TensorFolw实现天气识别

&#x1f368; 本文为&#x1f517;365天深度学习训练营 中的学习记录博客&#x1f356; 原作者&#xff1a;K同学啊 目录 一、创建环境二、前期准备2.1 设置GPU2.2 导入数据2.3 数据预处理2.3.1 加载数据2.3.2 查看图像的标签 2.4 数据可视化 三、构建简单的CNN网络&#xff0…

KT来袭,打造沉浸式体验的聚合性web3应用平台

随着步入 2024&#xff0c;漫长的区块链熊市即将接近尾声。纵观产业发展&#xff0c;逆流而上往往会是彰显品牌市场影响力和技术实力的最佳证明。在这次周期中&#xff0c;一个名为KT的web3.0聚合平台吸引了市场关注&#xff0c;无论在市场层面还是技术层面&#xff0c;都广泛赢…

Leetcode 104. 二叉树的最大深度 C++实现

Leetcode 104. 二叉树的最大深度 问题&#xff1a;给定一个二叉树root&#xff0c;返回其最大深度。 二叉树的最大深度是指从根节点到最远叶子节点的最长路径上的节点数。 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* …

培训第三十五天(容器的基础命令使用)

1、创建一个容器并同时执行echo命令 # 快速启动一个容器执行特定的一次性命令并查看输出结果&#xff0c;输出结果后容器直接退出[rootdocker ~]# docker run -it --namea0 centos:latest echo "abc"abc[rootdocker ~]# docker psCONTAINER ID IMAGE COMMAND …

游戏app激励视频广告预加载位置,最大化广告收益

最近收到很多游戏类App开发者咨询激励视频广告&#xff0c;在帮助开发者分析产品的时候&#xff0c;特别是一些初级开发者的App产品&#xff0c;发现用户进入这些App&#xff0c;或者打开某个功能时就弹出激励视频广告&#xff0c;这样是违规的&#xff0c;并且用户看完广告也是…

使用gitee存储项目

gitee地址&#xff1a;Gitee - 基于 Git 的代码托管和研发协作平台 创建gitee远程仓库 将远程仓库内容拉取到本地仓库 复制下面这个地址 通过小乌龟便捷推送拉取代码&#xff1a;https://blog.csdn.net/m0_65520060/article/details/140091437

数字图像处理【15】特征检测——SIFT特征检测

一、引入SIFT算法 上一篇文章我们重温学习了Harris角点检测算法的基本原理&#xff0c;但在实际生产使用Harris检测角点的时候&#xff0c;会发现一个问题&#xff0c;就是用于检测的输入图像的尺寸大小会直接影响到Harris的检测结果。这是为什么呢&#xff1f;主要是Harris角…

2024最新50道NLP和人工智能领域面试题+答案(中文+英文双版本)

编者按&#xff1a;分享一个很硬核的免费人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c; 可以当故事来看&#xff0c;轻松学习。 中文版本 自然语言处理 (NLP)已成为语言学、人工智能和计算机科学交叉领域的变革性领域。随着文本数据量的不断增加&…

内网横向移动常用方法

横向移动 #横向移动含义 横向移动是以已经被攻陷的系统为跳板&#xff0c;通过收集跳板机的信息&#xff08;文档&#xff0c;存储的凭证&#xff0c;ipc连接记录等等信息&#xff09;来访问其他域内主机。#常见横向手段 1&#xff0c;通过相同的用户名密码批量ipc连接其他域内…

【学习笔记】Day 22

一、进度概述 1、机器学习常识23-24&#xff0c;以及相关代码复现 2、python 补完计划&#xff08;详见 python 专题&#xff09; 二、详情 23、U-Net 从宏观结构上来讲&#xff08;以下摘自常识23&#xff09;&#xff1a; U-Net 就是 U 形状的网络, 前半部分 (左边…

三星计划今年HBM4设计,2025年初开始样品测试

三星计划今年晚些时候完成首款HBM4内存设备的设计定稿&#xff0c;2025年初开始样品测试 根据nN Elec援引行业消息人士的报道&#xff0c;三星计划在今年晚些时候完成首款HBM4内存设备的设计定稿&#xff0c;并预计将于2025年初开始样品测试。该公司预计将采用其最新一代10纳米…

详细分析 el-progress的基本知识以及用法(附Demo)

目录 前言1. 基本知识2. Demo3. 实战 前言 由于实战项目中有所引用&#xff0c;对此记录基本的知识点&#xff0c;并且以Demo的形式呈现 1. 基本知识 el-progress 是 Element Plus UI 库中的一个进度条组件&#xff0c;用于显示任务的完成情况 可以帮助用户了解某个操作或任…

[数据集][目标检测]工程机械车辆检测数据集VOC+YOLO格式3189张10类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;3189 标注数量(xml文件个数)&#xff1a;3189 标注数量(txt文件个数)&#xff1a;3189 标注…

密码生成器(HTML+CSS+JavaScript)

&#x1f30f;个人博客主页&#xff1a;心.c ​ 前言&#xff1a;前两天写了密码生成器&#xff0c;现在跟大家分享一下&#xff0c;大家如果想使用随便拿&#xff0c;如果哪里有问题还请大佬们给我指出&#xff0c;感谢支持 &#x1f525;&#x1f525;&#x1f525;专题文章&…

Vue3集成高德离线地图实践

1. 离线地图效果预览 2. 地图下载器下载离线地图 根据需要选择地图&#xff0c;我这边选择高德地图&#xff0c;层级选择0-15级别即可&#xff0c;进行下载 3. 放到nginx内网服务器 注意配置允许跨域 4. Vue3核心代码 // main.js // 初始化vue-amap initAMapApiLoader({o…

Android自定义简单TextView

自定义属性 <declare-styleable name"TextView"><!--name 属性名称format 格式&#xff1a;string 文字 color颜色dimension 宽高 字体大小 integer数字reference 资源引用(drawable)--><attr name"YiRanText" format"string"/&…

torchvision中的数据集使用

1.数据集&#xff1a; 自定义数据集transforms中的类 如何将数据集和transforms结合在一起&#xff1f; 以CIFAR10为列 2.CIFAR10数据集的下载与导入 import torchvisiontrain_settorchvision.datasets.CIFAR10(root"./dataset",trainTrue,downloadTrue) test_set…

判别分析2|Bayes判别分析|Fisher判别分析|软件求解

Bayes判别分析 引入先验信息 距离判别只要求知道总体的数字特征&#xff0c;不涉及总体的分布函数 当均值和协方差未知时&#xff0c;就用样本的均值和协方差矩阵做估计值。距离判别方法简单实用&#xff0c;但没有考虑到每个总体出现的机会大小&#xff0c;即先验概率&#…