Hello Blazor:(1)像ASP.NET WebForm一样写代码

写在前面

最近,刚开始学习Blazor。

对于后端出身的程序员来说,使用Blazor上手开发前端程序,门槛确实降低了不少。还在观望的朋友可以尝试入坑了。

在学习和编写Blazor程序的过程中,我产生了一些想法,将会逐渐在本系列中呈现。

razor文件的问题

每个Blazor组件就是一个.razor文件。

razor文件可以包含razor标记、HTML和C#代码。类似下面这种:

@page "/counter"<h1>Counter</h1><p>Current count: @currentCount</p><button class="btn btn-primary" @onclick="IncrementCount">Click me</button>@code {private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

这种混合代码的方式编辑起来不太方便。而且如果在真实项目中,代码逻辑复杂,文件会变得更长,更加难以维护。

要是能像ASP.NET WebForm那样,C#代码和HTML分开编写多好!

这只是一个想法,直到一次偶然发现!

偶然发现

在学习部署Blazor的时候,我注意到一个现象,在Blazor项目发布的目录下,并没有发现razor文件的身影,只发现对应项目名称的dll。 

这与ASP.NET WebForm不同,aspx文件会一同发布,而C#代码则是编译放在对应项目名称的dll中。 

这是不是意味着razor文件也变成了C#代码的一部分?探究一下!

打开obj目录(用于存放编译过程中生成的中间临时文件),在razor文件的对应目录发现了Counter.razor.g.cs文件,正好验证了我们的猜测:

代码太长,只节选了部分。

namespace WebApplication1.Pages
{[Microsoft.AspNetCore.Components.RouteAttribute("/counter")]public partial class Counter : Microsoft.AspNetCore.Components.ComponentBase{protected override void BuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder __builder){__builder.AddMarkupContent(0, "<h1>Counter</h1>\r\n\r\n");__builder.OpenElement(1, "p");__builder.AddContent(2, "Current count: ");......}private int currentCount = 0;private void IncrementCount(){currentCount++;}}
}

发现契机

通过上面的代码可以看到,原来razor标记和Html全部转换成了C#代码,放到了BuildRenderTree方法输出到了Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder对象__builder中,再通过__builder渲染到页面。而@code代码块则是原样复制。

最关键的是这句代码:

public partial class Counter : Microsoft.AspNetCore.Components.ComponentBase

居然是partial类型。

这不就表示,可以像ASP.NET WebForm那样把代码放在不同文件中了吗!

示例验证

在Page目录下创建Counter.cs,定义成partial类型。并把@code代码块全部剪切过来,还重载了OnInitializedAsync方法测试能否执行:

public partial class Counter : Microsoft.AspNetCore.Components.ComponentBase
{protected override Task OnInitializedAsync(){currentCount = 100;return base.OnInitializedAsync();} private int currentCount = 0;private void IncrementCount(){currentCount++;}
}

运行后,发现一切正常:

现在唯一的缺点就是,Counter.cs文件与Counter.razor是平级放置的,不太好看。

试着像ASP.NET WebForm那样,将Counter.cs文件名改为Counter.razor.cs。

嗯!现在就顺眼多了。

结论

在这篇文章中,我们了解到Blazor如何实现将razor代码最终渲染到页面上,以及partial 类的使用方式。

带着问题去学习新技术,而不是仅仅跟着教程Step by Step。这就是我的学习方式。

如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“,记住我!

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

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

相关文章

VScode设置背景颜色

1.打开VSCode,点击左上角文件选项 2.点击首选项 3.点击颜色主题 4.使用键盘上下方向键即可选择不同颜色的背景

选择比努力更重要,这些微信号值得你细细品读。

一个人无论是平凡的还是不平凡的只是自自然然地按照自己喜欢的样子去生活这是最省力且最快乐的人生选择以下几个优质公众号能让你在闲暇的时候不断的提升自我&#xff0c;拓宽视野愿以书卷气&#xff0c;行我路千里长按二维码&#xff0c;选择【识别图中二维码】关注少年数学家…

ASP.NET Core 6 Minimal API

ASP.NET Core 6 Minimal APIIntro微软在 ASP.NET 6 Preview 4 的介绍文章中介绍了即将到来的 ASP.NET Core 6 中的最小 API 的雏形&#xff0c;我们现在已经基本可以达到最小化 API 了雏形了&#xff0c;在 Preview 4 的时候就写了这个小示例&#xff0c;但是不够简洁&#xff…

支付宝今日起还卡收费;大城市女性买房猛增;小米发布100W快充技术;严查非法办学行为;交大通报博导辱骂学生;这就是今天的大新闻...

今天是3月26日农历二月二十今天星期二不是个让人可以昏昏欲睡的日子下面是今天的大新闻支付宝还信用卡开始收费&#xff08;澎湃新闻&#xff09;根据支付宝此前发布的消息&#xff0c;自3月26日起&#xff0c;通过支付宝给信用卡还款超过免费额度后将收取0.1%的服务费&#xf…

WPF任务栏同步进度

一、概要本篇文章主要分享使用TaskbarItemInfo对象&#xff08;WPF&#xff09;在window操作系统的任务栏中同步任务进度的功能。什么是TaskbarItemInfo对象&#xff1f;TaskbarItemInfo类为 Windows 7 任务栏功能提供托管包装。有关 Windows shell 和本机任务栏 Api 的详细信息…

每日一笑 | 各大互联网公司离职员工群名

全世界只有3.14 % 的人关注了数据与算法之美&#xff08;图源网络&#xff0c;侵权删&#xff09;

mysql快照过久_Oracle 快照(snapshot) 管理

