ASP.NET Core'da Bileşen Etiketi Yardımcısı

Bileşen Etiketi Yardımcısı, bir Razor bileşeni Razor Sayfalar sayfasında veya MVC görünümünde işler.

Ön koşullar

ASP.NET Core bileşenlerini ASP.NET Core Razor uygulamalarıyla tümleştirme makalesinin Sayfalarda veya görünümlerde yönlendirilemez bileşenleri kullanma bölümündeki yönergeleri izleyin.

Bileşen Etiketi Yardımcısı

Bir sayfadan veya görünümden bir bileşeni işlemek için Bileşen Etiketi Yardımcısı (<component> etiketi) kullanın.

RenderMode bileşenin şu şekilde yapılandırılıp yapılandırılmadığını yapılandırıyor:

• Sayfaya önceden girilir.
• Sayfada statik HTML olarak işlenir veya kullanıcı aracısından bir Blazor uygulamayı önyüklemek için gerekli bilgileri içeriyorsa.

Blazor WebAssembly uygulama işleme modları aşağıdaki tabloda gösterilmiştir.

İşleme Modu	Tanım
WebAssembly	Tarayıcıda yüklendiğinde etkileşimli bir Blazor WebAssembly bileşen eklemek için bir uygulama için bir işaretçi oluşturur. Bileşen önceden kaydedilmemiş. Bu seçenek, farklı sayfalarda farklı Blazor WebAssembly bileşenlerin işlenmesini kolaylaştırır.
WebAssemblyPrerendered	Bileşeni statik HTML'ye önceden ekler ve tarayıcıda yüklendiğinde bileşeni etkileşimli hale getirmek için daha sonra kullanmak üzere bir Blazor WebAssembly uygulama işaretçisi içerir.

İşleme modları aşağıdaki tabloda gösterilmiştir.

İşleme Modu	Tanım
ServerPrerendered	Bileşeni statik HTML'ye işler ve sunucu tarafı Blazor uygulaması için bir işaretçi içerir. Kullanıcı aracısı başlatıldığında, bu işaretçi bir Blazor uygulamayı önyüklemek için kullanılır.
Server	Sunucu tarafı Blazor uygulaması için bir işaretçi işler. Bileşenin çıkışı dahil değildir. Kullanıcı aracısı başlatıldığında, bu işaretçi bir Blazor uygulamayı önyüklemek için kullanılır.
Static	Bileşeni statik HTML'ye işler.

Ek özellikler şunlardır:

• Birden çok bileşeni işlemek için birden çok Razor Bileşen Etiketi Yardımcılarına izin verilir.
• Uygulama başlatıldıktan sonra bileşenler dinamik olarak işlenemez.
• Sayfalar ve görünümler bileşenleri kullanabilir ancak tersi doğru değildir. Bileşenler, kısmi görünümler ve bölümler gibi görünüme ve sayfaya özgü özellikleri kullanamaz. Bileşenin kısmi görünümünden mantık kullanmak için kısmi görünüm mantığını bir bileşen olarak dikkate alın.
• Statik HTML sayfasından sunucu bileşenlerinin işlenmesi desteklenmez.

Aşağıdaki Bileşen Etiketi Yardımcısı, bileşeni ile ServerPrerenderedsunucu tarafı Blazor uygulamasındaki bir sayfada veya görünümde işlerEmbeddedCounter:

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

...

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

Yukarıdaki örnekte, bileşenin EmbeddedCounter uygulamanın Components klasöründe olduğu varsayılır. Yer tutucu {APP ASSEMBLY} , uygulamanın derleme adıdır (örneğin, @using BlazorSample.Components).

Bileşen Etiketi Yardımcısı, bileşenlere de parametre geçirebilir. Onay kutusu etiketinin rengini ve boyutunu ayarlayan aşağıdaki ColorfulCheckbox bileşeni göz önünde bulundurun.

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;
    }
}

Size (int) ve Color (string) bileşen parametreleri, Bileşen Etiketi Yardımcısı tarafından ayarlanabilir:

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

...

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

Yukarıdaki örnekte, bileşenin ColorfulCheckbox klasörde olduğu varsayılır Components . Yer tutucu {APP ASSEMBLY} , uygulamanın derleme adıdır (örneğin, @using BlazorSample.Components).

Sayfada veya görünümde aşağıdaki HTML işlenir:

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

Tırnak içine alınmış bir dizenin geçirilmesi, önceki örnekte gösterildiği param-Color gibi açık Razor bir ifade gerektirir. Öznitelik Razor bir tür olduğundan tür string değeri için param-* ayrıştırma davranışı özniteliğe object uygulanmaz.

Aşağıdakiler dışında tüm parametre türleri desteklenir:

• Genel parametreler.
• Serileştirilebilir olmayan parametreler.
• Koleksiyon parametrelerinde devralma.
• Türü uygulamanın dışında Blazor WebAssembly veya lazily yüklü bir derleme içinde tanımlanan parametreler.
• Alt içerik için temsilci RenderFragment almak için (örneğin, param-ChildContent="..."). Bu senaryo için, geçirmek istediğiniz alt içerikle işlemek istediğiniz bileşene başvuran bir Razor bileşen (.razor) oluşturmanızı ve ardından Bileşeni Sayfadan veya Görünümden Bileşen Etiketi Yardımcısı ile çağırmanızı Razor öneririz.

Parametre türü ON serileştirilebilir olmalıdır JS; bu, genellikle türün varsayılan oluşturucu ve ayarlanabilir özelliklere sahip olması gerektiği anlamına gelir. Örneğin, ve türleri SizeColor ON seri hale getiricisi tarafından JSdesteklenen ilkel türler (int ve string) olduğundan, önceki örnekte ve için SizeColor bir değer belirtebilirsiniz.

Aşağıdaki örnekte, bileşene bir sınıf nesnesi geçirilir:

MyClass.cs:

public class MyClass
{
    public MyClass()
    {
    }

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

Sınıfın genel parametresiz oluşturucusunun olması gerekir.

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" />

Yukarıdaki örnekte, bileşenin ParameterComponent uygulamanın Components klasöründe olduğu varsayılır. Yer tutucu {APP ASSEMBLY} , uygulamanın derleme adıdır (örneğin, @using BlazorSample ve @using BlazorSample.Components). MyClass uygulamanın ad alanındadır.

Ek kaynaklar

• ASP.NET Core'da Bileşen Durum Etiketi Yardımcısı'nın Kalıcı Hale Getirildi
• Prerender ASP.NET Core Razor bileşenleri
• ComponentTagHelper
• ASP.NET Core’da Etiket Yardımcıları
• ASP.NET Core Razor bileşenleri