BÀI 02Nền tảng

Parameters

Truyền dữ liệu giữa các component, nhận sự kiện từ component con và tái sử dụng giao diện bằng template.

Giải thích, ví dụ & thực hành Tất cả bài học

Theo dõi dữ liệu ở cả hai phía

Mỗi ví dụ phân biệt component cha và con. Thay đổi dữ liệu ở cha, thử nút trong con rồi đối chiếu phần mã của từng component.

01 · Route Parameter — tham số trên URL

Route param là route của một page. Bên dưới chỉ là code sample để xem (không chạy trong page này).

Xem code (route param sample)

@page "/product/{Id:int}"

        <h3>Product Id: @Id</h3>

        @code {
        [Parameter]
        public int Id { get; set; }
        }

02 · Truyền dữ liệu từ cha xuống con

CHA truyền dữ liệu xuống CON qua attribute.

Parent Count: 0

ParamChild

Title: Hello from Parent

Count: 0

Xem code

CHA (Pages/ParametersDemo.razor)


<button class="btn btn-primary" @onclick="() => Count++">Count++</button>
<span><b>Parent Count:</b> @Count</span>

<ParamChild Title="Hello from Parent" Count="@Count" />

@code {
    private int Count = 0;
}

CON (Components/ParamChild.razor)


<div class="border rounded p-2">
    <div><b>ParamChild</b></div>
    <div>Title: @Title</div>
    <div>Count: @Count</div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public int Count { get; set; }
}

03 · Giá trị mặc định và `EditorRequired`

Parameter có thể có default. Nếu muốn “bắt buộc truyền”, dùng [EditorRequired].

ParamChild

Title: Chỉ truyền Title (Count sẽ default)

Count: 100

Xem code

CHA (Pages/ParametersDemo.razor)


<!-- Không truyền Count -->
<ParamChild Title="Chỉ truyền Title (Count sẽ default)" />

CON (Components/ParamChild.razor)


<div>Title: @Title</div>
<div>Count: @Count</div>

@code {
    [Parameter, EditorRequired]
    public string Title { get; set; } = "";

    // Default value nếu CHA không truyền
    [Parameter]
    public int Count { get; set; } = 100;
}

04 · CascadingParameter — dữ liệu dùng chung nhiều cấp

CascadingParameter dùng khi bạn muốn truyền dữ liệu dùng chung từ component cha xuống tất cả component con/cháu mà không cần truyền qua từng cấp.

Component cha “phát” dữ liệu bằng <CascadingValue>, component con nhận bằng [CascadingParameter].

Theme (cascading):

ParamChildCascading

Theme (from Cascading): Light

Xem code

CHA (Pages/ParametersDemo.razor)


<select class="form-select w-25" @bind="Theme">
    <option>Light</option>
    <option>Dark</option>
    <option>Blue</option>
</select>

<CascadingValue Value="@Theme">
    <ParamChildCascading />
</CascadingValue>

@code {
    private string Theme = "Light";
}

CON (Components/ParamChildCascading.razor)


<div class="border rounded p-2">
    <div><b>ParamChildCascading</b></div>
    <div>Theme: <b>@Theme</b></div>
</div>

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

05 · Nhận thêm attribute với `CaptureUnmatchedValues`

CHA truyền thêm class/style/data-*, CON nhận bằng AdditionalAttributes.

ParamChildWithAttrs: Component nhận attrs

Xem code

CHA (Pages/ParametersDemo.razor)


<ParamChildWithAttrs class="border p-2 rounded"
style="margin-top:8px;"
data-test="abc"
Text="Component nhận attrs" />

CON (Components/ParamChildWithAttrs.razor)


<div @attributes="AdditionalAttributes">
    <b>ParamChildWithAttrs:</b> @Text
</div>

@code {
    [Parameter] public string Text { get; set; } = "";

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object>? AdditionalAttributes { get; set; }
}

06 · EventCallback — sự kiện từ con lên cha

CON bắn sự kiện lên CHA qua EventCallback.

Last click: none

Xem code

Gọi thẳng không qua InvokeAsync


// CHA
<ParamChildEvent OnClicked="HandleChildClicked" />