----手工创建Oracle 快照 BEGIN DBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT (); END; / ---删除快照 具体快照信息可以查看视图 D----手工创建Oracle 快照BEGINDBMS_WORKLOAD_REPOSITORY.CREATE_SNAPSHOT ();END;/---删除快照具体快照信息可以查看视图 DBA_HIST_SNAPSHOTBEGIND…

WPF 左侧菜单样式

之前做了一个菜单样式&#xff0c;这样的&#xff1a;链接&#xff1a;WPF 修改(优化)Menu菜单的样式如今又来一个左侧菜单样式&#xff0c;其实只是修改了一下模板&#xff0c;如下图&#xff1a;还是老样子&#xff0c;代码全部都在MainWindow.xaml中&#xff1a;<Window …

STEAM教育风口正劲,如何培养STEAM思维?

近年来&#xff0c;STEAM教育越来越深入我们的生活&#xff0c;但STEAM教育到底是什么呢&#xff1f;来源于美国的“STEAM教育”是将五大学科——科学&#xff08;Science&#xff09;、技术&#xff08;Technology&#xff09;、工程&#xff08;Engineering&#xff09;、艺术…

vue从url中获取token并加入到 请求头里_BATJ都会用到的接口鉴权cookie、session 和token...

鉴权鉴权是指验证用户是否拥有访问系统的权利—鉴定权限。cookie、session和token为什么会有cookie、session和token&#xff1f;1、 http是无状态协议什么是无状态呢&#xff1f;答&#xff1a;当前请求和上一次或者下一次请求是没有任何关系的&#xff0c;好处是速度快&#…

程序有并发错误?NO WAY!

什么是并发错误并发是指程序能够交替执行不同的任务,以达到"同时执行效果"&#xff0c;加快程序的运行效率。但是并发也会导致一系列问题&#xff0c;以变量1赋值为例&#xff0c;由于操作实际由多条指令组成&#xff0c;不同任务执行指令的顺序可能是交错的&#xf…

好好珍惜今生,不要期待来世……

亲情经不起冷漠&#xff0c;爱情经不起谎言&#xff0c;友情经不起虚伪。再好的缘份也经不起敷衍&#xff0c;再深的感情也需要珍惜。没有绝对的傻瓜&#xff0c;只有愿为你装傻的人&#xff0c;原谅你的人&#xff0c;是不愿失去你的世界。一辈子真的好短好短…… 有多少人说好…

图像柔光效果(SoftGlow)的原理及其实现。

图像柔光效果在很多商业软件中都有实现&#xff0c;比如美图秀秀&#xff0c;光影魔术手等。其能针对原始图像产生一副新的比较平滑感觉光线比较柔和的效果&#xff0c;给人一种朦胧美&#xff0c;如下面几幅图所示&#xff1a; 目前&#xff0c;关于该算法的可控参数&#xff…

中小学招生强化就近入学;首次全女性太空行走取消;苹果付费新闻APP奔溃;NASA火星上发现鹅卵石;这就是今天的大新闻...

今天是3月27日农历二月廿一今天星期三有点闷已经开始用空调了下面是今天的大新闻中小学招生强化就近入学&#xff08;北京商报&#xff09;中小学秋季入学新生招生已经陆续开始&#xff0c;近日&#xff0c;教育部办公厅也紧随其后&#xff0c;印发了《关于做好2019年普通中小学…

python如何安装扩展库openpyxl和numpy_Python第三方库之openpyxl(2)

Python第三方库之openpyxl(2)简单的使用写一个工作簿>>> from openpyxl importWorkbook>>> from openpyxl.compat importrange>>> from openpyxl.utils importget_column_letter>>>>>> wb Workbook()>>>>>> de…

[翻译]在GC上加入DPAD

本文90%通过机器翻译&#xff0c;另外10%译者按照自己的理解进行翻译&#xff0c;和原文相比有所删减&#xff0c;可能与原文并不是一一对应&#xff0c;但是意思基本一致。译者水平有限&#xff0c;如果错漏欢迎批评指正译者Bing Translator、InCerry&#xff0c;另外感谢Hex、…

美国Thinkfun的“编程三剑客”少儿编程从入门到精通

▲数据汪特别推荐点击上图进入玩酷屋学编程现在有多火&#xff0c;小木就不多说啦&#xff01;很多爸爸妈妈都想让小朋友早点接触编程&#xff0c;掌握这门未来世界的通用“语言”&#xff0c;但又怕太早使用电脑、iPad等电子产品&#xff0c;影响孩子视力。今天给大家推荐一套…

解决scrollViewDidScroll do not work的方法

2019独角兽企业重金招聘Python工程师标准>>> 别忘记在在包含了scrollView的ViewController中的viewDidload方法中设置scrollView的delegate [self.scrollView setDelegate:self]; 关于delegate&#xff1a;一般一个ui的delegate都在其父类中指定 view.delegateself…

基于ABP落地领域驱动设计-05.实体创建和更新最佳实践

围绕DDD和ABP Framework两个核心技术&#xff0c;后面还会陆续发布核心构件实现、综合案例实现系列文章&#xff0c;敬请关注&#xff01; ABP Framework 研习社&#xff08;QQ群&#xff1a;726299208&#xff09; ABP Framework 学习及实施DDD经验分享&#xff1b;示例源码、…

mysql isam 食物_MySQL常用存储引擎之MyISAM

1. mysql 5.5之前版本默认存储引擎1.1 因为这个原因现在还有大量服务器在使用这myisam引擎的表1.2 myisam是mysql大部分系统表和临时表使用的存储引擎2. myisam存储引擎表由myd和myi组成2.1 myd存储数据信息2.2 myi存储索引信息2.3 frm记录表结构的&#xff0c;所有存储引擎都有…