ASP.NET Core Razor bileşeni genel tür desteği

Bu makalede bileşenlerde Razor genel tür desteği açıklanmaktadır.

Genel türlerde yeniyseniz, bu makaleyi okumadan önce genel türlerin kullanımıyla ilgili genel yönergeler için genel sınıflar ve yöntemler (C# Kılavuzu) konusuna bakın.

Bu makaledeki örnek kod yalnızca örnek uygulamalarda en son .NET sürümü Blazor için kullanılabilir.

Genel tür parametresi desteği

@typeparam yönergesi, oluşturulan bileşen sınıfı için bir genel tür parametresi bildirir:

@typeparam TItem

where türü kısıtlamalarıyla C# söz dizimi desteklenir:

@typeparam TEntity where TEntity : IEntity

Aşağıdaki örnekte, ListItems1 bileşen genel olarak, koleksiyonun ExampleList türünü temsil eden olarak TExampleyazıldı.

ListItems1.razor:

@typeparam TExample

<h2>List Items 1</h2>

@if (ExampleList is not null)
{
    <ul style="color:@Color">
        @foreach (var item in ExampleList)
        {
            <li>@item</li>
        }
    </ul>

    <p>
        Type of <code>TExample</code>: @typeof(TExample)
    </p>
}

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

    [Parameter]
    public IEnumerable<TExample>? ExampleList { get; set; }
}

Aşağıdaki bileşen iki ListItems1 bileşeni işler:

• Her bileşenin ExampleList parametresine dize veya tamsayı verileri atanır.
• Her bileşenin tür parametresi (TExample) için, atanan verilerin türüyle eşleşen string veya int türü ayarlanır.

Generics1.razor:

@page "/generics-1"

<PageTitle>Generics 1</PageTitle>

<h1>Generic Type Example 1</h1>

<ListItems1 Color="blue"
            ExampleList="@(new List<string> { "Item 1", "Item 2" })"
            TExample="string" />

<ListItems1 Color="red"
            ExampleList="@(new List<int> { 1, 2 })"
            TExample="int" />

Daha fazla bilgi için bkz. ASP.NET Core için Razor söz dizimi başvurusu. Şablonlu bileşenlerle bir genel tür örneği için bkz. ASP.NET Core Blazor şablonlu bileşenleri.

Basamaklı genel tür desteği

Bir üst bileşen [CascadingTypeParameter] özniteliğini kullanarak tür parametresini adıyla alt öğelere basamaklandırabilir. Bu öznitelik, belirtilen tür parametresini aynı adda bir tür parametresi olan alt öğelerle otomatik olarak kullanmak için genel türü çıkarsamaya olanak tanır.

Bileşene @attribute [CascadingTypeParameter(...)] eklenerek, belirtilen genel tür bağımsız değişkeni şu alt öğelerle otomatik olarak kullanılır:

• Aynı .razor belgesinde bileşen için alt içerik olarak iç içe yerleştirilmiş alt öğeler.
• Yine tam olarak aynı adla bir @typeparam bildiren alt öğeler.
• Tür parametresi için açıkça sağlanmış veya örtük olarak çıkarsanmış başka bir değeri olmayan alt öğeler. Başka bir değer sağlanır veya çıkarsanırsa, bu değer basamaklı genel türden daha önceliklidir.

Basamaklı tür parametresi alınırken, bileşenler parametre değerini eşleşen ada sahip bir [CascadingTypeParameter] özniteliği olan en yakın atadan alır. Basamaklı genel tür parametreleri belirli bir alt ağaç içinde geçersiz kılınır.

Yalnızca ada göre eşleştirme yapılır. Bu nedenle örneğin T veya TItem gibi genel bir adı olan basamaklı genel tür parametrelerinden kaçınılmasını öneririz. Geliştirici bir tür parametresini basamaklandırmayı kabul ediyorsa, adının ilgili olmayan bileşenlerdeki diğer basamaklı tür parametreleriyle çakışmayacak kadar benzersiz olmasını sağlamayı örtük olarak kabul ediyor demektir.

