dotnet Blazor 用 C# 控制界面行为
微软很久就在做 Blazor 但是我现在才开始创建一个测试项目,我想用 C# 去控制 HTML 界面。小伙伴也许会问现在前端不是烂大街么,为什么还需要 Blazor 来做。可能原因只有一个,就是可以使用 C# 写脚本,代码比较清真
用 VisualStudio 创建一个默认的 Blazor 项目,在创建完成之后,可以看到有很多例子文件,这样可以降低入手成本。我是从睡醒3点开始创建项目,同时一边水群,一边看 B 站,然而我在 3 点半左右就做出下图效果,虽然大部分逻辑都不理解
所以本文不是教程,而是在告诉大家又有一个新坑
路由
在 Blazor 里面,用页面第一句代码 @page
说明这个页面的路由,也就是默认首页的是 /
可以这样写
@page "/"
也就是无论页面命名为什么,只需要设置了路由,就能更改默认页面
页面就是字符串
在我用 Blazor 的理解,整个页面除了代码就是字符串,而这个页面可以使用字段变量作为占位符替换。也就是整个页面的显示内容包括样式都是可以使用局部变量替换的,所以本文上面的逻辑就是通过让按钮的样式绑定变量,通过在代码修改变量的方式修改界面
默认有 Counter.razor 页面,在这个页面里面,默认的代码如下
<h1>Counter</h1>
<p>Current count: @currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
int currentCount = 0;
void IncrementCount() { currentCount++; }}
也就是在按钮点击时触发 IncrementCount 方法,而在上面有文本绑定 currentCount
在代码会被修改,此时可以看到点击按钮时将会修改文本的值
现在尝试将按钮的样式也进行绑定,将按钮的字体和 margin 进行绑定
<button class="btn btn-primary" style=" font-size: @fontSize; margin-left: @(marginLeft)px;" @onclick="IncrementCount">Click me</button>
当然此时需要在 code 里面添加 fontSize 和 marginLeft 的定义。在上面代码,因为需要拼接 xx px 字符串,而 marginLeft 的值和 px 中间没有空格隔开,也就是需要 margin-left: 10px;
才是需要的值,如果连一起写就是 margin-left: @marginLeftpx;
也就是无法识别为 @marginLeft
变量和 px
还是需要 @marginLeftpx
变量,此时就可以使用括号
修改代码让点击按钮触发事件,修改按钮样式
@code {
string fontSize = "large";
int marginLeft = 1;
int currentCount = 0;
void IncrementCount() { if(fontSize == "large") { fontSize = "initial"; } else { fontSize = "large"; } marginLeft++; }}
这样就是上文的效果,如果有前端小伙伴协助写界面样式,此时让我来写 C# 业务逻辑,应该是可以快速上手的。这就是 Blazor 的优点
大部分项目都可以忽略性能和并发和流量,所以一些玩具可以使用 Blazor 开发
使用 HTML 写界面对我来说还是不清真,现在有 UNO 项目,这个项目是通过 XAML 写界面的,可以作为 WebAssembly 发布,这个玩具会更清真
微软的技术还是很强,可惜这些技术都不在实处,大概作为玩具还不错。期待这些玩具能真的作为产品级使用
原文链接:https://blog.lindexi.com/post/dotnet-Blazor-%E7%94%A8-C-%E6%8E%A7%E5%88%B6%E7%95%8C%E9%9D%A2%E8%A1%8C%E4%B8%BA.html
.NET社区新闻,深度好文,欢迎访问公众号文章汇总 http://www.csharpkit.com
dotnet Blazor 用 C# 控制界面行为相关推荐
- Java实验8 T5.使用键盘控制界面上图片的移动
编写程序,实现使用键盘上的上下左右箭头控制界面上图片的移动.移动到边界时从界面另一侧出现.移动过程中显示另一个图片,停止时恢复原来的图片. package text8;//MyFrame.java i ...
- 【转】VC 多线程中控制界面控件的几种方法
原文网址:https://software.intel.com/zh-cn/blogs/2010/11/30/vc-3 为了保证界面的用户体验经常要把数据处理等放到子线程中进行,然后把结果更新到主界面 ...
- 安卓直播详细教程(三)-----ijkplayer打造个性化控制界面
##前言 为什么要写这篇文章呢? Firsr:直接集成ijkplayer的控制界面太丑了 Second:无法满足我们的需求 我们来看下直接集成的ijkplayer控制界面: 是不是没法用,那么我们现在 ...
- photon 服务器操作系统,[专栏作家] Photon Server之Photon Control服务器控制界面
原标题:[专栏作家] Photon Server之Photon Control服务器控制界面 Photon Control是您Photon服务器的控制用户界面. 启动PhotonControl.exe ...
- 智能多模式,视线追踪控制界面的应用(翻译)
介绍 基于红外线的眼睛视线跟踪器的最新进展显着增加了凝视跟踪技术的研究和工业应用. 虽然涉及眼睛凝视分析的研究可追溯到19世纪初,但直到最近,眼睛注视追踪器主要用于分析眼睛参数以进行阅读和各种人机交互 ...
- Ryan二号的控制界面
终于把控制界面做出来了,实现了简单的电机控制,最令人兴奋的还是能流畅地获取车载usb摄像头的视频信息 截个图看看:
- 【界面设计系列】关于工业控制界面
如何设计工业控制界面 列举所有点表 制表 分割点集 设置页面大小 布置点集 数据可视化->动画 注意:尊重客户.客户中的领导的意见
- VC多线程中控制界面控件的几种方法
为了保证界面的用户体验经常要把数据处理等放到子线程中进行,然后把结果更新到主界面,通常有这样几种方法. 1.启动线程时把控件关联变量的指针传参给线程函数,这种方法无疑是最简单的方法,但极容易造成访问异 ...
- U-NAS OS 系统故障之,WEB控制界面无法登录解决方法
https://www.u-share.cn/forum.php?mod=viewthread&tid=192820&highlight=apache2 方法一: 关于web管理页面无 ...
最新文章
- 南方人过年 VS 北方人过年
- 避免神经网络过拟合的5种技术
- POJ1042 贪心钓鱼
- java sql封装,在Java系统中封装SQL语言的处理方法及系统的制作方法
- 数据结构之堆:堆的介绍与python实现——12
- 史上最强多线程面试44题和答案:线程锁+线程池+线程同步等
- python 输入输出转web_云计算开发学习笔记:Python3 输入和输出方式
- java正则表达 w,超强变态的正则(\w)((?=\1\1\1)(\1))+讲解
- 计算机网络分层作业,计算机网络作业布置-参考答案
- View与Model绑定注意事项 (视图无数据显示)
- sp根据备份文件来创建DB
- robocopy 备份_备份双雄!Robocopy和XXCOPY使用详解
- 苹果计算机如何安装应用软件,Mac下如何安装软件?
- 计算机房在五楼英语,“我住在五楼”怎么用英语表达?
- “性能续航小超人”iQOO Z6系列登场:售价仅1199元起
- python实现SG滤波
- Android BottomNavigationView的使用
- 设计模式——软件设计的太极剑法
- 服务器如何接收GPS定位器发送过来的数据
- java外文资料_java外文文献(毕业设计).doc
热门文章
- wpf中的datagrid中如何显示图片
- [转载]锦上添花Sybase数据库题目大网罗-4
- [导入]Asp.net中动态在中加入Scrpit标签
- 北京一公交车发生爆炸 疑为乘客携带药品起反应
- python pcm,python pcm音频添加头转成Wav格式文件的方法
- 如何在iPhone或iPad的控制中心中控制智能家居设备
- User Stories - 最佳实践 (Best Practices)
- Spring Boot 使用Redis
- 构建微型数据中心——在laptop上运行Rancher
- 易成新能加码光伏产业链 作价28.29亿收购赛维两子公司