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 

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

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

相关文章

Spring集成Mybatis配置映射文件方法详解

Spring ORM模块集成Mybatis使用到了mybatis-spring&#xff0c;在配置mybatis映射文件的时候&#xff0c;一般不直接在Mybatis的配置文件里进行配置&#xff0c;而会在Spring的配置文件里使用MapperScannerConfigurer来配置。MapperScannerConfigurer会自动扫描basePackage指定…

2019年该学习哪门语言?建议学习C#语言

世界上只有少数几种语言是多功能的&#xff0c;而没有一个像C#那样干净整洁。作者 | Arctek译者 | 谭开朗&#xff0c;责编 | 郭芮出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09;以下为译文&#xff1a;最直接的答案是&#xff1a;值得。但我想你不是来找这样的答…

Spring连接mysql数据库错误:Cannot load JDBC driver class '${driver}'

在用Spring使用连接mysql数据库时出现如下错误&#xff1a; Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Could not get JDBC Connection; nested exception isjava.sql.SQLException: Cannot load JDBC driver class ${driver} 错误详细信息如下&…

不一样的 SQL Server 日期格式化

不一样的 SQL Server 日期格式化Intro最近统计一些数据&#xff0c;需要按天/按小时/按分钟来统计&#xff0c;涉及到一些日期的格式化&#xff0c;网上看了一些文章大部分都是使用 CONVERT 来转换的&#xff0c;SQL Server 从 2012 开始增加了 FORMAT 方法&#xff0c;可以使用…

怕被政治烧到,RISC-V基金会决定迁址瑞士

由于政治影响&#xff0c;RISC-V 基金会决定迁址瑞士。FILE PHOTO: Technology on display at Huaweis headquarters in Shenzhen, Guangdong province, China May 29, 2019. REUTERS/Jason Lee去年 12 月份&#xff0c;RISC-V 基金会在一次会议上宣布&#xff0c;它将迁址到一…

进程和线程的状态

一、进程的基本状态 进程经常讨论的基本状态为&#xff1a;就绪状态&#xff08;Ready&#xff09;、运行状态&#xff08;Running&#xff09;、阻塞状态&#xff08;Blocked&#xff09;。此外&#xff0c;还包括不常讨论的创建和结束。 就绪状态&#xff1a;当进程已分配到除…

ASP.NET Core快速入门(第6章:ASP.NET Core MVC)--学习笔记

点击蓝字关注我们课程链接&#xff1a;http://video.jessetalk.cn/course/explore良心课程&#xff0c;大家一起来学习哈&#xff01;任务40&#xff1a;介绍1.Individual authentication 模板2.EF Core Migration3.Identity MVC&#xff1a;UI4.Identity MVC&#xff1a;EF I…

进程间通信的方式总结

进程间通信就是在不同进程之间传播或交换信息。 进程间通信的目的如下&#xff1a; ①数据传输&#xff1a;一个进程需要将它的数据发送给另一个进程&#xff0c;发送的数据量在一个字节到几兆字节之间。 ②共享数据&#xff1a;多个进程想要操作共享数据&#xff0c;一个进程对…

EF Core For MySql查询中使用DateTime.Now作为查询条件的一个小问题

背景最近一直忙于手上澳洲线上项目的整体迁移和升级的准备工作&#xff0c;导致博客和公众号停更。本周终于艰难的完成了任务&#xff0c;借此机会&#xff0c;总结一下项目中遇到的一些问题。EF Core 一直是我们团队中中小型项目常用的 ORM 框架&#xff0c;在使用 SQL Server…

操作系统进程(作业)调度常见算法详解

一、进程调度的原因 在操作系统中&#xff0c;由于进程综述多于处理机&#xff0c;它们必然竞争处理机。为了充分利用计算机系统中的CPU资源&#xff0c;让计算机系统能够多快好省地完成我们让它做的各种任务&#xff0c;所以需要进行进程调度。 二、进程调度的定义 进程调度&a…

Orleans 3.0 为我们带来了什么

