ASP.NET Core Blazor şablonlu bileşenleri

Tarafından Robert Haken

Bu makalede, şablonlu bileşenlerin bir veya daha fazla kullanıcı arabirimi şablonunu parametre olarak nasıl kabul ettiği açıklanır ve bu şablon bileşenin işleme mantığının bir parçası olarak kullanılabilir.

Şablonlu bileşenler

Şablonlu bileşenler, bir veya daha fazla kullanıcı arabirimi şablonunu parametre olarak alan ve bileşenin işleme mantığında kullanılabilecek bileşenlerdir. Şablonlu bileşenleri kullanarak, daha yeniden kullanılabilir daha üst düzey bileşenler oluşturabilirsiniz. Örnekler şunları içerir:

• Kullanıcının tablonun üst bilgisi, satırları ve alt bilgisi için şablonlar belirtmesine olanak tanıyan tablo bileşeni.
• Kullanıcının listedeki öğeleri işlemek için şablon belirtmesine olanak tanıyan liste bileşeni.
• Kullanıcının başlangıç içeriği ve gezinti bağlantıları için şablon belirtmesine olanak tanıyan bir gezinti çubuğu bileşeni.

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

Not

hakkında RenderFragmentdaha fazla bilgi için bkz . ASP.NET Core Razor bileşenleri.

Şablonlu bileşenler genellikle aşağıdaki TemplatedNavBar bileşenin (TemplatedNavBar.razor) gösterdiği gibi genel olarak yazılır. Aşağıdaki örnekteki genel tür (<T>), değerleri işlemek IReadOnlyList<T> için kullanılır. Bu örnekte, bir evcil hayvan ayrıntı bileşenine bağlantılar içeren bir gezinti çubuğu görüntüleyen bir bileşenin evcil hayvan listesidir.

TemplatedNavBar.razor:

@typeparam TItem

<nav class="navbar navbar-expand navbar-light bg-light">
    <div class="container justify-content-start">
        @StartContent
        <div class="navbar-nav">
            @foreach (var item in Items)
            {
                @ItemTemplate(item)
            }
        </div>
    </div>
</nav>

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

    [Parameter, EditorRequired]
    public RenderFragment<TItem> ItemTemplate { get; set; } = default!;

    [Parameter, EditorRequired]
    public IReadOnlyList<TItem> Items { get; set; } = default!;
}

Şablonlu bir bileşen kullanılırken, şablon parametreleri, parametrelerin adlarıyla eşleşen alt öğeler kullanılarak belirtilebilir. Aşağıdaki örnekte <StartContent>...</StartContent> ve <ItemTemplate>...</ItemTemplate> bileşenin ve ItemTemplate bileşenlerinin StartContent şablonlarını TemplatedNavBar sağlayınRenderFragment<TValue>.

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

Pets1.razor:

@page "/pets-1"

<PageTitle>Pets 1</PageTitle>

<h1>Pets Example 1</h1>

<TemplatedNavBar Items="pets" Context="pet">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-1")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

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

Alternatif olarak, alt öğedeki özniteliğini Context RenderFragment<TValue> kullanarak parametre adını değiştirebilirsiniz. Aşağıdaki örnekte , Context yerine TemplatedNavBarüzerinde ItemTemplate ayarlanmıştır.

Pets2.razor:

@page "/pets-2"

<PageTitle>Pets 2</PageTitle>

<h1>Pets Example 2</h1>

<TemplatedNavBar Items="pets">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate Context="pet">
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-2")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

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

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

Pets3.razor:

@page "/pets-3"

<PageTitle>Pets 3</PageTitle>

<h1>Pets Example 3</h1>

<TemplatedNavBar Items="pets">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{context.PetId}?ReturnUrl=%2Fpets-3")" class="nav-link">
            @context.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

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

Genel türdeki bileşenler kullanılırken, mümkünse tür parametresi çıkarılır. Ancak, türü, önceki örnekte yer alan tür parametresiyle TItem eşleşen bir ada sahip bir öznitelikle açıkça belirtebilirsiniz:

Pets4.razor:

@page "/pets-4"

<PageTitle>Pets 4</PageTitle>

<h1>Pets Example 4</h1>

<TemplatedNavBar Items="pets" Context="pet" TItem="Pet">
    <StartContent>
        <a href="/" class="navbar-brand">PetsApp</a>
    </StartContent>
    <ItemTemplate>
        <NavLink href="@($"/pet-detail/{pet.PetId}?ReturnUrl=%2Fpets-4")" class="nav-link">
            @pet.Name
        </NavLink>
    </ItemTemplate>
</TemplatedNavBar>

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

Bileşeninde TemplatedNavBar (TemplatedNavBar.razor) sağlanan örnek, koleksiyonun Items ilk işlemeden sonra değişmediğini veya değişirse içinde kullanılan ItemTemplate bileşenlerin/öğelerin durumunu korumanın gerekli olmadığını varsayar. Bu tür kullanımın beklenemediği şablonlu bileşenler için İlişkiyi @key koruma bölümüne bakın.

ile ilişkileri koruma @key

Şablonlu bileşenler genellikle tablo veya liste gibi öğe koleksiyonlarını işlemek için kullanılır. Bu tür genel senaryolarda, kullanıcının öğe şablonu tanımında durum bilgisi olan bileşenlerden/öğelerden kaçınacağını veya koleksiyonda ek değişiklikler Items olmayacağı varsayılamaz. Bu tür şablonlu bileşenler için yönerge özniteliğiyle @key ilişkilerin korunması gerekir.

Not

yönerge özniteliği hakkında @key daha fazla bilgi için bkz . ASP.NET Core'da Blazoröğe, bileşen ve model ilişkilerini koruma.

Aşağıdaki TableTemplate bileşen (TableTemplate.razor), ile @keyilişkileri koruyan şablonlu bir bileşeni gösterir.

TableTemplate.razor:

@typeparam TItem

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

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

    [Parameter, EditorRequired]
    public RenderFragment<TItem> RowTemplate { get; set; } = default!;

    [Parameter, EditorRequired]
    public IReadOnlyList<TItem> Items { get; set; } = default!;
}

Model ilişkilerini korumak için anahtarlama verilerinin önemini gösteren aşağıdaki Pets5 bileşeni (Pets5.razor ) göz önünde bulundurun. Bileşende, bir evcil hayvan OnAfterRenderAsync eklemenin her yinelemesi, bileşenin yeniden yenilenmesine TableTemplate neden olurBlazor.

Pets5.razor:

@page "/pets-5"

<PageTitle>Pets 5</PageTitle>

<h1>Pets Example 5</h1>

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


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

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        // Insert new pet every 5 seconds
        if (pets.Count < 10)
        {
            await Task.Delay(5000);
            pets.Insert(0, new Pet() { PetId = pets.Count + 1, Name = "<new pet>" });
            StateHasChanged();
        }
    }

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

Bu tanıtım şunları yapmanızı sağlar:

• İşlenen birkaç tablo satırı arasından bir <input> seçin.
• Evcil hayvan koleksiyonu otomatik olarak büyüdükçe sayfanın odak davranışını inceleyin.

Bileşende TableTemplate yönerge özniteliği kullanılmadan@key, sayfanın odağı tablonun aynı dizin konumunda (satır) kalır ve bir evcil hayvan eklendiğinde odağın kaymasına neden olur. Bunu göstermek için yönerge özniteliğini ve değerini kaldırın @key , uygulamayı yeniden başlatın ve öğeler eklendikçe bir alan değerini değiştirmeyi deneme.

Ek kaynaklar

• ASP.NET Temel Blazor performans en iyi yöntemleri
• ASP.NET Core'da öğe, bileşen ve model ilişkilerini koruma Blazor
• Blazorörnekler GitHub deposu () (dotnet/blazor-samplesnasıl indirilir)