C# Blazor 学习笔记(1):Blazor基础语法，组件化和生命周期

前言

这里我们会讲解Blazor的基础语法和简单组件化使用

Blazor 常用语法介绍

基础语法

路由

@Page

路由位置

@page "/fetchdata"

页面元素条件生成

@if / else

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
        <thead>
            <tr>
                <th>Date</th>
                <th>Temp. (C)</th>
                <th>Temp. (F)</th>
                <th>Summary</th>
            </tr>
        </thead>
    </table>
}

@for

@for(var i = 0;i< 10; i++)
{
    <text>我是text @i</text>
}

@foreach

@foreach (var forecast in forecasts)
            {
                <tr>
                    <td>@forecast.Date.ToShortDateString()</td>
                    <td>@forecast.TemperatureC</td>
                    <td>@forecast.TemperatureF</td>
                    <td>@forecast.Summary</td>
                </tr>
            }

绑定

参数绑定（赋值，单向）

<input title="@Title" value="@Value"  />

@code {

    [Parameter]
    public string Title{ get; set; }

    [Parameter]
    public string Value { get; set; }



}

参数绑定（双向）

<input @bind="Title" />

@code {
    public string Title{ get; set; }
}

事件绑定

<button @onclick="ShowTest"/>

@code {
    public void ShowTest()
    {
        Console.WriteLine("我被按钮点击了");
    }
}

字典绑定 @attributes

简化控件的属性绑定

<input @attributes="InputList" />
//等价于 <input title="我的标题" value = "10" />
@code {

    public Dictionary<string, object> InputList { get; set; } = new Dictionary<string, object>()
    {
        {"title","我的标题"},
        {"value","10"}
    };
}

组件化

• 只有razor才能组件化
• razor文件名首字母必须大写
• 不需要注入，可以直接使用组件。所以为了避免文件名冲突，所以要规范化命名

如何使用

@Parameter 参数注入

参数注入支持多参数

• 普通数据类型
• List类型
• Action委托

@code {

    [Parameter]
    public string Title{ get; set; }

    [Parameter]
    public string Value { get; set; }



    [Parameter]
    public List<string> TestList { get; set; } = new List<string>();


}

使用

<Test Title="我是测试的标题" Value="数值" TestList="@strList"/>

@code{
    public List<string> strList = new List<string>()
    {

    };

    protected override Task OnInitializedAsync()
    {
        for(var i = 0;i < 10; i++)
        {
            strList.Add("我是标题" + i);
        }
        return base.OnInitializedAsync();
    }


}

回调函数

组件声明回调

Test.Razor里面

    [Parameter]
    public EventCallback<string> OnClick{ get; set; }
    //string是回调的返回参数

组件注入回调

引用组件

<Test  OnClick="TestBtn"/>

@code{


	//注意，注入的函数的参数和回调的参数要保持一致
    public void TestBtn(string msg)
    {
        Console.WriteLine("我接收到了回调"+msg);
    }

}

组件触发回调

Test.razor

<button @onclick="ShowTest"/>
@code {



    [Parameter]
    public EventCallback<string> OnClick{ get; set; }

	//通过按钮事件触发回调，这样引用的页面就会触发回调函数
    public void ShowTest()
    {
        OnClick.InvokeAsync("点击回调函数");
    }

}

直接控制 @ref

使用@ref 直接控制组件元素

Test是我们定义的组件

//通过@ref直接使用组件
<Test @ref="myTest"  OnClick="TestBtn"/>

@code{
	//先声明组件
    private Test myTest { get; set; }

	//通过某种方式调用组件，我这里是用按钮点击
    public void TestBtn(string msg)
    {
        myTest.Title = "我直接操控修改了Title";
        myTest.TestBtn();
        Console.WriteLine("我接收到了回调"+msg);
    }

}

生命周期

App起始阶段：

在这个阶段，Blazor应用程序初始化并加载所需要的资源。

• OnInitializeAsync：
  • 当应用程序初始化时调用，通常用于执行一些初始化操作。
    组件渲染阶段：在这个阶段，组件将被渲染并呈现到用户界面中。
• OnParametersSet：
  • 在组件接收到新的参数值后调用，可以在此方法中执行与参数相关的操作。
    OnAfterRender：在组件渲染到屏幕后调用，可以在此方法中执行与DOM操作相关的操作。

生命周期钩子阶段：

在这个阶段，Blazor提供了一些特定的生命周期钩子方法，可以用于执行一些特定的操作。

• OnInitialized：
  • 在组件初始化完成后调用，可以在此方法中执行一些初始化逻辑。
• OnAfterRenderAsync：
  • 在组件渲染到屏幕后调用，可以在此方法中执行异步操作。
• OnParametersSetAsync：
  • 在组件接收到新的参数值后调用，可以在此方法中执行异步操作。

App终止阶段：

在这个阶段，Blazor应用程序将完成并进行清理工作。

• OnDispose：
  • 当组件从DOM中移除时调用，可以在此方法中执行一些清理逻辑。

调试

热重置

控制台输出

因为用的是C#而不是JS。所以无法直接使用JS的console.log方法。但是可以使用C#的Console.WriteLine()

打印在运行的控制台里面