ASP.NET Core Blazor şablonlu bileşenler

  • Makale
  • Okumak için 5 dakika

Şablonlu bileşenler, bir veya daha fazla UI şablonunu parametre olarak kabul eden bileşenlerdir, daha sonra bileşen işleme mantığının bir parçası olarak kullanılabilir. Şablonlu bileşenler, normal bileşenlerden daha yeniden kullanılabilir olan üst düzey bileşenleri yazmanıza izin verir. Birkaç örnek şunlardır:

  • Kullanıcının tablo üst bilgisi, satırları ve altbilgisi için şablon belirtmesini sağlayan tablo bileşeni.
  • Bir kullanıcının bir listedeki öğeleri işlemek için şablon belirlemesine izin veren bir liste bileşenidir.

Şablonlu bir bileşen, veya türünde bir veya daha fazla bileşen parametresi belirtilerek RenderFragment tanımlanır RenderFragment<TValue> . Bir işleme parçası, işlenecek Kullanıcı arabiriminin bir kesimini temsil eder. RenderFragment<TValue> işleme parçası çağrıldığında belirtilebildiği bir tür parametresi alır.

Genellikle, aşağıdaki bileşenin gösterdiği gibi şablonlu bileşenler genel olarak türdedir TableTemplate . Bu örnekteki genel tür, <T> değerleri işlemek için kullanılır IReadOnlyList<T> . Bu durumda, bir pets tablosu görüntüleyen bir bileşen içindeki bir evcil hayvan satırı dizisidir.

Shared/TableTemplate.razor:

@typeparam TItem
@using System.Diagnostics.CodeAnalysis

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            if (RowTemplate is not null)
            {
                <tr>@RowTemplate(item)</tr>
            }
        }
    </tbody>
</table>

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

    [Parameter]
    public RenderFragment<TItem>? RowTemplate { get; set; }

    [Parameter, AllowNull]
    public IReadOnlyList<TItem> Items { get; set; }
}

Şablonlu bir bileşen kullanırken, şablon parametreleri parametrelerin adlarıyla eşleşen alt öğeler kullanılarak belirtilebilir. Aşağıdaki örnekte <TableHeader>...</TableHeader> ve <RowTemplate>...<RowTemplate> RenderFragment<TValue> bileşeni için ve bileşen için şablon TableHeader sağlayın RowTemplate TableTemplate .

ContextÖrtük alt içerik için içerik parametre adını belirtmek istediğinizde (herhangi bir sarmalama alt öğesi olmadan), bileşen öğesinde özniteliğini belirtin. Aşağıdaki örnekte, Context özniteliği TableTemplate öğesinde görünür ve tüm RenderFragment<TValue> şablon parametreleri için geçerlidir.

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Alternatif olarak, Context alt öğe üzerindeki özniteliğini kullanarak parametre adını değiştirebilirsiniz RenderFragment<TValue> . Aşağıdaki örnekte,, Context yerine üzerinde ayarlanır RowTemplate TableTemplate :

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Türündeki bileşen bağımsız değişkenleri RenderFragment<TValue> adlı örtülü parametreye sahiptir context , bu kullanılabilir. Aşağıdaki örnekte, Context ayarlı değildir. @context.{PROPERTY} şablona Evcil hayvan değerleri sağlar; burada {PROPERTY} bir Pet özelliktir:

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Genel olarak yazılmış bileşenleri kullanırken tür parametresi mümkünse algılanır. Ancak, türü, önceki örnekte bulunan tür parametresiyle eşleşen bir ada sahip bir özniteliğiyle açıkça belirtebilirsiniz TItem :

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</h1>

<TableTemplate Items="pets" TItem="Pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string? Name { get; set; }
    }
}

Genel türleri üst bileşenlere göre çıkarçıkar

Bir üst bileşen bir tür parametresini, [CascadingTypeParameter] özniteliğinikullanarak alt öğeleri olan bir ada göre basamaklı olarak değiştirebilir. Bu öznitelik, bir genel tür çıkarımını belirtilen tür parametresini aynı ada sahip bir tür parametresine sahip alt dosyalarla otomatik olarak kullanmasına izin verir.

Örneğin, aşağıdaki Chart bileşen stok fiyatı verilerini alır ve TLineData alt bileşenleri olarak adlandırılan genel bir tür parametresini basamaklar.

Shared/Chart.razor:

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

...

@code {
    [Parameter]
    public IEnumerable<TLineData> Data { get; set; }

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

Shared/Line.razor:

@typeparam TLineData

...

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

    [Parameter]
    public decimal Value { get; set; }
}

ChartBileşen kullanıldığında, TLineData grafiğin her bileşeni için belirtilmez Line .

Pages/StockPriceHistory.razor:

@page "/stock-price-history"

<Chart Data="stockPriceHistory.GroupBy(x => x.Date)">
    <Line Title="Open" Value="day => day.Values.First()" />
    <Line Title="High" Value="day => day.Values.Max()" />
    <Line Title="Low" Value="day => day.Values.Min()" />
    <Line Title="Close" Value="day => day.Values.Last()" />
