Blazor简单教程(1.1):Razor基础语法

文章目录

  • 前言
  • 基本文件配置
    • 引入Layout组件
  • 语法介绍
    • @page
    • @code
    • Razor 语法
      • [ 显式表达和隐式表达](https://learn.microsoft.com/zh-cn/aspnet/core/mvc/views/razor?view=aspnetcore-7.0#explicit-razor-expressions)
    • 绑定
      • 简单绑定
      • 双向绑定
      • 带参数的函数绑定
    • 依赖注入

前言

Blazor最重要的是Razor组件和cshtml页面。两个最大的区别就是cshtml是完整的html,Razor是不完整的html

微软Razor 语法官方文档

我的Blazor基础语法个人总结

C# Blazor 学习笔记(12):css样式设置

C#小轮子:Visual Studio自动编译Sass文件

基本文件配置

在这里插入图片描述

  • Components:组件
  • Controller:控制器/API
  • Layout:布局
  • Models:实体对象
  • Pages:页面
  • Service:服务/数据库查询
  • Utils:通用工具

引入Layout组件

语法介绍

在这里插入图片描述

在这里插入图片描述

@page

路由路径:可以多路由

@page "/index"
//指向/index路径
<h1 class="title">Hello, world!</h1>

@code

  • @code,声明代码空间
    在这里插入图片描述

  • xxx.razor.cs 对应文件
    在这里插入图片描述
    在这里插入图片描述
    Tips:partial class即部分class,编译的时候会组合成一个完整的class

Razor 语法

显式表达和隐式表达

在这里插入图片描述

绑定

简单绑定

<h1>@Title</h1>
<button  @onclick="TitleBtn">按钮点击</button>
<h1>@RangeValue</h1>
@code{public string Title { get; set; } = "我是@Code Title字符串";/// <summary>/// 按钮事件/// </summary>public void TitleBtn(){Title = "我被函数改变了!";}
}

注意,这里的绑定是单向绑定。不是双向绑定,双向绑定需要用到@Bind语法

双向绑定


<button  @onclick="TitleBtn">按钮点击</button>
<input type="range" min="0" max="10" @bind="RangeValue"/>
<h1>@RangeValue</h1>
@code{public decimal RangeValue { get; set; } = 2;/// <summary>/// 按钮事件/// </summary>public void TitleBtn(){RangeValue++;}
}

带参数的函数绑定

Blazor 事件处理

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

解决方案

@οnclick=“@(e=>你的函数))”


<h1>@Title</h1>
<button @onclick="@(e=>TitleBtn2("函数2带参数按钮点击"))">带参数按钮点击</button>@code{public string Title { get; set; } = "我是@Code Title字符串";public void TitleBtn2(string str){Title = str;}
}

依赖注入

依赖注入有两种,我们这里统一使用cs的注入方式

        [Inject][NotNull]private NavigationManager navigationManager { get; set; }

在这里插入图片描述
Blazor的路由

使用

        public void LoginBtn(){Console.WriteLine("登录");navigationManager.NavigateTo("/index");}

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

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

相关文章

07 线程学习

一 qt线程角色 子线程完成与UI线程无关的工作,并且能够保持与UI线程通信 二 qt中线程 在QT中,对于 线程操作也是提供类(QThread)来进行封装,然后再学习该类的API接口 参数用途Header:#include qmake:QT += coreInherits:QObject //继承于QObject从官方文档可以看出,如果一…

CDH6.3.2搭建HIVE ON TEZ

参考 https://blog.csdn.net/ly8951677/article/details/124152987 ----配置hive运行引擎 在/etc/hive/conf/hive-site.xml中修改如下&#xff1a; hive.execution.engine mr–>tez hive.execution.engine 设为tez或者运行代码的时候&#xff1a; set hive.execution.eng…

Linux 路由三大件

对于 Linux 网络&#xff0c;好奇心强的同学一定思考过两个问题&#xff1a; 当我们发出一个包的时候&#xff0c;Linux 是如何决策该从哪个网卡&#xff08;假设有多个网卡&#xff09;、哪个下一跳发出这个包&#xff0c;用什么 IP 作为 source......当 Linux 收到一个包时&a…

pywinauto结合selenium实现文件上传

简介 PC端-Windows上的元素识别可用viewWizard工具 PC端-Windows上的元素操作可用pywinauto库 浏览器上网页的元素识别可用selenium 安装 pip installer pywinauto 使用须知 pywinauto官方文档 确定app的可访问技术 1、win32 API(backend“win32”) 一般是MFC、VB6、VCL…

小程序-uni-app:hbuildx uni-app 安装 uni-icons 及使用

一、官方文档找到uni-icons uni-app官网 二、下载插件 三、点击“打开HBuildX” 四、选择要安装的项目 五、勾选要安装的插件 六、安装后&#xff0c;项目插件目录 根目录uni_modules目录下增加uni-icons、uni-scss 七、引入组件&#xff0c;使用组件 <uni-icons type&qu…

