ASP.NET Core-sablonalapú Blazor összetevők

Készítette: Robert Haken

Ez a cikk azt ismerteti, hogy a sablonalapú összetevők hogyan fogadhatnak el egy vagy több felhasználói felületi sablont paraméterként, amely aztán az összetevő renderelési logikájának részeként használható.

Sablon-alapú összetevők

A sablonos összetevők olyan összetevők, amelyek egy vagy több felhasználói felületi sablont kapnak paraméterekként, amelyek az összetevő renderelési logikájában használhatók. Sablonok használatával létrehozhat olyan magasabb szintű összetevőket, amelyek könnyebben újrafelhasználhatók. Ide sorolhatóak például a következők:

• Táblaösszetevő, amely lehetővé teszi, hogy a felhasználó sablonokat adjon meg a táblázat fejlécéhez, soraihoz és élőlábához.
• Listaösszetevő, amely lehetővé teszi a felhasználó számára, hogy sablont adjon meg a lista elemeinek megjelenítéséhez.
• Egy navigációs sáv-összetevő, amely lehetővé teszi a felhasználó számára, hogy sablont adjon meg a tartalom indításához és a navigációs hivatkozásokhoz.

A sablonalapú összetevők egy vagy több típus RenderFragment - vagy RenderFragment<TValue>összetevőparaméter megadásával határozhatók meg. A renderelési töredék a renderelendő felhasználói felület egy szegmensét jelöli. RenderFragment<TValue> egy típusparamétert használ, amely a renderelési töredék meghívásakor adható meg.

Megjegyzés:

További információkért a RenderFragment-ról lásd a ASP.NET Core Razor összetevők.

A sablonalapú összetevők gyakran általánosan vannak begépelve, ahogy az alábbi TemplatedNavBar összetevő (TemplatedNavBar.razor) is mutatja. Az alábbi példában szereplő általános típus (<T>) a IReadOnlyList<T> értékek megjelenítésére szolgál, ami ebben az esetben egy navigációs sávot megjelenítő összetevőt jelent, amely hivatkozásokat tartalmaz egy kisállat-részlet összetevőre.

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

Sablonalapú összetevő használatakor a sablonparaméterek a paraméterek nevével egyező gyermekelemekkel adhatók meg. Az alábbi példában a <StartContent>...</StartContent> és a <ItemTemplate>...</ItemTemplate>RenderFragment<TValue> sablonokat biztosítanak a StartContent és a ItemTemplate a TemplatedNavBar összetevőhöz.

Adja meg az Context attribútumot az összetevőelemen, ha meg szeretné adni az implicit gyermektartalmak tartalomparaméter-nevét (a gyermekelem körbefuttatása nélkül). Az alábbi példában az Context attribútum megjelenik az TemplatedNavBar elemen, és az összes RenderFragment<TValue> sablonparaméterre vonatkozik.

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

Alternatívaként módosíthatja a paraméter nevét a Context gyermekelem RenderFragment<TValue> attribútumával. Az alábbi példában a Context be van állítva ItemTemplate-re, nem pedig TemplatedNavBar-re.

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

A RenderFragment<TValue> típusú összetevőargumentumok implicit paramétere a context, amely használható. Az alábbi példában Context nincs beállítva. @context.{PROPERTY} kisállat-értékeket biztosít a sablonnak, ahol {PROPERTY} egy Pet tulajdonság:

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

Általános típusú összetevők használata esetén a típusparamétert a rendszer lehetőség szerint kikövetkezteti. A típust azonban explicit módon megadhatja egy olyan attribútummal, amelynek neve megegyezik a típusparaméterrel, amely az előző példában található TItem :

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

Az összetevőben TemplatedNavBar (TemplatedNavBar.razor) szereplő példa feltételezi, hogy a Items gyűjtemény nem változik a kezdeti renderelés után, vagy ha változik, nem szükséges fenntartani az összetevők/elemek ItemTemplate állapotát. Azoknál a sablonalapú összetevőknél, amelyeknél az ilyen használat nem előrelátható, tekintse meg az Kapcsolatok megőrzése@key című szakaszt.

Kapcsolatok megőrzése @key

A sablonalapú összetevőket gyakran használják elemgyűjtemények, például táblák vagy listák renderelésére. Ilyen általános forgatókönyvekben nem feltételezhetjük, hogy a felhasználó elkerüli az állapotalapú összetevőket/elemeket az elemsablon definíciójában, vagy hogy nem lesznek további módosítások a Items gyűjteményben. Az ilyen sablonalapú összetevők esetében meg kell őrizni az irányelv attribútummal @key való kapcsolatokat.

Megjegyzés:

Az irányelvattribútummal kapcsolatos @key további információkért lásd: Elem-, összetevő- és modellkapcsolatok megőrzése a ASP.NET Core-ban Blazor.

Az alábbi TableTemplate összetevő (TableTemplate.razor) egy sablonalapú összetevőt mutat be, amely megőrzi a kapcsolatot a következővel @key:

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

Vegye figyelembe a következő Pets5 összetevőt (Pets5.razor), amely bemutatja az adatok kulcsolásának fontosságát a modellkapcsolatok megőrzése érdekében. Az összetevőben a kisállat OnAfterRenderAsync hozzáadásának minden iterációja Blazor az összetevő újrarendezését TableTemplate eredményezi.

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

Ez a bemutató a következőt teszi lehetővé:

• Válasszon ki egyet <input> a több renderelt táblázatsor közül.
• Vizsgálja meg az oldal fókuszának viselkedését, ahogy a háziállatok gyűjteménye automatikusan növekszik.

Az összetevőben az @keyTableTemplate irányelv attribútum használata nélkül a lap fókusza a táblázat ugyanazon indexpozícióján (során) marad, ami miatt a fókusz minden alkalommal eltolódik, amikor egy kisállatot hozzáadnak. Ennek bemutatásához távolítsa el az @key irányelv attribútumát és értékét, indítsa újra az alkalmazást, és próbálja meg módosítani a mező értékét elemek hozzáadásakor.

További erőforrások

• ASP.NET Core Blazor renderelési teljesítményre vonatkozó ajánlott eljárások
• Elem-, összetevő- és modellkapcsolatok megőrzése a ASP.NET Core-ban Blazor
• Blazor GitHub-adattár mintái (dotnet/blazor-samples) (hogyan lehet letölteni)