</Chart>

Not

RazorVisual Studio Code ' deki destek bu özelliği destekleyecek şekilde güncelleştirilmemiş, bu nedenle proje doğru şekilde derlemeseler bile yanlış hatalar alabilirsiniz. Bu, yakında sunulacak bir araç sürümünde değinilecek.

@attribute [CascadingTypeParameter(...)]Bir bileşene ekleme yaparak, belirtilen genel tür bağımsız değişkeni, alt öğeleri tarafından otomatik olarak kullanılır:

  • Aynı belgede bileşen için alt içerik olarak iç içe geçmiş .razor .
  • @typeparamAynı zamanda aynı ada sahip bir de bildirin.
  • Tür parametresi için başka bir değer sağlanmadı veya çıkarsanamadı. Başka bir değer sağlanırsa veya çıkarsanmışsa, basamaklı genel türe göre önceliklidir.

Basamaklı bir tür parametresi alınırken, bileşenler, eşleşen ada sahip olan en yakın üst öğesinden parametre değerini elde eder CascadingTypeParameterAttribute . Basamaklı genel tür parametreleri belirli bir alt ağaç içinde geçersiz kılınır.

Eşleştirme yalnızca ad ile gerçekleştirilir. Bu nedenle, genel bir ada sahip basamaklı bir genel tür parametresinin, örneğin veya ' ı öngörmenizi öneririz T TItem . Bir geliştirici bir tür parametresini basamaklandırtığında, bu, adının benzersiz bir şekilde, ilgisiz bileşenlerden diğer basamaklı tür parametreleriyle çakışmayacak kadar benzersiz olduğunu taahhüt eder.

Tür kısıtlamalarına sahip genel türler where desteklenir:

@typeparam TEntity where TEntity : IEntity

Daha fazla bilgi için aşağıdaki makaleleri inceleyin:

Ek kaynaklar

Şablonlu bileşenler, bir veya daha fazla UI şablonunu parametre olarak kabul eden bileşenlerdir, daha sonra bileşen işleme mantığının bir parçası olarak kullanılabilir. Şablonlu bileşenler, normal bileşenlerden daha yeniden kullanılabilir olan üst düzey bileşenleri yazmanıza izin verir. Birkaç örnek şunlardır:

  • Kullanıcının tablo üst bilgisi, satırları ve altbilgisi için şablon belirtmesini sağlayan tablo bileşeni.
  • Bir kullanıcının bir listedeki öğeleri işlemek için şablon belirlemesine izin veren bir liste bileşenidir.

Şablonlu bir bileşen, veya türünde bir veya daha fazla bileşen parametresi belirtilerek RenderFragment tanımlanır RenderFragment<TValue> . Bir işleme parçası, işlenecek Kullanıcı arabiriminin bir kesimini temsil eder. RenderFragment<TValue> işleme parçası çağrıldığında belirtilebildiği bir tür parametresi alır.

Genellikle, aşağıdaki bileşenin gösterdiği gibi şablonlu bileşenler genel olarak türdedir TableTemplate . Bu örnekteki genel tür, <T> değerleri işlemek için kullanılır IReadOnlyList<T> . Bu durumda, bir pets tablosu görüntüleyen bir bileşen içindeki bir evcil hayvan satırı dizisidir.

Shared/TableTemplate.razor:

@typeparam TItem

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

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

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

Şablonlu bir bileşen kullanırken, şablon parametreleri parametrelerin adlarıyla eşleşen alt öğeler kullanılarak belirtilebilir. Aşağıdaki örnekte <TableHeader>...</TableHeader> ve <RowTemplate>...<RowTemplate> RenderFragment<TValue> bileşeni için ve bileşen için şablon TableHeader sağlayın RowTemplate TableTemplate .

ContextÖrtük alt içerik için içerik parametre adını belirtmek istediğinizde (herhangi bir sarmalama alt öğesi olmadan), bileşen öğesinde özniteliğini belirtin. Aşağıdaki örnekte, Context özniteliği TableTemplate öğesinde görünür ve tüm RenderFragment<TValue> şablon parametreleri için geçerlidir.

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Alternatif olarak, Context alt öğe üzerindeki özniteliğini kullanarak parametre adını değiştirebilirsiniz RenderFragment<TValue> . Aşağıdaki örnekte,, Context yerine üzerinde ayarlanır RowTemplate TableTemplate :

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Türündeki bileşen bağımsız değişkenleri RenderFragment<TValue> adlı örtülü parametreye sahiptir context , bu kullanılabilir. Aşağıdaki örnekte, Context ayarlı değildir. @context.{PROPERTY} şablona Evcil hayvan değerleri sağlar; burada {PROPERTY} bir Pet özelliktir:

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Genel olarak yazılmış bileşenleri kullanırken tür parametresi mümkünse algılanır. Ancak, türü, önceki örnekte bulunan tür parametresiyle eşleşen bir ada sahip bir özniteliğiyle açıkça belirtebilirsiniz TItem :

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</h1>