Genel türler, aşağıdaki iki alt bölümde gösterilen üst (üst) bileşenler için aşağıdaki yaklaşımlardan biriyle alt bileşenlere basamaklı olarak eklenebilir:

• Basamaklı genel türü açıkça ayarlayın.
• Basamaklı genel türün çıkarımını yapın.

Aşağıdaki alt bölümler, aşağıdaki ListDisplay1 bileşeni kullanarak önceki yaklaşımlara örnekler sağlar. Bileşen, genel olarak olarak TExampleyazılan liste verilerini alır ve işler. Her örneğini ListDisplay1 öne çıkarmak için, listenin rengini ek bir bileşen parametresi denetler.

ListDisplay1.razor:

@typeparam TExample

@if (ExampleList is not null)
{
    <ul style="color:@Color">
        @foreach (var item in ExampleList)
        {
            <li>@item</li>
        }
    </ul>
}

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

    [Parameter]
    public IEnumerable<TExample>? ExampleList { get; set; }
}

Üst bileşenleri temel alan açık genel türler

Bu bölümdeki tanıtım, TExample için türü açık olarak basamaklandırır.

Not

Bu bölüm, Basamaklı genel tür desteği bölümündeki önceki ListDisplay1 bileşeni kullanır.

Aşağıdaki ListItems2 bileşeni verileri alır ve TExample adlı genel tür parametresini alt bileşenlerine basamaklandırır. Yakındaki üst bileşende, önceki ListDisplay1 bileşeniyle liste verilerini görüntülemek için ListItems2 bileşeni kullanılır.

ListItems2.razor:

@attribute [CascadingTypeParameter(nameof(TExample))]
@typeparam TExample

<h2>List Items 2</h2>

@ChildContent

<p>
    Type of <code>TExample</code>: @typeof(TExample)
</p>

@code {
    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Aşağıdaki üst bileşen, alt bileşenlere basamaklı türleri ( ) belirten iki ListItems2 bileşenin ListItems2 alt içeriğini (RenderFragmentTExample) ayarlar. ListDisplay1 bileşenleri örnekte gösterilen liste öğesi verileriyle işlenir. Dize verileri ilk ListItems2 bileşeniyle ve tamsayı verileri de ikinci ListItems2 bileşeniyle kullanılır.

Generics2.razor:

@page "/generics-2"

<PageTitle>Generics 2</PageTitle>

<h1>Generic Type Example 2</h1>

<ListItems2 TExample="string">
    <ListDisplay1 Color="blue" 
                  ExampleList="@(new List<string> { "Item 1", "Item 2" })" />
    <ListDisplay1 Color="red" 
                  ExampleList="@(new List<string> { "Item 3", "Item 4" })" />
</ListItems2>

<ListItems2 TExample="int">
    <ListDisplay1 Color="blue" 
                  ExampleList="@(new List<int> { 1, 2 })" />
    <ListDisplay1 Color="red" 
                  ExampleList="@(new List<int> { 3, 4 })" />
</ListItems2>

Türün açıkça belirtilmesi, aşağıdaki tanıtımda gösterildiği gibi alt bileşenlere veri sağlamak için basamaklı değerlerin ve parametrelerin kullanımına da olanak tanır.

ListDisplay2.razor:

@typeparam TExample

@if (ExampleList is not null)
{
    <ul style="color:@Color">
        @foreach (var item in ExampleList)
        {
            <li>@item</li>
        }
    </ul>
}

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

    [CascadingParameter]
    protected IEnumerable<TExample>? ExampleList { get; set; }
}

ListItems3.razor:

@attribute [CascadingTypeParameter(nameof(TExample))]
@typeparam TExample

<h2>List Items 3</h2>

@ChildContent

@if (ExampleList is not null)
{
    <ul style="color:green">
        @foreach (var item in ExampleList)
        {
            <li>@item</li>
        }
    </ul>

    <p>
        Type of <code>TExample</code>: @typeof(TExample)
    </p>
}

