0
点赞
收藏
分享

微信扫一扫

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#

unadlib 2022-03-12 阅读 86

写在前面

最近,刚开始学习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分开编写多好!

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_asp.net

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

偶然发现

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_microsoft_02

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_microsoft_03

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_c#_04

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_asp.net_05

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

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类型。

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_c#_06

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_asp.net_07

示例验证

在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++;
}
}

运行后,发现一切正常:

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_microsoft_08

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

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

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_c#_09

嗯!现在就顺眼多了。

Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_c#_10

结论

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


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

如果你觉得这篇文章对你有所启发,请关注我的个人公众号”My IO“,记住我!Hello Blazor:(1)像ASP.NET WebForm一样写代码 #yyds干货盘点#_asp.net_11

举报

相关推荐

0 条评论