怎么样做兼职网站,seo网站建站,室内装修设计用什么软件,建站公司经营写在前面最近#xff0c;刚开始学习Blazor。对于后端出身的程序员来说#xff0c;使用Blazor上手开发前端程序#xff0c;门槛确实降低了不少。还在观望的朋友可以尝试入坑了。在学习和编写Blazor程序的过程中#xff0c;我产生了一些想法#xff0c;将会逐渐在本系列中呈… 写在前面最近刚开始学习Blazor。对于后端出身的程序员来说使用Blazor上手开发前端程序门槛确实降低了不少。还在观望的朋友可以尝试入坑了。在学习和编写Blazor程序的过程中我产生了一些想法将会逐渐在本系列中呈现。razor文件的问题每个Blazor组件就是一个.razor文件。razor文件可以包含razor标记、HTML和C#代码。类似下面这种page /counterh1Counter/h1pCurrent count: currentCount/pbutton classbtn btn-primary onclickIncrementCountClick me/buttoncode {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, h1Counter/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“记住我
