ASP.NET Core etiket yardımcıları

Makale
09/13/2021
Okumak için 5 dakika

Etiket Yardımcıları nelerdir

Etiket Yardımcıları, sunucu tarafı kodun dosyalarda HTML öğeleri oluşturma ve işlemeye katılmasını sağlar Razor . Örneğin yerleşik, ImageTagHelper görüntü adına bir sürüm numarası ekleyebilir. Görüntü her değiştiğinde, sunucu görüntü için yeni bir benzersiz sürüm oluşturur, bu nedenle istemcilerin geçerli görüntüyü alma garantisi vardır (eski önbelleğe alınmış bir görüntü yerine). yaygın görevler için çok sayıda yerleşik etiket yardımcıları vardır. örneğin, formları, bağlantıları, yükleme varlıklarını ve daha fazlasını ve daha fazlasını ortak GitHub depolarında ve NuGet paketler halinde bulabilirsiniz. Etiket Yardımcıları C# dilinde yazılır ve öğe adı, öznitelik adı veya üst etikete göre HTML öğelerini hedefler. Örneğin, LabelTagHelper öznitelikler uygulandığında YERLEŞIK HTML öğesini hedefleyebilir <label> LabelTagHelper . HTML Yardımcılarıhakkında bilginiz varsa etiket yardımcıları, görünümlerde HTML ve C# arasındaki açık geçişleri azaltır Razor . Birçok durumda, HTML Yardımcıları belirli bir etiket Yardımcısı için alternatif bir yaklaşım sağlar, ancak bu etiket yardımcıların HTML yardımcılarını değiştirmez ve her HTML Yardımcısı için bir etiket Yardımcısı olmadığını bilmek önemlidir. HTML yardımcılarına kıyasla etiket yardımcıları daha ayrıntılı olarak açıklanır.

Hangi etiket yardımcıları sağlar

HTML kullanımı kolay bir geliştirme deneyimi

Çoğu bölümde, Razor Etiket Yardımcıları kullanan biçimlendirme standart HTML gibi görünür. Ön uç tasarımcıları HTML/CSS/JavaScript ile, Razor C# sözdizimi öğrenmeksizin düzenleyebilir Razor .

HTML ve biçimlendirme oluşturmak için zengin bir IntelliSense ortamı Razor

Bu, HTML yardımcılarından daha keskin karşıtlıkla birlikte, görünümlerde biçimlendirme sırasında sunucu tarafı oluşturma yaklaşımına sahiptir Razor . HTML yardımcılarına kıyasla etiket yardımcıları daha ayrıntılı olarak açıklanır. Etiket Yardımcıları Için IntelliSense desteği , IntelliSense ortamını açıklar. C# sözdizimiyle karşılaşılan geliştiricilerin bile Razor , c# işaretlemesi yazmadan etiket yardımcıları kullanılarak daha üretken olma Razor .

Daha üretken olmanızı sağlamak ve yalnızca sunucuda bulunan bilgileri kullanarak daha sağlam, güvenilir ve sürdürülebilir kodlar elde etmek için bir yol

Örneğin, geçmişe dönük olarak görüntülerin güncelleştirilmesi, görüntüyü değiştirdiğinizde görüntünün adını değiştiriydi. Görüntülerin performans nedenleriyle bir şekilde ön belleğe alınması gerekir ve bir görüntünün adını değiştirmediğiniz takdirde, istemcilerin eski bir kopya alıyor olması risklidir. Tarihsel olarak, bir görüntü düzenlendikten sonra ad değiştirilmelidir ve Web uygulamasındaki görüntünün güncellenmesi için gereken her başvuru. Bu çok işçiliği yoğun bir şekilde değil, bu da hataya açıktır (bir başvuruyu kaçırmanızı, yanlışlıkla yanlış dize girmeniz vb.) Yerleşik, ImageTagHelper sizin için otomatik olarak bunu yapabilir. Görüntü ImageTagHelper adına bir sürüm numarası ekleyebilir, böylece görüntü her değiştiğinde sunucu otomatik olarak görüntü için yeni bir benzersiz sürüm oluşturur. İstemcilerin geçerli görüntüyü alması garanti edilir. Bu sağlamlık ve işgücü tasarrufu, ile birlikte ücretsizdir ImageTagHelper .

Çoğu yerleşik etiket yardımcıları standart HTML öğelerini hedefleyin ve öğesi için sunucu tarafı öznitelikleri sağlar. Örneğin, <input> Görünümler/hesap klasöründeki birçok görünümde kullanılan öğesi asp-for özniteliği içerir. Bu öznitelik, belirtilen model özelliğinin adını işlenmiş HTML içine ayıklar. RazorAşağıdaki modelle bir görünüm düşünün:

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

