Pomocná zařízení značek v ASP.NET Core

Článek
09/13/2021
5 min ke čtení

Co jsou pomocníci značek

Pomocná rozšíření značek umožňují, aby se kód na straně serveru mohl podílet na vytváření a vykreslování elementů HTML v Razor souborech. Například předdefinovaný může k názvu image připojit ImageTagHelper číslo verze. Při každé změně image server vygeneruje novou jedinečnou verzi image, takže klienti budou mít zaručeno, že bitové kopie budou mít aktuální (místo zastaralé image uložené v mezipaměti). Existuje mnoho integrovaných pomocných prvků značek pro běžné úlohy , jako je vytváření formulářů, odkazů, načítání prostředků a další, a ještě více dostupných ve veřejných úložištích GitHub a jako NuGet balíčky. Pomocníci značek jsou vytváření v jazyce C# a cílí na elementy HTML na základě názvu elementu, názvu atributu nebo nadřazené značky. Například integrovaný objekt může cílit LabelTagHelper na element HTML při použití <label> LabelTagHelper atributů. Pokud jste obeznámeni s pomocníci HTML,značek pomocných prvků omezte explicitní přechody mezi HTML a C# v Razor zobrazeních. V mnoha případech poskytují pomocná opatření HTML alternativní přístup ke konkrétnímu pomocníkovi značek, ale je důležité si uvědomit, že pomocná opatření značek nenahrazuje pomocné prvky HTML a pro každý pomocný prvek HTML není k dispozici pomocná metoda značky. Pomocná zařízení značek v porovnání s pomocníky HTML podrobněji vysvětlují rozdíly.

Co poskytují pomocníci značek

Vývojové prostředí vhodné pro HTML

Ve většině částí kód používající Razor pomocné prvky značek vypadá jako standardní HTML. Návrháři front-endu conversant s HTML/CSS/JavaScriptem mohou upravovat bez učení syntaxe Razor jazyka Razor C#.

Bohaté prostředí IntelliSense pro vytváření kódu HTML a Razor značek

To je v ostrém kontrastu s pomocnámi prvky HTML, předchozím přístupem k vytváření značek v zobrazeních na Razor straně serveru. Pomocná zařízení značek v porovnání s pomocníky HTML podrobněji vysvětlují rozdíly. Podpora technologie IntelliSense pro pomocná zařízení značek vysvětluje prostředí IntelliSense. Dokonce i vývojáři, kteří mají Razor zkušenosti se syntaxí jazyka C#, jsou produktivnější pomocí pomocníků značek než psaní kódu jazyka Razor C#.

Způsob, jak zvýšit produktivitu a vytvořit robustnější, spolehlivější a udržovatelný kód s využitím informací dostupných jenom na serveru

Například historická mantra při aktualizaci imagí byla změna názvu image při změně image. Image by měly být z důvodů výkonu agresivně uložené v mezipaměti. Pokud nezměníte název image, riskujete, že klienti kopírují zastaralou kopii. V minulosti se po úpravě obrázku musel změnit název a každý odkaz na obrázek ve webové aplikaci je potřeba aktualizovat. Nejenže je to velmi pracné, je to také náchylné k chybám (můžete zmeškat odkaz, náhodně zadat nesprávný řetězec atd.). Integrovaná funkce ImageTagHelper to může provést automaticky. Může k názvu image připojit číslo verze, takže při každé změně image server automaticky vygeneruje novou jedinečnou ImageTagHelper verzi image. U klientů je zaručeno získání aktuální image. Tato odolnost a úspory pracovních sil jsou v podstatě bezplatné díky použití ImageTagHelper .

Většina integrovaných pomocných prvků značek cílí na standardní elementy HTML a poskytuje atributy elementu na straně serveru. Například element použitý <input> v mnoha zobrazeních ve složce Views/Account obsahuje asp-for atribut . Tento atribut extrahuje název zadané vlastnosti modelu do vykreslené html. Představte Razor si zobrazení s následujícím modelem:

public class Movie
{
    public int ID { get; set; }
    public string Title { get; set; }
    public DateTime ReleaseDate { get; set; }
    public string Genre { get; set; }
    public decimal Price { get; set; }
}

Následující Razor kód:

<label asp-for="Movie.Title"></label>

Vygeneruje následující kód HTML:

<label for="Movie_Title">Title</label>

Atribut asp-for je k dispozici For vlastností v objektu LabelTagHelper . Další informace najdete v tématu Vytváření pomocníků značek.

Správa oboru pomocníka značek

Rozsah pomocníků značek je řízen kombinací znaku , a znaku @addTagHelper @removeTagHelper "!" pro odhlášení.

`@addTagHelper` z dostupných pomocníků značek

Pokud vytvoříte novou webovou ASP.NET Core s názvem AuthoringTagHelpers, přidá se do projektu následující soubor Views/_ViewImports.cshtml:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

Direktiva @addTagHelper z dostupných pomocníků značek pro zobrazení. V tomto případě je soubor zobrazení Pages/_ViewImports.cshtml, který ve výchozím nastavení dědí všechny soubory ve složce a podsložkách Pages. zpřístupnění pomocníků značek. Výše uvedený kód používá syntaxi se zástupnými znaky (" ") k určení, že všechny pomocné objekty značek v zadaném sestavení * (Microsoft.AspNetCore.Mvc.TagHelpers) budou dostupné pro každý soubor zobrazení v adresáři views nebo podadresáři. První parametr za určuje pomocná rozšíření značek, které se mají načíst (pro všechny pomocné objekty značek používáme " ) a druhý parametr @addTagHelper * "Microsoft.AspNetCore.Mvc.TagHelpers" určuje sestavení obsahující pomocné objekty značek. Microsoft.AspNetCore.Mvc.TagHelpers je sestavení pro integrované ASP.NET Core značek.

Pokud chcete zveřejnit všechny pomocné objekty značek v tomto projektu (které vytvoří sestavení s názvem AuthoringTagHelpers), použijete následující:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, AuthoringTagHelpers

Pokud váš projekt obsahuje s výchozím oborem názvů ( ), můžete zadat plně kvalifikovaný název EmailTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper (FQN) pomocníka značky:

@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.EmailTagHelper, AuthoringTagHelpers

Pokud chcete do zobrazení přidat pomocný objekt značky pomocí FQN, musíte nejprve přidat FQN ( ) a pak název sestavení AuthoringTagHelpers.TagHelpers.EmailTagHelper (AuthoringTagHelpers). Většina vývojářů preferuje použití syntaxe * se zástupnými znaky . Syntaxe se zástupnými znaky umožňuje vložit zástupný znak " " jako * příponu v FQN. Například některý z následujících direktiv přinese v EmailTagHelper :

@addTagHelper AuthoringTagHelpers.TagHelpers.E*, AuthoringTagHelpers
@addTagHelper AuthoringTagHelpers.TagHelpers.Email*, AuthoringTagHelpers

Jak už bylo zmíněno dříve, přidáním direktivy do souboru @addTagHelper Views/_ViewImports.cshtml je pomocná rutina značek dostupná pro všechny soubory zobrazení v adresáři Zobrazení a podadresářích. Direktivu můžete použít v konkrétních souborech zobrazení, pokud chcete vyjádřit výslovný souhlas s tím, aby se pomocná funkce značek vystavil @addTagHelper pouze uvedená zobrazení.

`@removeTagHelper` odebere pomocné objekty značek.

Má stejné dva parametry jako a odebere dříve přidaný pomocná metoda @removeTagHelper @addTagHelper značky. Například při použití u konkrétního zobrazení se ze zobrazení odebere zadaný pomocník @removeTagHelper značek. Při @removeTagHelper použití v souboru Views/Folder/_ViewImports.cshtml se ze všech zobrazení ve složce odebere zadaný pomocná rutina značek.

Řízení oboru pomocná rutina značky pomocí souboru _ViewImports.cshtml

Do libovolné složky zobrazení můžete přidat soubor _ViewImports.cshtml a modul zobrazení použije direktivy z tohoto souboru i ze souboru Views/_ViewImports.cshtml. Pokud jste přidali prázdný soubor Views/ Home /_ViewImports.cshtml pro zobrazení, nebude se nic měnit, protože soubor Home _ViewImports.cshtml je sčítaný. Všechny direktivy, které přidáte do @addTagHelper souboru Views/ Home /_ViewImports.cshtml (které nejsou ve výchozím souboru Views/_ViewImports.cshtml), zpřístupní tyto pomocné rutina značek zobrazením pouze ve Home složce.

Odhlášení z jednotlivých prvků

Pomocný prvek značky můžete zakázat na úrovni elementu pomocí znaku pro odhlášení pomocníka značek (!). Například ověřování je zakázané v souboru pomocí znaku pro odhlášení Email <span> pomocníka značek:

<!span asp-validation-for="Email" class="text-danger"></!span>

U úvodní a ukončovací značky musíte použít znak pro pomocný znak značky. (Editor Visual Studio automaticky přidá znak odhlášení do ukončovací značky, když ho přidáte do úvodní značky). Po přidání znaku pro odhlášení se atributy elementu a pomocníka značek už nebudou zobrazovat v chouřejším písmu.

Explicitní `@tagHelperPrefix` použití pomocné pomoci značek pomocí příkazu

Direktiva umožňuje zadat řetězec předpony značky pro povolení podpory pomocníka značek a explicitní použití pomocné funkce @tagHelperPrefix značek. Do souboru Views/_ViewImports.cshtml můžete například přidat následující kód:

@tagHelperPrefix th:

Na obrázku kódu níže je předpona pomocných značek nastavená na , takže pouze prvky, které používají předponu, podporují pomocné prvky značek (elementy s podporou pomocných značek th: th: mají výrazné písmo). Elementy <label> <input> a mají předponu pomocných značek a jsou povolené pomocí pomocných značek, zatímco <span> element ne.

Razor markup with Tag Helper prefix set to "th:" for a label and an input element name

Stejná pravidla hierarchie, která platí pro @addTagHelper , platí také pro @tagHelperPrefix .

Samoobslužné pomocná zařízení značek

Mnoho pomocníků značek nelze použít jako samoukonné značky. Některé pomocné pomocníky značek jsou navržené tak, aby se uzavíraly vlastními značkami. Použití pomocné funkce značky, která není navržená tak, aby se uzavíral sama, potlačí vykreslený výstup. Když pomocný prvek značky zavřete, ve vykreslených výstupech se značka samo ukončuje. Další informace najdete v této poznámce v tématu Pomocníci značek vytváření.

C# v atributu nebo deklaraci pomocníků značek

Pomocníci značek nepovolují jazyk C# v oblasti deklarace atributu nebo značky elementu. Například následující kód není platný:

<input asp-for="LastName"  
       @(Model?.LicenseId == null ? "disabled" : string.Empty) />

Předchozí kód lze napsat takto:

<input asp-for="LastName" 
       disabled="@(Model?.LicenseId == null)" />

Podpora technologie IntelliSense pro pomocná rozšíření značek

Při vytváření nové webové ASP.NET Core aplikace v Visual Studio se přidá balíček NuGet Microsoft.AspNetCore. Razor . Tools". Toto je balíček, který přidává nástroje Pomocná služba značek.

Zvažte napsání elementu <label> HTML. Jakmile zadáte do <l editoru Visual Studio, IntelliSense zobrazí odpovídající prvky:

Po zadání "l" na klávesnici IntelliSense navrhne seznam možných názvů značek s vybraným popiskem .

Nejenže získáte nápovědu HTML, ale pod ní ikonu @" symbol with " (<>).

Pod<> @" symbol with " je .

Ikona identifikuje prvek jako cílený pomocnými objekty značek. Čisté elementy HTML (například fieldset ) zobrazují ikonu <> kódu.

Čistá značka HTML zobrazuje značku HTML (s výchozím barevným Visual Studio) hnědým písmem, atributy červeně a hodnoty <label> atributů modře.

Příklad značky "label" HTMl

Po zadání intellisense zobrazí seznam dostupných atributů HTML/CSS a atributů cílených na <label pomocnou podporu značek:

Uživatel zadal levou hranatou závorku a název elementu HTML Label. IntelliSense prezentuje seznam možných atributů (žádné jsou předvybrané).

Dokončení příkazu IntelliSense umožňuje zadat klávesu TAB k dokončení příkazu s vybranou hodnotou:

Uživatel zadal levou hranatou závorku, název elementu HTML "label" a zahájí zadání názvu atributu ("as"). IntelliSense prezentuje dialog návrhů s vybraným prostředím ASP.

Jakmile je atribut pomocník značek zadán, změní se písma značky a atributu. když použijete výchozí Visual Studio barevný motiv Blue nebo Light, písmo je tučně fialové. Pokud používáte motiv "tmavý", písmo je tučně šedozelená. Obrázky v tomto dokumentu byly pořízeny pomocí výchozího motivu.

Uživatel vybral "ASP-for", který je teď tučně fialovou, protože uživatel nepoužívá tmavý motiv.

můžete zadat zástupce Visual Studio CompleteWord (Ctrl + mezerník je výchozí hodnota uvnitř dvojitých uvozovek ("") a teď jste v jazyce c#, stejně jako byste byli ve třídě c#. IntelliSense zobrazí všechny metody a vlastnosti v modelu stránky. Metody a vlastnosti jsou k dispozici, protože typ vlastnosti je ModelExpression . Na obrázku níže upravujeme Register zobrazení, takže RegisterViewModel je k dispozici.

Uživatelské typy "e" v hodnotě pro atribut "ASP-for". IntelliSense navrhuje možné dokončení s vybraným "e-mailem".

IntelliSense zobrazí seznam vlastností a metod, které jsou k dispozici pro model na stránce. Bohatá prostředí IntelliSense vám pomůže vybrat třídu CSS:

Uživatelské typy "CL" pro přidání atributu do "Input" elementu. IntelliSense prezentuje seznam návrhů dokončení s vybranou možností "Class".

Uživatel zadá "co" jako hodnotu atributu Class elementu Input. IntelliSense nabízí seznam návrhů dokončení s vybraným sloupcem "sloupec".

Tagování pomocníků v porovnání s pomocníky HTML

Přihlaste se k prvkům jazyka HTML v Razor zobrazeních, zatímco pomocníky HTML jsou vyvolány jako metody s HTML v Razor zobrazeních. Vezměte v úvahu následující Razor kód, který vytvoří popisek HTML s nadpisem CSS třídy "titulek":

@Html.Label("FirstName", "First Name:", new {@class="caption"})

Symbol on ( @ ) oznamuje, Razor že se jedná o začátek kódu. Následující dva parametry ("FirstName" a "first name": ") jsou řetězce, takže IntelliSense nemůže pomáhat. Poslední argument:

new {@class="caption"}

Je anonymní objekt, který slouží k reprezentaci atributů. Protože class je klíčové slovo rezervované v jazyce C#, použijete @ symbol k vynucení interpretace jazyka c# @class= jako symbolu (název vlastnosti). Do předkoncového návrháře (někdo známý s HTML/CSS/JavaScriptem a jinými klientskými technologiemi, ale není známý v jazyce C# a Razor ), je většina řádku cizí. Celý řádek musí být vytvořen bez usnadnění z IntelliSense.

Pomocí LabelTagHelper lze napsat stejné označení jako:

<label class="caption" asp-for="FirstName"></label>

v případě pomocné verze značek, jakmile zadáte <l v editoru Visual Studio, IntelliSense zobrazí vyhovující prvky:

Uživatelské typy "l" na klávesnici. IntelliSense navrhuje dokončení elementu HTML pomocí příkazu "label".

Technologie IntelliSense vám pomůže napsat celý řádek.

následující obrázek kódu ukazuje formu zobrazení /účtu/registru. cshtml Razor vygenerovaného ze šablony ASP.NET 4.5. x MVC, která je součástí Visual Studio.

::: no-loc (razor)::: označení pro část formuláře v registru::: no-loc (razor)::: zobrazení pro šablonu projektu ASP.NET 4,5 MVC

editor Visual Studio zobrazuje kód jazyka C# s šedým pozadím. Například AntiForgeryToken Pomocník HTML:

@Html.AntiForgeryToken()

se zobrazí se šedým pozadím. Většina značek v zobrazení registrů je C#. Porovnejte je s ekvivalentním přístupem pomocí pomocníků značek:

::: no-loc (razor)::: značky s značkami pro formulářovou část registru::: no-loc (razor)::: zobrazení pro šablonu projektu ASP.NET Core.

Značky jsou mnohem čisticí a snadněji se čtou, upravují a udržují než přístup k HTML pomocníkům. Kód jazyka C# se zmenší na minimum, o které server potřebuje znát. editor Visual Studio zobrazí označení cílené pomocí pomocníka značek v charakteristickém písmu.

Vezměte v úvahu tuto e-mailovou skupinu:

<div class="form-group">
    <label asp-for="Email" class="col-md-2 control-label"></label>
    <div class="col-md-10">
        <input asp-for="Email" class="form-control" />
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
</div>

Každý z atributů ASP-má hodnotu "E-mail", ale "E-mail" není řetězec. V tomto kontextu je "e-mailem" vlastnost výrazu modelu C# pro RegisterViewModel .

editor Visual Studio vám pomůže napsat všechny značky v metodě pomocníka značek ve formuláři register, zatímco Visual Studio neposkytuje nápovědu pro většinu kódu v přístupu k nápovědě HTML. podpora technologie IntelliSense pro pomocné pomocníky značek se dohlíží na podrobnosti o práci s pomocníky značek v editoru Visual Studio.

Porovnávání pomocníků značek v porovnání s ovládacími prvky webového serveru

Pomocníka značek nevlastní prvek, ke kterému jsou přidruženy; jednoduše se účastní vykreslování prvku a obsahu. ASP.NET Ovládací prvky webového serveru jsou deklarovány a vyvolány na stránce.
ASP.NET Ovládací prvky webového serveru mají netriviální životní cyklus, který může provádět vývoj a ladění obtížné.
Ovládací prvky webového serveru umožňují přidat funkce do prvků model DOM (Document Object Model) klienta (DOM) pomocí ovládacího prvku klienta. Pomocník značek nemá žádný model DOM.
Ovládací prvky webového serveru zahrnují automatické zjišťování prohlížečů. Pomocník značek nemá žádné znalosti o prohlížeči.
Více pomocných rutin značek může působit na stejný prvek (viz téma zamezení konfliktů pomocníka značek ), zatímco obvykle nelze vytvářet ovládací prvky webového serveru.
Pomocník značek může upravit značku a obsah prvků HTML, na které jsou vymezeny, ale přímo na stránku nemění nic jiného. Ovládací prvky webového serveru mají méně konkrétní rozsah a mohou provádět akce, které mají vliv na ostatní části stránky. povolení nezamýšlených vedlejších účinků.
Ovládací prvky webového serveru používají k převodu řetězců do objektů převaděče typů. U pomocníků se značkami pracujete nativně v jazyce C#, takže nemusíte provádět převod typu.
Ovládací prvky webového serveru používají System. ComponentModel k implementaci chování komponent a ovládacích prvků za běhu a v době návrhu. System.ComponentModel zahrnuje základní třídy a rozhraní pro implementaci atributů a převaděčů typů, vázání na zdroje dat a součásti licencování. Na rozdíl od toho, že chcete označit pomocníky, které jsou obvykle odvozeny z TagHelper a TagHelper základní třída zpřístupňuje pouze dvě metody Process a ProcessAsync .