最近,刚开始学习Blazor。
对于后端出身的程序员来说,使用Blazor上手开发前端程序,门槛确实降低了不少。还在观望的朋友可以尝试入坑了。
在学习和编写Blazor程序的过程中,我产生了一些想法,将会逐渐在本系列中呈现。
razor文件的问题每个Blazor组件就是一个.razor文件。
razor文件可以包含razor标记、HTML和C#代码。类似下面这种:
page"/counter"h1Counter/h1pCurrentcount:currentCount/pbuttonclass="btnbtn-primary"onclick="IncrementCount"Clickme/buttoncode{privateintcurrentCount=0;privatevoidIncrementCount(){currentCount++;}}这种混合代码的方式编辑起来不太方便。而且如果在真实项目中,代码逻辑复杂,文件会变得更长,更加难以维护。
要是能像ASP.NETWebForm那样,C#代码和HTML分开编写多好!
这只是一个想法,直到一次偶然发现!
偶然发现在学习部署Blazor的时候,我注意到一个现象,在Blazor项目发布的目录下,并没有发现razor文件的身影,只发现对应项目名称的dll。
这与ASP.NETWebForm不同,aspx文件会一同发布,而C#代码则是编译放在对应项目名称的dll中。
这是不是意味着razor文件也变成了C#代码的一部分?探究一下!
打开obj目录(用于存放编译过程中生成的中间临时文件),在razor文件的对应目录发现了Counter.razor.g.cs文件,正好验证了我们的猜测:
代码太长,只节选了部分。
namespaceWebApplication1.Pages{[Microsoft.AspNetCore.Components.RouteAttribute("/counter")]publicpartialclassCounter:Microsoft.AspNetCore.Components.ComponentBase{protectedoverridevoidBuildRenderTree(Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder__builder){__builder.AddMarkupContent(0,"h1Counter/h1\r\n\r\n");__builder.OpenElement(1,"p");__builder.AddContent(2,"Currentcount:");......}privateintcurrentCount=0;privatevoidIncrementCount(){currentCount++;}}}发现契机
通过上面的代码可以看到,原来razor标记和Html全部转换成了C#代码,放到了BuildRenderTree方法输出到了Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder对象__builder中,再通过__builder渲染到页面。而
code代码块则是原样复制。最关键的是这句代码:
publicpartialclassCounter:Microsoft.AspNetCore.Components.ComponentBase
居然是partial类型。
这不就表示,可以像ASP.NETWebForm那样把代码放在不同文件中了吗!
示例验证在Page目录下创建Counter.cs,定义成partial类型。并把
code代码块全部剪切过来,还重载了OnInitializedAsync方法测试能否执行:publicpartialclassCounter:Microsoft.AspNetCore.Components.ComponentBase{protectedoverrideTaskOnInitializedAsync(){currentCount=;returnbase.OnInitializedAsync();}privateintcurrentCount=0;privatevoidIncrementCount(){currentCount++;}}
运行后,发现一切正常:
现在唯一的缺点就是,Counter.cs文件与Counter.razor是平级放置的,不太好看。
试着像ASP.NETWebForm那样,将Counter.cs文件名改为Counter.razor.cs。
嗯!现在就顺眼多了。
结论在这篇文章中,我们了解到Blazor如何实现将razor代码最终渲染到页面上,以及partial类的使用方式。
带着问题去学习新技术,而不是仅仅跟着教程StepbyStep。这就是我的学习方式。
如果你觉得这篇文章对你有所启发,请