Trong bài này ta sẽ nói về Cascading Value trong Blazor

 

1. Cascading Values and Parameter

- Cascading trong Blazor là gì?

Cascading cứ hiểu nôm na là truyền dữ liệu từ thằng cha xuống thằng con, con xuống cháu, ... bình thường sử dụng [Parameter], bây giờ sử dụng [CascedingParameter], nó sẽ tường minh hơn

Ví dụ có 3 componen

+ Cha: ParentComponent.razor
+ Con: ChildComponent.razor
+ Cháu: GrandChildComponent.razor

//ParentComponent.razor
@page "/pc"

This is Parent Component



@code{
   public string Style {get; set;} = "color: red";
}

- Child Component


@code {

-- Grand Child Component

@code {

}

Kết quả: 

- Nếu ta sử dụng thẻ và [CascadingParameter]

@page "/pc"

This is Parent Component


    


@code{
   public string Style {get; set;} = "color: red";
}

//===========================================

- Child Component


@code {
    [CascadingParameter]
    public string ChildColor { get; set; }
}

//===========================================

-- Grand Child Component

@code {
    [CascadingParameter]
    public string GrandChildParam { get; set; }
}

Kết quả: 

Vậy trong trường hợp có nhiều CascadingParameter thì sao?

2. Multiple Cascading Values and Parameter

Đơn giản, chỉ cần lồng thêm 1 cái Thẻ CascadingValue nữa là được

@page "/pc"

This is Parent Component - @Name


    
        
    


@code{
    public string Style {get; set;} = "color: red";
    public string Name { get; set; } = "NguyenDanhLuu";
}


//==================================================

- Child Component -- @ChildName


@code {
    [CascadingParameter]
    public string ChildColor { get; set; }

    [CascadingParameter]
    public string ChildName { get; set; }

}

//==================================================
-- Grand Child Component --- @GrandChildParam

@code {
    [CascadingParameter]
    public string GrandChildParam { get; set; }
    [CascadingParameter]
    public string GrandChildName { get; set; }
}

Ôi không, sao thằng con và thằng cháu bay màu rồi :((

Nguyên nhân là do nó không thể phân biệt được cái Param nào của thằng con, cháu, map với thằng cha, vì nó cùng kiểu dữ liệu mà, nên nó cứ chọn đại cái cuối, trong trường hợp khác kiểu dữ liệu thì nó map được đấy, nhưng đây cùng, cứ lẫn lộn sao ấy =))
 

//Cha
public string Style {get; set;} = "color: red";
public string Name { get; set; } = "NguyenDanhLuu";

//Con
[CascadingParameter]
public string ChildColor { get; set; }
[CascadingParameter]
public string ChildName { get; set; }

//Cháu
[CascadingParameter]
public string GrandChildParam { get; set; }
[CascadingParameter]
public string GrandChildName { get; set; }

 

Vậy làm sao để nó map đúng bây giờ, ta sẽ có thuộc tính có tên là Name, nhúng trực tiếp vào như Attribute của thẻ ấy

@page "/pc"

This is Parent Component - @Name


    
        
    


@code{
    public string Style {get; set;} = "color: red";
    public string Name { get; set; } = "NguyenDanhLuu";
}

//=============================================

- Child Component -- @ChildName


@code {
    [CascadingParameter(Name = "ParentStyle")]
    public string ChildColor { get; set; }

    [CascadingParameter(Name = "ParentName")]
    public string ChildName { get; set; }
}

Đó thấy chưa :>>>

Nếu áp thuộc tính IsFixed="true" vào thẻ CascadingValue thì giá trị đó sẽ không được thay đổi trong thằng con, còn thằng cha thì được

Tham khảo:
Blazor multiple cascading parameters - YouTube

---

Tags: C# Blazor NET 6