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++;
    }
}
这种混合代码的方式编辑起来不太方便。而且如果在真实项目中，代码逻辑复杂，文件会变得更长，更加难以维护。
要是能像http://ASP.NET WebForm那样，C#代码和HTML分开编写多好！


这只是一个想法，直到一次偶然发现！
偶然发现


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


这与http://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类型。


这不就表示，可以像http://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是平级放置的，不太好看。
试着像http://ASP.NET WebForm那样，将Counter.cs文件名改为Counter.razor.cs。


嗯！现在就顺眼多了。


结论

在这篇文章中，我们了解到Blazor如何实现将razor代码最终渲染到页面上，以及partial 类的使用方式。
带着问题去学习新技术，而不是仅仅跟着教程Step by Step。这就是我的学习方式。
如果你觉得这篇文章对你有所启发，请关注我的个人公众号”My IO“，记住我！

王丙申

听说blazor可以写双向绑定写到怀疑人生

胡剑唯

确实不错，目前就在使用