【声波】声波在硼酸、硫酸镁 (MgSO4) 和纯水中的吸收研究(Matlab代码实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

POST请求负载form-data表单数据需要同步修改header的Content-type

需要读公司的一个接口&#xff0c;显示负载是“表单数据” 一开始没注意类型&#xff0c;按照公司其他接口的情况用了json&#xff0c;结果返回的数据时间阶段没有体现dct的要求&#xff0c;脚本如下&#xff08;错误示范&#xff09; from requests import post from json im…

docker学习

配置数据卷容器 1、创建启动c3数据卷容器&#xff0c;使用-v参数&#xff0c;设置数据卷 docker run -it --namec3 -v /volume centos:7 /bin/bash 2、创建启动c1 c2容器&#xff0c;使用--volumes-from 参数设置数据卷 docker run -it --namec1 --volumes-from c3 centos:7 /…

超声波一体气象站的介绍

超声波一体气象站集风速、风向、温湿度、噪声采集、PM2.5和 PM10、CO2、大气压力、光照于一体&#xff0c;采用标准 ModBus-RTU 通信协议&#xff0c;RS485信号输出方式&#xff0c;通信距离可达 2000 米&#xff0c;数据能够通过 485 通信的方式上传至客户的监控软件或 PLC 组…

JVM——分代收集理论和垃圾回收算法

一、分代收集理论 1、三个假说 弱分代假说&#xff1a;绝大多数对象都是朝生夕灭的。 强分代假说&#xff1a;熬过越多次垃圾收集过程的对象越难以消亡。 这两个分代假说共同奠定了多款常用的垃圾收集器的一致的设计原则&#xff1a;收集器应该将Java堆划分出不同的区域&…

OPENCV C++(十二)模板匹配

正常模板匹配函数 matchTemplate(img, templatee, resultMat, 0);//模板匹配 这里0代表的是方法&#xff0c;一般默认为0就ok img是输入图像 templatee是模板 resultmat是输出 1、cv::TM_SQDIFF&#xff1a;该方法使用平方差进行匹配&#xff0c;因此最佳的匹配结果在结果为…

《Java-SE-第三十八章》之注解

前言 在你立足处深挖下去,就会有泉水涌出!别管蒙昧者们叫嚷:“下边永远是地狱!” 博客主页&#xff1a;KC老衲爱尼姑的博客主页 博主的github&#xff0c;平常所写代码皆在于此 共勉&#xff1a;talk is cheap, show me the code 作者是爪哇岛的新手&#xff0c;水平很有限&…

【vue3+xlxs+xlsx-style-vite】vue3项目中使用xlsx插件实现Excel表格的导出和解析,已实现

在vue3项目中使用xlsx插件实现Excel表格的导出和解析 1、xlsx插件包官方 xlsx插件包官方 2、FileReader官方文档&#xff1a;FileReader官方文档 安装xlsx和xlsx-style-vite、file-saver npm install xlsx npm install xlsx-style-vite npm install file-saverpackage.json中查…

以商业大数据技术助力数据合规流通体系建立,合合信息参编《数据经纪从业人员评价规范》团标

经国务院批准&#xff0c;由北京市人民政府、国家发展和改革委员会、工业和信息化部、商务部、国家互联网信息办公室、中国科学技术协会共同主办的2023 全球数字经济大会于近期隆重召开。由数交数据经纪&#xff08;深圳&#xff09;有限公司为主要发起单位&#xff0c;合合信息…

【openwrt学习笔记】dnsmasq源码阅读

目录 一、DHCP(Dynamic Host Configuration Protocol)1.1 前置知识1.2 参考链接1.3 IP地址分配代码分析rfc2131.cdhcp-common.cdhcp.c 1.4 几个小问题1.4.1 连续IP模式&#xff08;sequential_ip&#xff09;1.4.2 重新连接使用IP地址1.4.3 续约租期1.4.4 不同的MAC地址分配到相…

3. 爬取自己CSDN博客列表(自动方式)(分页查询)(网站反爬虫策略,需要在代码中添加合适的请求头User-Agent,否则response返回空)

文章目录 步骤打开谷歌浏览器输入网址按F12进入调试界面点击网络&#xff0c;清除历史消息按F5刷新页面找到接口&#xff08;community/home-api/v1/get-business-list&#xff09;接口解读 撰写代码获取博客列表先明确返回信息格式json字段解读 Apipost测试接口编写python代码…

对应分析介绍及SPSS案例分析

在开展统计分析的过程中&#xff0c;分类变量&#xff08;定序和定类变量&#xff09;是我们研究的一个重点。通常我们分析分类变量间关系时&#xff0c;最常用的分析方法是卡方检验&#xff0c;其次是逻辑回归和对数线性模型等。 如果类别变量的分类较少&#xff0c;我们可以…

Clickhouse基于文件复制写入

背景 目前clickhouse社区对于数据的写入主要基于文件本地表、分布式表方式为主&#xff0c;但缺乏大批量快速写入场景下的数据写入方式&#xff0c;本文提供了一种基于clickhouse local 客户端工具分布式处理hdfs数据表文件&#xff0c;并将clickhouse以文件复制的方式完成写入…

selenium.webdriver Python爬虫教程

文章目录 selenium安装和使用 selenium安装和使用 pip install selenium 下载对应的浏览器驱动 实例化浏览器 from selenium import webdriverbrowser webdriver.Chrome()元素定位 控制浏览器

浪潮信息赵帅:多元算力时代 开源开放的OpenBMC成为服务器管理优先解

“多元算力时代下&#xff0c;大规模的异构服务器设备面临多种处理器架构、多种设备协议、不同管理芯片兼容的系统化设计挑战&#xff0c;管理固件也迎来新的变革。开源开放的OpenBMC&#xff0c;以创新的分层解耦软件架构&#xff0c;兼容不同处理器架构、算力平台和管理芯片&…