Component Tag Helper trong ASP.NET Core

Component Tag Helper render một Razor component trong Razor Pages page hoặc MVC view.

Điều kiện tiên quyết

Thực hiện theo hướng dẫn trong phần Use non-routable components in pages or views của bài viết Integrate ASP.NET Core Razor components with MVC or Razor Pages.

Component Tag Helper

Để render một component từ page hoặc view, sử dụng Component Tag Helper (thẻ <component>).

RenderMode cấu hình xem component:

• Có được prerender vào page hay không.
• Được render dưới dạng HTML tĩnh trên page hay bao gồm thông tin cần thiết để bootstrap ứng dụng Blazor từ user agent.

Các render mode cho ứng dụng Blazor WebAssembly được hiển thị trong bảng sau.

Các render mode được hiển thị trong bảng sau.

Các đặc điểm bổ sung bao gồm:

• Được phép sử dụng nhiều Component Tag Helpers để render nhiều Razor components.
• Components không thể được render động sau khi ứng dụng đã khởi động.
• Trong khi pages và views có thể sử dụng components, điều ngược lại không đúng. Components không thể sử dụng các tính năng dành riêng cho view và page, như partial views và sections. Để sử dụng logic từ partial view trong component, hãy tách logic partial view ra thành một component.
• Rendering server components từ trang HTML tĩnh không được hỗ trợ.

Component Tag Helper sau render component EmbeddedCounter trong page hoặc view trong ứng dụng Blazor phía server với ServerPrerendered:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(EmbeddedCounter)" render-mode="ServerPrerendered" />

Ví dụ trên giả sử component EmbeddedCounter nằm trong thư mục Components của ứng dụng. Placeholder {APP ASSEMBLY} là tên assembly của ứng dụng (ví dụ: @using BlazorSample.Components).

Component Tag Helper cũng có thể truyền parameters đến components. Xét component ColorfulCheckbox sau đây đặt màu sắc và kích thước nhãn checkbox.

Components/ColorfulCheckbox.razor:

<label style="font-size:@(Size)px;color:@Color">
    <input @bind="Value"
           id="survey" 
           name="blazor" 
           type="checkbox" />
    Enjoying Blazor?
</label>

@code {
    [Parameter]
    public bool Value { get; set; }

    [Parameter]
    public int Size { get; set; } = 8;

    [Parameter]
    public string? Color { get; set; }

    protected override void OnInitialized()
    {
        Size += 10;
    }
}

Component parameters Size (int) và Color (string) có thể được đặt bởi Component Tag Helper:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}.Components

...

<component type="typeof(ColorfulCheckbox)" render-mode="ServerPrerendered" 
    param-Size="14" param-Color="@("blue")" />

Ví dụ trên giả sử component ColorfulCheckbox nằm trong thư mục Components. Placeholder {APP ASSEMBLY} là tên assembly của ứng dụng (ví dụ: @using BlazorSample.Components).

HTML sau được render trong page hoặc view:

<label style="font-size:24px;color:blue">
    <input id="survey" name="blazor" type="checkbox">
    Enjoying Blazor?
</label>

Truyền chuỗi có dấu ngoặc kép yêu cầu một Razor expression rõ ràng, như được hiển thị cho param-Color trong ví dụ trên. Hành vi phân tích cú pháp Razor cho giá trị kiểu string không áp dụng cho thuộc tính param-* vì thuộc tính là kiểu object.

Tất cả các kiểu parameter đều được hỗ trợ, ngoại trừ:

• Generic parameters.
• Non-serializable parameters.
• Kế thừa trong collection parameters.
• Parameters có kiểu được định nghĩa bên ngoài ứng dụng Blazor WebAssembly hoặc trong một lazily-loaded assembly.
• Để nhận RenderFragment delegate cho child content (ví dụ: param-ChildContent="..."). Cho kịch bản này, chúng tôi khuyến nghị tạo Razor component (.razor) tham chiếu component bạn muốn render với child content bạn muốn truyền, sau đó gọi Razor component từ page hoặc view với Component Tag Helper.

Kiểu parameter phải JSON serializable, thường có nghĩa là kiểu phải có constructor mặc định và các thuộc tính có thể đặt được. Ví dụ, bạn có thể chỉ định giá trị cho Size và Color trong ví dụ trên vì các kiểu Size và Color là primitive types (int và string), được JSON serializer hỗ trợ.

Trong ví dụ sau, một đối tượng class được truyền đến component:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

    public int MyInt { get; set; } = 999;
    public string MyString { get; set; } = "Initial value";
}

Class phải có public parameterless constructor (constructor không tham số).

Components/ParameterComponent.razor:

<h2>ParameterComponent</h2>

<p>Int: @MyObject?.MyInt</p>
<p>String: @MyObject?.MyString</p>

@code
{
    [Parameter]
    public MyClass? MyObject { get; set; }
}

Pages/MyPage.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@using {APP ASSEMBLY}
@using {APP ASSEMBLY}.Components

...

@{
    var myObject = new MyClass();
    myObject.MyInt = 7;
    myObject.MyString = "Set by MyPage";
}

<component type="typeof(ParameterComponent)" render-mode="ServerPrerendered" 
    param-MyObject="@myObject" />

Ví dụ trên giả sử component ParameterComponent nằm trong thư mục Components của ứng dụng. Placeholder {APP ASSEMBLY} là tên assembly của ứng dụng (ví dụ: @using BlazorSample và @using BlazorSample.Components). MyClass nằm trong namespace của ứng dụng.