@code {
    private string LastClick = "none";

    private void HandleChildClicked()
    {
        LastClick = $"Child clicked at {DateTime.Now:HH:mm:ss}";
    }
}


// CON            
<button class="btn btn-outline-success" @onclick="OnClicked"> Child Click Me </button>

@code {
    [Parameter] public EventCallback OnClicked { get; set; }
}

InvokeAsync (KHÔNG đối số – CON xử lý trước)


// CHA
<ParamChildEvent OnClicked="HandleChildClicked" />

@code {
    private void HandleChildClicked()
    {
        LastClick = $"Child clicked at {DateTime.Now:HH:mm:ss}";
    }
}


// CON
<button class="btn btn-outline-success" @onclick="HandleClick"> Child Click Me </button>

@code {
    [Parameter] public EventCallback OnClicked { get; set; }

    private async Task HandleClick()
    {
        // CON xử lý trước khi gọi CHA
        await Task.Delay(150);

        await OnClicked.InvokeAsync();
    }
}

InvokeAsync<T> (CÓ đối số – CON gửi dữ liệu)


// CHA
<ParamChildEvent OnClicked="HandleChildClicked" />

@code {
    private void HandleChildClicked(string message)
    {
        LastClick = message;
    }
}


// CON
<button class="btn btn-outline-success" @onclick="HandleClick"> Child Click Me </button>

@code {
    [Parameter] public EventCallback<string> OnClicked { get; set; }

    private async Task HandleClick()
    {
        var msg = $"Child clicked at {DateTime.Now:HH:mm:ss}";
        await OnClicked.InvokeAsync(msg);
    }
}

async Task (CON await InvokeAsync chờ CHA xử lý xong)


// CHA (async)
<ParamChildEvent OnClicked="HandleChildClickedAsync" />

@code {
    private async Task HandleChildClickedAsync()
    {
        // CHA xử lý async (API / DB / JS / delay...)
        await Task.Delay(300);

        LastClick = $"Child clicked at {DateTime.Now:HH:mm:ss}";
    }
}


// CON (InvokeAsync chờ CHA xong)
<button class="btn btn-outline-success" @onclick="HandleClick"> Child Click Me </button>

@code {
    [Parameter] public EventCallback OnClicked { get; set; }

    private async Task HandleClick()
    {
        // CON xử lý trước
        await Task.Delay(150);

        // ĐỢI CHA xử lý xong
        await OnClicked.InvokeAsync();

        // Code ở đây chỉ chạy SAU khi CHA xong

    }
}

Callback động (EventCallbackFactory) + kiểm tra HasDelegate


// CHA
// Gán callback bằng C# (không bó cứng trong markup)
<ParamChildEvent OnClicked="clickCallback" />

@code {
    private EventCallback clickCallback;
    private bool IsAdmin = true;

    protected override void OnInitialized()
    {
        clickCallback = EventCallback.Factory.Create(
        this,
        IsAdmin ? HandleAdminClick : HandleUserClick
        );
    }

    private void HandleAdminClick()
    {
        LastClick = "Admin handled click";
    }

    private void HandleUserClick()
    {
        LastClick = "User handled click";
    }
}


// CON
<button class="btn btn-outline-success" @onclick="HandleClick"> Child Click Me </button>

@code {
    [Parameter] public EventCallback OnClicked { get; set; }

    private async Task HandleClick()
    {
        // Kiểm tra CHA có gán handler hay không
        if (OnClicked.HasDelegate)
    {
        // ĐỢI CHA xử lý xong (nếu CHA là async Task)
        await OnClicked.InvokeAsync();
    }
        // else: callback optional → CON tự xử lý tiếp
    }
}

07 · RenderFragment và ChildContent

CHA truyền khối UI vào CON thông qua ChildContent.

Card Title

Đây là nội dung truyền từ Parent xuống.

Xem code

CHA (Pages/ParametersDemo.razor)


<ParamChildContent Title="Card Title">
    <p>Đây là nội dung truyền từ Parent xuống.</p>
    <button class="btn btn-sm btn-outline-primary" @onclick="() => ContentClicks++"> Content button (clicks: @ContentClicks) </button>
</ParamChildContent>

@code {
    private int ContentClicks = 0;
}

CON (Components/ParamChildContent.razor)