原文&#xff1a;https://devblogs.microsoft.com/dotnet/orleans-3-0/作者&#xff1a;Reuben Bond&#xff0c;Orleans首席软件开发工程师翻译&#xff1a;艾心这是一篇来自Orleans团队的客座文章&#xff0c;Orleans是一个使用.NET创建分布式应用的跨平台框架。获取更多信息…

进程的同步与互斥

现代操作系统采用多道程序设计机制&#xff0c;多个进程可以并发执行&#xff0c;CPU在进程之间来回切换&#xff0c;共享某些资源&#xff0c;提高了资源的利用率&#xff0c;但这也使得处理并发执行的多个进程之间的冲突和相互制约关系成为了一道难题。如果对并发进程的调度不…

缓存击穿/穿透/雪崩

缓存击穿/穿透/雪崩Intro使用缓存需要了解几个缓存问题&#xff0c;缓存击穿、缓存穿透以及缓存雪崩&#xff0c;需要了解它们产生的原因以及怎么避免&#xff0c;尤其是当你打算设计自己的缓存框架的时候需要考虑如何处理这些问题。缓存击穿一般的缓存系统&#xff0c;都是按照…

临界区、互斥量、信号量、事件的区别

四种进程或线程同步互斥的控制方法&#xff1a; 1、临界区:通过对多线程的串行化来访问公共资源或一段代码&#xff0c;速度快&#xff0c;适合控制数据访问。 2、互斥量:为协调共同对一个共享资源的单独访问而设计的。 3、信号量:为控制一个具有有限数量用户资源而设计。 4…

99%的人不知道搜索引擎的6个技巧

点击上方“dotNET全栈开发”&#xff0c;“设为星标”加“星标★”&#xff0c;每天11.50&#xff0c;好文必达全文约900字&#xff0c;预计阅读时间1分钟今天看了一期seo优化的视频&#xff0c;其中就有这么一篇关于百度搜索的几个小技巧&#xff0c;这里整理出来&#xff0c;…

用信号量解决进程的同步与互斥

转自&#xff1a;http://www.cnblogs.com/whatbeg/p/4435286.html 现代操作系统采用多道程序设计机制&#xff0c;多个进程可以并发执行&#xff0c;CPU在进程之间来回切换&#xff0c;共享某些资源&#xff0c;提高了资源的利用率&#xff0c;但这也使得处理并发执行的多个进程…

扎心了,程序员2017到2019经历了什么?

刷爆朋友圈的2017-2019到底是什么梗&#xff1f;只剩下33天了&#xff0c;就到2020年了最后一批90后&#xff0c;马上就要30了&#xff1f;一到年底&#xff0c;就会陷入回忆和比较中近几日&#xff0c;网友开始将2017年和2019年进行对比&#xff0c;不少人晒出了自己在17年和1…

【.NETCore 3】Ids4 ║ 统一角色管理(上)

前言书接上文&#xff0c;咱们在上周&#xff0c;通过一篇《思考》 性质的文章&#xff0c;和很多小伙伴简单的讨论了下&#xff0c;如何统一同步处理角色的问题&#xff0c;众说纷纭&#xff0c;这个我一会儿会在下文详细说到&#xff0c;而且我最终也定稿方案了。所以今天咱们…

操作系统死锁详解

一、死锁的定义 死锁是两个或两个以上的进程中的每一个都在等待其中另一个进程释放资源而被封锁&#xff0c;它们都无法向前推进&#xff0c;这种现象称为死锁。 二、产生死锁的主要原因 &#xff08;1&#xff09; 因为系统资源不足。 &#xff08;2&#xff09; 进程运行推进…

.NET Core 3.0 使用Nswag生成Api文档和客户端代码

摘要在前后端分离、Restful API盛行的年代&#xff0c;完美的接口文档&#xff0c;成了交流的纽带。在项目中引入Swagger &#xff08;也称为OpenAPI&#xff09;&#xff0c;是种不错的选择&#xff0c;它可以让接口数据可视化。下文将会演示利用Nswag如何生成Api文档利用NSwa…