Aşağıdaki Razor biçimlendirme:

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

Aşağıdaki HTML 'yi oluşturur:

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

asp-forÖzniteliği, içindeki özelliği tarafından kullanılabilir hale getirilir For LabelTagHelper . Daha fazla bilgi için bkz. Yazar etiketi yardımcıları .

Etiket Yardımcısı kapsamını yönetme

Etiket Yardımcıları kapsamı @addTagHelper ,, @removeTagHelper ve "!" geri çevirme karakterinin bir birleşimi tarafından denetlenir.

`@addTagHelper` Etiket Yardımcıları kullanılabilir hale getirir

authoringtaghelmakaadı adlı yeni bir ASP.NET Core web uygulaması oluşturursanız, projenize aşağıdaki görünümler/_ViewImports. cshtml dosyası eklenecektir:

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

@addTagHelperYönerge, etiket yardımcılarını görünüm için kullanılabilir hale getirir. Bu durumda, görünüm dosyası sayfalar /_ViewImports. cshtml'dir ve varsayılan olarak Sayfalar klasörü ve alt klasörlerdeki tüm dosyalar tarafından devralınır. Etiket Yardımcıları kullanılabilir hale getirme. Yukarıdaki kod, * belirtilen derlemedeki tüm etiket yardımcılarını (Microsoft. Aspnetcore. Mvc. Taghelmakat), Görünümler dizinindeki veya alt dizininde bulunan her görünüm dosyası için kullanılabilir olacağını belirtmek için joker karakter sözdizimini ("") kullanır. Sonraki ilk parametre, @addTagHelper yüklenecek etiket yardımcıları (" * " tüm etiket yardımcıları için kullanıyoruz) ve ikinci parametre olan "Microsoft. aspnetcore. Mvc. Taghel,", etiket yardımcıları içeren derlemeyi belirtir. Microsoft. aspnetcore. Mvc. taghelmakatem , yerleşik ASP.NET Core etiket yardımcıları için derlemedir.

Bu projedeki tüm etiket yardımcılarını ortaya çıkarmak için ( Authoringtaghelmakatı adlı bir derleme oluşturur), aşağıdakileri kullanın:

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

Projeniz EmailTagHelper varsayılan ad alanı () ile bir içeriyorsa AuthoringTagHelpers.TagHelpers.EmailTagHelper , etiket yardımcısından tam nitelikli adı (FQN) sağlayabilirsiniz:

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

Bir FQN kullanarak bir görünüme bir etiket Yardımcısı eklemek için, önce FQN ( AuthoringTagHelpers.TagHelpers.EmailTagHelper ) ve ardından derleme adı (Authoringtaghelmakaı) eklersiniz. Çoğu geliştirici " * " joker sözdizimini kullanmayı tercih eder. Joker karakter sözdizimi "" joker karakterini * BIR FQN soneki olarak eklemenize olanak tanır. Örneğin, aşağıdaki yönergelerden herhangi biri içine alınacaktır EmailTagHelper :

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

Daha önce bahsedildiği gibi, @addTagHelper views/_ViewImports. cshtml dosyasına yönergesini eklemek etiket Yardımcısı ' nı Görünümler dizinindeki ve alt dizinlerindeki tüm görünüm dosyaları için kullanılabilir hale getirir. @addTagHelperEtiketi yardımcısını yalnızca bu görünümlerde kullanıma sunmak istiyorsanız, belirli görünüm dosyalarında yönergesini kullanabilirsiniz.

`@removeTagHelper` Etiket Yardımcıları kaldırır

, İle @removeTagHelper aynı iki parametreye sahiptir @addTagHelper ve daha önce eklenmiş bir etiket yardımcısını kaldırır. Örneğin, @removeTagHelper belirli bir görünüme uygulandığında, belirtilen etiket Yardımcısı görünümden kaldırılır. @removeTagHelperBir views/Folder/_ViewImports. cshtml dosyasında kullanmak, belirtilen etiket yardımcısını klasördeki tüm görünümlerden kaldırır.

Etiket Yardımcısı kapsamını _ViewImports. cshtml dosyası ile denetleme