<TableTemplate Items="pets" TItem="Pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new()
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Ek kaynaklar

Şablonlu bileşenler, bir veya daha fazla UI şablonunu parametre olarak kabul eden bileşenlerdir, daha sonra bileşen işleme mantığının bir parçası olarak kullanılabilir. Şablonlu bileşenler, normal bileşenlerden daha yeniden kullanılabilir olan üst düzey bileşenleri yazmanıza izin verir. Birkaç örnek şunlardır:

  • Kullanıcının tablo üst bilgisi, satırları ve altbilgisi için şablon belirtmesini sağlayan tablo bileşeni.
  • Bir kullanıcının bir listedeki öğeleri işlemek için şablon belirlemesine izin veren bir liste bileşenidir.

Şablonlu bir bileşen, veya türünde bir veya daha fazla bileşen parametresi belirtilerek RenderFragment tanımlanır RenderFragment<TValue> . Bir işleme parçası, işlenecek Kullanıcı arabiriminin bir kesimini temsil eder. RenderFragment<TValue> işleme parçası çağrıldığında belirtilebildiği bir tür parametresi alır.

Genellikle, aşağıdaki bileşenin gösterdiği gibi şablonlu bileşenler genel olarak türdedir TableTemplate . Bu örnekteki genel tür, <T> değerleri işlemek için kullanılır IReadOnlyList<T> . Bu durumda, bir pets tablosu görüntüleyen bir bileşen içindeki bir evcil hayvan satırı dizisidir.

Shared/TableTemplate.razor:

@typeparam TItem

<table class="table">
    <thead>
        <tr>@TableHeader</tr>
    </thead>
    <tbody>
        @foreach (var item in Items)
        {
            <tr>@RowTemplate(item)</tr>
        }
    </tbody>
</table>

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

    [Parameter]
    public RenderFragment<TItem> RowTemplate { get; set; }

    [Parameter]
    public IReadOnlyList<TItem> Items { get; set; }
}

Şablonlu bir bileşen kullanırken, şablon parametreleri parametrelerin adlarıyla eşleşen alt öğeler kullanılarak belirtilebilir. Aşağıdaki örnekte <TableHeader>...</TableHeader> ve <RowTemplate>...<RowTemplate> RenderFragment<TValue> bileşeni için ve bileşen için şablon TableHeader sağlayın RowTemplate TableTemplate .

ContextÖrtük alt içerik için içerik parametre adını belirtmek istediğinizde (herhangi bir sarmalama alt öğesi olmadan), bileşen öğesinde özniteliğini belirtin. Aşağıdaki örnekte, Context özniteliği TableTemplate öğesinde görünür ve tüm RenderFragment<TValue> şablon parametreleri için geçerlidir.

Pages/Pets1.razor:

@page "/pets1"

<h1>Pets</h1>

<TableTemplate Items="pets" Context="pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Alternatif olarak, Context alt öğe üzerindeki özniteliğini kullanarak parametre adını değiştirebilirsiniz RenderFragment<TValue> . Aşağıdaki örnekte,, Context yerine üzerinde ayarlanır RowTemplate TableTemplate :

Pages/Pets2.razor:

@page "/pets2"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate Context="pet">
        <td>@pet.PetId</td>
        <td>@pet.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Türündeki bileşen bağımsız değişkenleri RenderFragment<TValue> adlı örtülü parametreye sahiptir context , bu kullanılabilir. Aşağıdaki örnekte, Context ayarlı değildir. @context.{PROPERTY} şablona Evcil hayvan değerleri sağlar; burada {PROPERTY} bir Pet özelliktir:

Pages/Pets3.razor:

@page "/pets3"

<h1>Pets</h1>

<TableTemplate Items="pets">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Genel olarak yazılmış bileşenleri kullanırken tür parametresi mümkünse algılanır. Ancak, türü, önceki örnekte bulunan tür parametresiyle eşleşen bir ada sahip bir özniteliğiyle açıkça belirtebilirsiniz TItem :

Pages/Pets4.razor:

@page "/pets4"

<h1>Pets</h1>

<TableTemplate Items="pets" TItem="Pet">
    <TableHeader>
        <th>ID</th>
        <th>Name</th>
    </TableHeader>
    <RowTemplate>
        <td>@context.PetId</td>
        <td>@context.Name</td>
    </RowTemplate>
</TableTemplate>

@code {
    private List<Pet> pets = new List<Pet>
    {
        new Pet { PetId = 2, Name = "Mr. Bigglesworth" },
        new Pet { PetId = 4, Name = "Salem Saberhagen" },
        new Pet { PetId = 7, Name = "K-9" }
    };

    private class Pet
    {
        public int PetId { get; set; }
        public string Name { get; set; }
    }
}

Ek kaynaklar