<div class="border rounded p-2">
    <div class="mb-2"><b>@Title</b></div>
    <div>
    @ChildContent
    </div>
</div>

@code {
    [Parameter] public string Title { get; set; } = "";
    [Parameter] public RenderFragment? ChildContent { get; set; }
}

08 · RenderFragment<T> — template có dữ liệu

CON nhận list + template, CHA quyết định UI hiển thị của từng item bằng ItemTemplate.

Alice (Age: 22)

Bob (Age: 30)

Charlie (Age: 27)

SelectedUser: none

Xem code

Models/User.cs


namespace BlazorSample.Models;

public record User(string Name, int Age);

CHA (Pages/ParametersDemo.razor)


<ParamChildTemplate Items="@Users">
    <ItemTemplate Context="u">
        <div class="d-flex justify-content-between border rounded p-2 mb-1">
            <span><b>@u.Name</b> (Age: @u.Age)</span>
            <button class="btn btn-sm btn-outline-secondary" @onclick="() => SelectedUser = u.Name">Select</button>
        </div>
    </ItemTemplate>
</ParamChildTemplate>

<p><b>SelectedUser:</b> @SelectedUser</p>

@code {
    private List<User> Users = new()
    {
        new("Alice", 22),
        new("Bob", 30),
        new("Charlie", 27)
    };

    private string SelectedUser = "none";
}

CON (Components/ParamChildTemplate.razor)

@using BlazorSample.Models

@if (Items?.Count > 0)
{
    foreach (var item in Items)
    {
        @ItemTemplate?.Invoke(item)
    }
}
else
{
    <p class="text-muted">No items</p>
}

@code {
    [Parameter] public List<User> Items { get; set; } = new();
    [Parameter] public RenderFragment<User>? ItemTemplate { get; set; }
}

09 · Parameter đồng bộ hai chiều

CON hỗ trợ @bind-Value bằng Value + ValueChanged.

Custom input (two-way):

TwoWayText: hello

Xem code

CHA (Pages/ParametersDemo.razor)


<ParamTwoWay @bind-Value="TwoWayText" />
<p><b>TwoWayText:</b> @TwoWayText</p>

@code {
private string? TwoWayText = "hello";
}

CON (Components/ParamTwoWay.razor)


<input class="form-control"value="@Value"@oninput="OnInput" />

@code {
    [Parameter] public string? Value { get; set; }
    [Parameter] public EventCallback<string?> ValueChanged { get; set; }

    private async Task OnInput(ChangeEventArgs e)
    {
        var v = e.Value?.ToString();
        Value = v;
        await ValueChanged.InvokeAsync(v);
    }
}

10 · `@ref` — gọi phương thức của component con

@ref cho phép component CHA giữ tham chiếu đến component CON và gọi trực tiếp method public của CON. Đây là ngoại lệ trong Blazor (không dùng cho data flow).

Xem code (@ref sample)


<!-- Parent (Page) -->

<RefChild @ref="childRef" />

<button @onclick="CallIncrement">Increment (CHA → CON)</button>

<button @onclick="CallReset">Reset</button>

@code {
    private RefChild? childRef;

    private void CallIncrement()
    {
        childRef?.Increment();
    }

    private void CallReset()
    {
        childRef?.Reset();
    }
}


<!-- Child component file name [RefChild.razor] -->

<div>Counter: @Counter</div>

@code {
    private int Counter = 0;

    public void Increment()
    {
        Counter++;
    }

    public void Reset()
    {
        Counter = 0;
    }
}

Bài tiếp: Render

01 · Route Parameter — tham số trên URL

02 · Truyền dữ liệu từ cha xuống con

03 · Giá trị mặc định và EditorRequired

04 · CascadingParameter — dữ liệu dùng chung nhiều cấp

05 · Nhận thêm attribute với CaptureUnmatchedValues

06 · EventCallback — sự kiện từ con lên cha

07 · RenderFragment và ChildContent

08 · RenderFragment<T> — template có dữ liệu

09 · Parameter đồng bộ hai chiều

10 · @ref — gọi phương thức của component con

03 · Giá trị mặc định và `EditorRequired`

05 · Nhận thêm attribute với `CaptureUnmatchedValues`

10 · `@ref` — gọi phương thức của component con