@code {
    [CascadingParameter]
    protected IEnumerable<TExample>? ExampleList { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Aşağıdaki örnekte yer alan veriler basamaklandırılırken bileşenine türün sağlanması gerekir.

Generics3.razor:

@page "/generics-3"

<PageTitle>Generics 3</PageTitle>

<h1>Generic Type Example 3</h1>

<CascadingValue Value="stringData">
    <ListItems3 TExample="string">
        <ListDisplay2 Color="blue" />
        <ListDisplay2 Color="red" />
    </ListItems3>
</CascadingValue>

<CascadingValue Value="integerData">
    <ListItems3 TExample="int">
        <ListDisplay2 Color="blue" />
        <ListDisplay2 Color="red" />
    </ListItems3>
</CascadingValue>

@code {
    private List<string> stringData = new() { "Item 1", "Item 2" };
    private List<int> integerData = new() { 1, 2 };
}

Birden çok genel tür basamaklandırıldığında, kümedeki tüm genel türlerin değerleri geçirilmelidir. Aşağıdaki örnekte TItem, TValue ve TEditGridColumn genel türleridir ama GridColumn türünü koyan üst bileşen TItem türünü belirtmez:

<GridColumn TValue="string" TEdit="TextEdit" />

Yukarıdaki örnek GridColumn bileşeninde TItem tür parametresinin eksik olduğunu belirten bir derleme zamanı hatası oluşturur. Geçerli kodda tüm türler belirtilir:

<GridColumn TValue="string" TEdit="TextEdit" TItem="User" />

Üst bileşenler temelinde genel türleri çıkarsama

Bu bölümdeki tanıtımda TExample için çıkarsanmış bir tür basamaklandırılır.

Not

Bu bölüm, Basamaklı genel tür desteği bölümündeki bileşeni kullanırListDisplay.

ListItems4.razor:

@attribute [CascadingTypeParameter(nameof(TExample))]
@typeparam TExample

<h2>List Items 4</h2>

@ChildContent

@if (ExampleList is not null)
{
    <ul style="color:green">
        @foreach (var item in ExampleList)
        {
            <li>@item</li>
        }
    </ul>

    <p>
        Type of <code>TExample</code>: @typeof(TExample)
    </p>
}

@code {
    [Parameter]
    public IEnumerable<TExample>? ExampleList { get; set; }

    [Parameter]
    public RenderFragment? ChildContent { get; set; }
}

Çıkarsanmış basamaklı türleri olan aşağıdaki bileşeni görüntülenmek üzere farklı veriler sağlar.

Generics4.razor:

@page "/generics-4"

<PageTitle>Generics 4</PageTitle>

<h1>Generic Type Example 4</h1>

<ListItems4 ExampleList="@(new List<string> { "Item 5", "Item 6" })">
    <ListDisplay1 Color="blue" 
                  ExampleList="@(new List<string> { "Item 1", "Item 2" })" />
    <ListDisplay1 Color="red" 
                  ExampleList="@(new List<string> { "Item 3", "Item 4" })" />
</ListItems4>

<ListItems4 ExampleList="@(new List<int> { 5, 6 })">
    <ListDisplay1 Color="blue" 
                  ExampleList="@(new List<int> { 1, 2 })" />
    <ListDisplay1 Color="red" 
                  ExampleList="@(new List<int> { 3, 4 })" />
</ListItems4>

Çıkarsanmış basamaklı türleri olan aşağıdaki bileşeni görüntülenmek üzere aynı verileri sağlar. Aşağıdaki örnek verileri doğrudan bileşenlere atar.

Generics5.razor:

@page "/generics-5"

<PageTitle>Generics 5</PageTitle>

<h1>Generic Type Example 5</h1>

<ListItems4 ExampleList="stringData">
    <ListDisplay1 Color="blue" ExampleList="stringData" />
    <ListDisplay1 Color="red" ExampleList="stringData" />
</ListItems4>

<ListItems4 ExampleList="integerData">
    <ListDisplay1 Color="blue" ExampleList="integerData" />
    <ListDisplay1 Color="red" ExampleList="integerData" />
</ListItems4>

@code {
    private List<string> stringData = new() { "Item 1", "Item 2" };
    private List<int> integerData = new() { 1, 2 };
}