Herhangi bir görünüm klasörüne _ViewImports. cshtml ekleyebilirsiniz ve Görünüm altyapısı, bu dosya ve Görünümler/_ViewImports. cshtml dosyasından yönergeleri uygular. Görünümler için boş bir Görünümler/ Home /_ViewImports. cshtml dosyası eklediyseniz Home , _ViewImports. cshtml dosyası eklenebilir olduğundan hiçbir değişiklik olmaz. @addTagHelper Görünümler/ Home /_ViewImports. cshtml dosyasına ekleyeceğiniz tüm yönergeler (varsayılan görünümlerde/_ViewImports. cshtml dosyasında değil), bu etiket yardımcılarını yalnızca klasöründe görünümler halinde kullanıma sunar Home .

Ayrı öğelerin dışında tutma

Etiket Yardımcısı geri çevirme karakteriyle ("!") birlikte öğe düzeyinde bir etiket yardımcısını devre dışı bırakabilirsiniz. Örneğin, Email doğrulama, <span> etiket Yardımcısı geri çevirme karakteriyle birlikte öğesinde devre dışıdır:

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

Açılış ve kapanış etiketine etiket Yardımcısı geri çevirme karakterini uygulamanız gerekir. (açma etiketine bir tane eklediğinizde Visual Studio düzenleyicisi, kapatma etiketini otomatik olarak ekler. Kabul etme karakterini ekledikten sonra, öğe ve etiket Yardımcısı öznitelikleri artık farklı bir yazı tipinde gösterilmez.

`@tagHelperPrefix`Etiket Yardımcısı kullanımını açık hale getirmek için kullanma

@tagHelperPrefixYönergesi etiket Yardımcısı desteğini etkinleştirmek ve etiket Yardımcısı kullanımını açık hale getirmek için bir etiket öneki dizesi belirtmenize olanak tanır. Örneğin, aşağıdaki biçimlendirmeyi views/_ViewImports. cshtml dosyasına ekleyebilirsiniz:

@tagHelperPrefix th:

Aşağıdaki kod görüntüsünde, etiket Yardımcısı ön eki olarak ayarlanır; th: Bu nedenle yalnızca öneki kullanan öğeler th: Etiket Yardımcıları destekler (etiket Yardımcısı etkin öğeleri farklı bir yazı tipine sahiptir). <label>Ve <input> öğeleri etiket Yardımcısı ön ekine sahiptir ve etiket Yardımcısı etkindir, ancak <span> öğesi değildir.

::: No-Loc (Razor)::: etiket Yardımcısı ön eki olan biçimlendirme, etiket ve giriş öğesi adı için "TH:" olarak ayarlandı

İçin de geçerlidir aynı hiyerarşi kuralları @addTagHelper için geçerlidir @tagHelperPrefix .

Kendi kendine kapanan etiket yardımcıları

Birçok etiket yardımcıları, kendinden kapanış etiketleri olarak kullanılamaz. Bazı etiket yardımcıları, kendinden kapanış etiketleri olacak şekilde tasarlanmıştır. Kendi kendini kapatmak üzere tasarlanmamış bir etiket Yardımcısı kullanılması işlenmiş çıktıyı bastırır. Bir etiket Yardımcısı kendinden kapanış, işlenen çıktıda kendi kendine kapanan bir etikete neden olur. Daha fazla bilgi için bkz. etiket yardımcılarını yazma.

Etiket Yardımcıları özniteliğinde/bildiriminde C#

Etiket Yardımcıları, öğenin özniteliğinde veya etiket bildirim alanında C# ' ın kullanılmasına izin vermez. Örneğin, aşağıdaki kod geçerli değildir:

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

Yukarıdaki kod şöyle yazılabilir:

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

Etiket Yardımcıları için IntelliSense desteği

Visual Studio yeni bir ASP.NET Core web uygulaması oluşturduğunuzda, "Microsoft. aspnetcore.. NuGet paketini ekler. Razor Araçlar ". Bu, etiket Yardımcısı araçları ekleyen pakettir.

Bir HTML öğesi yazmayı düşünün <label> . <lVisual Studio düzenleyicide girdiğiniz anda ıntellisense, eşleşen öğeleri görüntüler:

Klavye üzerine "l" yazdıktan sonra, IntelliSense "etiket" seçiliyken olası etiket adlarının bir listesini önerir.

Yalnızca HTML Yardımı ( @" symbol with " bunun altındaki "<>") alınamaz.

@" symbol with "Altında "<>".

Simge, öğeyi etiket yardımcıları tarafından hedeflenen şekilde tanımlar. Saf HTML öğeleri (gibi fieldset ) "<>" simgesini görüntüler.

saf html <label> etiketi, html etiketini (varsayılan Visual Studio color teması ile) bir kahverengi yazı tipinde, kırmızı olan özniteliklere ve öznitelik değerlerini mavi olarak görüntüler.

Örnek "label" HTMl etiketi

Girdikten sonra <label , IntelliSense KULLANILABILIR HTML/CSS özniteliklerini ve etikete yardımcı hedeflenen öznitelikleri listeler:

Kullanıcı bir açma köşeli ayracı ve HTML öğesi adı "label" yazmıştır. IntelliSense olası özniteliklerin listesini sunar (hiçbiri önceden seçilmez).

IntelliSense deyimi tamamlama, deyimi seçili değerle tamamlamak için sekme anahtarını girmenize olanak sağlar:

Kullanıcı bir açma ayracı, HTML öğesi adı "etiket" yazmıştır ve bir öznitelik adı ("as") yazmaya başlar. IntelliSense, "asp-for" öğesinin seçili olduğu bir öneri iletişim kutusu sunar.

Etiket Yardımcı özniteliği girilir girilir, etiket ve öznitelik yazı tipleri değişir. "Mavi" Visual Studio "Açık" renk temasını kullanan yazı tipi kalın mordur. "Koyu" temayı kullanıyorsanız yazı tipi kalın yazı tipi olur. Bu belgede yer alan görüntüler varsayılan tema kullanılarak alındı.

Kullanıcı "asp-for" ifadesini seçti. Bu, kullanıcının Koyu temasını kullanmamış olduğu için kalın mor renkle gösterilmiştir.

Visual Studio CompleteWord kısayolunu girebilirsiniz (Ctrl +ara çubuğu, çift tırnak ("") içinde varsayılandır ve C# sınıfında olduğu gibi artık C# içindesiniz. IntelliSense, sayfa modelinde tüm yöntemleri ve özellikleri görüntüler. Özellik türü olduğundan yöntemleri ve özellikleri ModelExpression kullanılabilir. Aşağıdaki görüntüde görünümü Register düzenliyorum, bu nedenle RegisterViewModel kullanılabilir.

Kullanıcı, "asp-for" özniteliğinin değerine "e" okur. IntelliSense, "E-posta" seçiliyken olası tamamlamayı önerir.

IntelliSense, sayfada model için kullanılabilen özellikleri ve yöntemleri listeler. Zengin IntelliSense ortamı CSS sınıfını seçmenize yardımcı olur:

Kullanıcı bir "input" öğesine öznitelik eklemek için "cl" türüne sahip olur. IntelliSense, "sınıf" seçili olarak tamamlama önerilerinin bir listesini sunar.

Kullanıcı, "input" öğesinin "class" özniteliğinin değeri olarak "co" türüne sahip olur. IntelliSense, "col" seçili tamamlama önerilerinin bir listesini sağlar.

ETIKET Yardımcıları ile HTML Yardımcıları karşılaştırması

Etiket Yardımcıları görünümlerde HTML öğelerine iliştirirken, HTML Yardımcıları görünümlerde Razor HTML ile kesişen yöntemler olarak Razor çağrılır. CSS sınıfı Razor "caption" ile bir HTML etiketi oluşturan aşağıdaki işaretlemeyi göz önünde bulundurmalısınız:

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

at ( @ ) simgesi bunun Razor kodun başlangıcı olduğunu söyler. Sonraki iki parametre ("FirstName" ve "First Name:") dizedir, bu nedenle IntelliSense yardımcı olmaz. Son bağımsız değişken:

new {@class="caption"}

Öznitelikleri temsil etmek için kullanılan anonim bir nesnedir. C# içinde ayrılmış anahtar sözcük olduğundan, sembolünü kullanarak C#'yi simge (özellik adı) olarak class @ @class= yorumlamaya zorlarsınız. Ön uç tasarımcısı için (HTML/CSS/JavaScript ve diğer istemci teknolojileri hakkında bilgi sahibi olan ancak C# ve hakkında bilgi sahibi olmayan biri) satırın Razor çoğu yabancıdır. Satırın tamamının IntelliSense'in yardımı gerekmeden yazması gerekir.

kullanılarak LabelTagHelper aynı işaretleme şu şekilde yaz olabilir:

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

Etiket Yardımcı sürümü ile, düzenleyiciye girer girmez <l IntelliSense Visual Studio öğeleri görüntüler:

Kullanıcı klavyede "l" türüne sahiptir. IntelliSense, "etiket" seçiliyken HTML öğesinin tamamlanmasını önerir.

IntelliSense, satırın tamamını yazmanıza yardımcı olur.

Aşağıdaki kod görüntüsü, ASP.NET 4.5.x MVC şablonundan oluşturulan Views/Account/Register.cshtml görünümünün Form Razor bölümünü Visual Studio.

Razor Register ::no-loc(Razor)::: view for the form bölümü::no-loc(Razor)::: view for ASP.NET 4.5 MVC proje şablonu

Bu Visual Studio C# kodunu gri bir arka plan ile görüntüler. Örneğin, AntiForgeryToken HTML Yardımcısı:

@Html.AntiForgeryToken()

gri bir arka plan ile görüntülenir. Yazmaç görünümündeki işaretlemelerin çoğu C# olur. Etiket Yardımcılarını kullanarak bunu eşdeğer yaklaşımla karşılaştırın:

Razor register ::no-loc(Razor)::: view for an ASP.NET Core proje şablonunun form bölümü için Etiket Yardımcıları ile işaretleme

Biçimlendirme, HTML Yardımcıları yaklaşımından çok daha temiz ve okuması, düzenlemesi ve bakımını yapmak daha kolaydır. C# kodu, sunucunun bilmek zorunda olduğu en düşük değere indir indirildi. Bu Visual Studio düzenleyici, bir Etiket Yardımcısı tarafından hedeflenen işaretlemeyi farklı bir yazı tipiyle görüntüler.

E-posta grubunu düşünün:

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

"asp-" özniteliklerinin her biri "Email" değerine sahip ancak "Email" bir dize değil. Bu bağlamda "Email", için C# model ifadesi RegisterViewModel özelliğidir.

Visual Studio düzenleyicisi, yazmacı formunun Etiket Yardımcı yaklaşımındaki tüm işaretlemeleri yazmanıza yardımcı olurken, Visual Studio HTML Yardımcıları yaklaşımındaki kodun çoğu için yardım sağlar. Etiket Yardımcıları için IntelliSense desteği, düzenleyicide Etiket Yardımcıları ile çalışma hakkında Visual Studio ele alınmaktadır.

Web Sunucusu Denetimleriyle Karşılaştırıldığında Etiket Yardımcıları

Etiket Yardımcıları ilişkilendirilen öğeye sahip değildir; yalnızca öğenin ve içeriğin işlemeye katılmalarıdır. ASP.NET Web Sunucusu Denetimleri bir sayfada bildir ve çağrılır.
ASP.NET Web Sunucusu Denetimlerinin geliştirmeyi ve hata ayıklamayı zorlaştırarak önemsiz olmayan bir yaşam döngüsü vardır.
Web Sunucusu denetimleri, istemci denetimi kullanarak istemci Belge Nesne Modeli (DOM) öğelerine işlevsellik eklemenize olanak sağlar. Etiket Yardımcıları'nın DOM'sı yoktur.
Web Sunucusu denetimleri otomatik tarayıcı algılamayı içerir. Etiket Yardımcılarının tarayıcı hakkında bilgisi yoktur.
Genellikle Web Sunucusu denetimleri oluşturarken birden çok Etiket Yardımcısı aynı öğe üzerinde eylemde olabilir (bkz. Etiket Yardımcı çakışmalarını önleme).
Etiket Yardımcıları kapsamına alan HTML öğelerinin etiketini ve içeriğini değiştirebilir, ancak bir sayfada başka hiçbir şeyi doğrudan değiştirmez. Web Sunucusu denetimlerinin kapsamı daha azdır ve sayfanın diğer bölümlerini etkileyen eylemler gerçekleştirebilirsiniz; , intended yan etkileri etkinleştirme.
Web Sunucusu denetimleri, dizeleri nesnelere dönüştürmek için tür dönüştürücüleri kullanır. Etiket Yardımcıları ile C# içinde yerel olarak çalışır, bu nedenle tür dönüştürmesi yapmak zorunda olmazsiniz.
Web Sunucusu denetimleri, bileşenlerin ve denetimlerin çalışma zamanı ve tasarım zamanı davranışını uygulamak için System.ComponentModel kullanır. System.ComponentModel öznitelikleri ve tür dönüştürücülerini uygulamaya, veri kaynaklarına bağlamaya ve lisans bileşenlerini uygulamaya için temel sınıfları ve arabirimleri içerir. Bunu, genellikle 'den türetilen Etiket Yardımcıları'nın aksine, temel sınıf ise yalnızca iki yöntem (ve) TagHelper TagHelper ortaya Process ProcessAsync çıkarır.