ASP.NET Core'da Etiket Yardımcıları Yazma

  • Makale

Gönderen Rick Anderson

Örnek kodu görüntüleme veya indirme (indirme)

Etiket Yardımcılarını kullanmaya başlama

Bu öğretici, Etiket Yardımcılarını programlamaya giriş sağlar. Etiket Yardımcılarına Giriş, Etiket Yardımcılarının sağladığı avantajları açıklar.

Etiket yardımcısı, arabirimini uygulayan ITagHelper herhangi bir sınıftır. Ancak, bir etiket yardımcısı yazdığınızda, genellikle 'den TagHelpertüretilirsiniz. Bunu yaptığınızda yöntemine Process erişim elde edebilirsiniz.

  1. AuthoringTagHelpers adlı yeni bir ASP.NET Core projesi oluşturun. Bu proje için kimlik doğrulamasına ihtiyacınız olmayacak.

  2. TagHelpers adlı Etiket Yardımcılarını tutmak için bir klasör oluşturun. TagHelpers klasörü gerekli değildir, ancak makul bir kuraldır. Şimdi bazı basit etiket yardımcıları yazmaya başlayalım.

En düşük Etiket Yardımcısı

Bu bölümde, e-posta etiketini güncelleştiren bir etiket yardımcısı yazacaksınız. Örnek:

<email>Support</email>

Sunucu, bu işaretlemeyi aşağıdakine dönüştürmek için e-posta etiketi yardımcımızı kullanır:

<a href="mailto:Support@contoso.com">Support@contoso.com</a>

Yani, bunu e-posta bağlantısı yapan bir yer işareti. Bir blog altyapısı yazıyorsanız ve pazarlama, destek ve diğer kişiler için aynı etki alanına e-posta göndermesi gerekiyorsa bunu yapmak isteyebilirsiniz.

  1. Aşağıdaki EmailTagHelper sınıfı TagHelpers klasörüne ekleyin.

    
using Microsoft.AspNetCore.Razor.TagHelpers;
using System.Threading.Tasks;

namespace AuthoringTagHelpers.TagHelpers
{
    public class EmailTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "a";    // Replaces <email> with <a> tag
        }
    }
}

    • Etiket yardımcıları, kök sınıf adının öğelerini hedefleyen bir adlandırma kuralı kullanır (sınıf adının TagHelper bölümü hariç). Bu örnekte EmailTagHelper'ın kök adı e-posta<email> olduğundan etiket hedeflenir. Bu adlandırma kuralı çoğu etiket yardımcısında işe yarar, daha sonra bunu nasıl geçersiz kılacağım göstereceğiz.

    • EmailTagHelper sınıfı öğesinden TagHelpertüretilir. sınıfı, TagHelper Etiket Yardımcıları yazmak için yöntemler ve özellikler sağlar.

    • Geçersiz kılınan Process yöntem, etiket yardımcısının yürütürken ne yaptığını denetler. sınıfı TagHelper da aynı parametrelere sahip zaman uyumsuz bir sürüm (ProcessAsync) sağlar.

    • bağlam parametresi Process (ve ProcessAsync) geçerli HTML etiketinin yürütülmesiyle ilişkili bilgileri içerir.

    • (ve ProcessAsync) çıkış parametresi Process , HTML etiketi ve içeriği oluşturmak için kullanılan özgün kaynağın durum bilgisi olan bir HTML öğesi temsilcisini içerir.

    • Sınıf adımızın TagHelper soneki vardır ve bu gerekli değildir, ancak en iyi yöntem kuralı olarak kabul edilir. Sınıfı şu şekilde bildirebilirsiniz:

    public class Email : TagHelper

  2. Sınıfı tüm EmailTagHelper görünümlerimizin Razor kullanımına açmak için dosyasının addTagHelper yönergesini Views/_ViewImports.cshtml ekleyin:

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

    Yukarıdaki kod, derlememizdeki tüm etiket yardımcılarının kullanılabilir olacağını belirtmek için joker karakter söz dizimini kullanır. Sonraki ilk dize @addTagHelper yüklenecek etiket yardımcısını belirtir (Tüm etiket yardımcıları için "*" kullanın) ve ikinci dize "AuthoringTagHelpers", etiket yardımcısının içinde olduğu derlemeyi belirtir. Ayrıca, ikinci satırın joker karakter söz dizimini kullanarak ASP.NET Core MVC etiketi yardımcılarını getirdiğine de dikkat edin (bu yardımcılar Etiket Yardımcılarına Giriş bölümünde açıklandı.) Etiket yardımcısını @addTagHelper görünümde kullanılabilir hale getiren yönergedirRazor. Alternatif olarak, aşağıda gösterildiği gibi bir etiket yardımcısının tam adını (FQN) sağlayabilirsiniz:

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

FQN kullanarak bir görünüme etiket yardımcısı eklemek için önce FQN ' yi ()AuthoringTagHelpers.TagHelpers.EmailTagHelper ve ardından derleme adını (AuthoringTagHelpers, olması gerekmez namespace) eklersiniz. Çoğu geliştirici joker karakter söz dizimini kullanmayı tercih eder. Etiket Yardımcıları'na giriş, etiket yardımcısı ekleme, kaldırma, hiyerarşi ve joker karakter söz dizimi hakkında ayrıntılı bilgi alır.

  1. Dosyadaki işaretlemeyi şu değişikliklerle güncelleştirin Views/Home/Contact.cshtml :

    @{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong><email>Support</email><br />
    <strong>Marketing:</strong><email>Marketing</email>
</address>

  2. Uygulamayı çalıştırın ve e-posta etiketlerinin yer işaretiyle değiştirildiğini doğrulayabilmeniz için HTML kaynağını görüntülemek için sık kullandığınız tarayıcıyı kullanın (örneğin, <a>Support</a>). Destek ve Pazarlama bir bağlantı olarak işlenir, ancak bunları işlevsel hale getirmek için bir href özniteliği yoktur. Bunu sonraki bölümde düzelteceğiz.

SetAttribute ve SetContent

Bu bölümde, e-posta için geçerli bir yer işareti oluşturacak şekilde öğesini EmailTagHelper güncelleştireceğiz. Bunu bir görünümden Razor (öznitelik biçiminde mail-to ) bilgi alacak ve tutturucuyu oluştururken kullanacak şekilde güncelleştireceğiz.

sınıfını EmailTagHelper aşağıdakilerle güncelleştirin:

public class EmailTagHelper : TagHelper
{
    private const string EmailDomain = "contoso.com";

    // Can be passed via <email mail-to="..." />. 
    // PascalCase gets translated into kebab-case.
    public string MailTo { get; set; }

    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";    // Replaces <email> with <a> tag

        var address = MailTo + "@" + EmailDomain;
        output.Attributes.SetAttribute("href", "mailto:" + address);
        output.Content.SetContent(address);
    }
}

  • Etiket yardımcıları için Pascal cased sınıfı ve özellik adları kebap olayına çevrilir. Bu nedenle, özniteliğini MailTo kullanmak için eşdeğerini kullanacaksınız <email mail-to="value"/> .

  • Son satır, en düşük düzeyde işlevsel etiket yardımcımız için tamamlanmış içeriği ayarlar.

  • Vurgulanan satır öznitelik ekleme söz dizimini gösterir:

public override void Process(TagHelperContext context, TagHelperOutput output)
{
    output.TagName = "a";    // Replaces <email> with <a> tag

    var address = MailTo + "@" + EmailDomain;
    output.Attributes.SetAttribute("href", "mailto:" + address);
    output.Content.SetContent(address);
}

Bu yaklaşım, öznitelikler koleksiyonunda mevcut olmadığı sürece "href" özniteliği için çalışır. Etiket öznitelikleri koleksiyonunun output.Attributes.Add sonuna bir etiket yardımcısı özniteliği eklemek için yöntemini de kullanabilirsiniz.

  1. Dosyadaki işaretlemeyi şu değişikliklerle güncelleştirin Views/Home/Contact.cshtml :

    @{
    ViewData["Title"] = "Contact Copy";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way Copy Version <br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong><email mail-to="Support"></email><br />
    <strong>Marketing:</strong><email mail-to="Marketing"></email>
</address>

  2. Uygulamayı çalıştırın ve doğru bağlantıları oluşturduğunu doğrulayın.

Dekont

E-posta etiketini kendi kendine kapatma ()<email mail-to="Rick" /> yazarsanız son çıkış da kendi kendine kapanıyor olur. Etiketi yalnızca başlangıç etiketiyle (<email mail-to="Rick">) yazabilme özelliğini etkinleştirmek için sınıfı aşağıdakilerle işaretlemeniz gerekir:

[HtmlTargetElement("email", TagStructure = TagStructure.WithoutEndTag)] 
public class EmailVoidTagHelper : TagHelper
{
    private const string EmailDomain = "contoso.com";
    // Code removed for brevity

Kendi kendini kapatan bir e-posta etiketi yardımcısı ile çıkış olacaktır <a href="mailto:Rick@contoso.com" />. Kendi kendine kapanan yer işareti etiketleri geçerli HTML değildir, bu nedenle bir tane oluşturmak istemezsiniz, ancak kendi kendine kapanan bir etiket yardımcısı oluşturmak isteyebilirsiniz. Etiket yardımcıları, bir etiketi okuduktan sonra özelliğin TagMode türünü ayarlar.

Ayrıca özniteliğini kullanarak [HtmlAttributeName] farklı bir öznitelik adını bir özelliğe eşleyebilirsiniz.

adlı recipient özniteliği özelliğiyle eşlemek MailTo için:

[HtmlAttributeName("recipient")]
public string? MailTo { get; set; }

Özniteliği için recipient Etiket Yardımcısı:

<email recipient="…"/>

ProcessAsync

Bu bölümde, zaman uyumsuz bir e-posta yardımcısı yazacağız.

  1. sınıfını EmailTagHelper aşağıdaki kodla değiştirin:

    public class EmailTagHelper : TagHelper
{
    private const string EmailDomain = "contoso.com";
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        output.TagName = "a";                                 // Replaces <email> with <a> tag
        var content = await output.GetChildContentAsync();
        var target = content.GetContent() + "@" + EmailDomain;
        output.Attributes.SetAttribute("href", "mailto:" + target);
        output.Content.SetContent(target);
    }
}

    Notlar:

    • Bu sürüm zaman uyumsuz ProcessAsync yöntemini kullanır. Zaman uyumsuzGetChildContentAsync, öğesini içeren TagHelperContentbir Task döndürür.

    • HTML öğesinin output içeriğini almak için parametresini kullanın.

  2. Etiket yardımcısının hedef e-postayı Views/Home/Contact.cshtml alabilmesi için dosyada aşağıdaki değişikliği yapın.

    @{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong><email>Support</email><br />
    <strong>Marketing:</strong><email>Marketing</email>
</address>

  3. Uygulamayı çalıştırın ve geçerli e-posta bağlantıları oluşturduğunu doğrulayın.

RemoveAll, PreContent.SetHtmlContent ve PostContent.SetHtmlContent

  1. Aşağıdaki BoldTagHelper sınıfı TagHelpers klasörüne ekleyin.

    using Microsoft.AspNetCore.Razor.TagHelpers;

namespace AuthoringTagHelpers.TagHelpers
{
    [HtmlTargetElement(Attributes = "bold")]
    public class BoldTagHelper : TagHelper
    {
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.Attributes.RemoveAll("bold");
            output.PreContent.SetHtmlContent("<strong>");
            output.PostContent.SetHtmlContent("</strong>");
        }
    }
}

    • özniteliği, [HtmlTargetElement] "bold" adlı bir HTML özniteliği içeren herhangi bir HTML öğesinin eşleşeceğini belirten bir öznitelik parametresi geçirir ve sınıftaki Process geçersiz kılma yöntemi çalıştırılır. Örneğimizde yöntemi " Process bold" özniteliğini kaldırır ve içeren işaretlemeyi ile <strong></strong>çevreler.

    • Mevcut etiket içeriğini değiştirmek istemediğinizden, açma <strong> etiketini yöntemiyle PreContent.SetHtmlContent ve kapanış </strong> etiketini yöntemiyle PostContent.SetHtmlContent yazmanız gerekir.

  2. About.cshtml Görünümü bir öznitelik değeri içerecek şekilde bold değiştirin. Tamamlanmış kod aşağıda gösterilmiştir.

    @{
    ViewData["Title"] = "About";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p bold>Use this area to provide additional information.</p>

<bold> Is this bold?</bold>

  3. Uygulamayı çalıştırma. Kaynağı incelemek ve işaretlemeyi doğrulamak için sık kullandığınız tarayıcıyı kullanabilirsiniz.

    Yukarıdaki [HtmlTargetElement] öznitelik yalnızca "bold" öznitelik adı sağlayan HTML işaretlemesini hedefler. <bold> öğesi etiket yardımcısı tarafından değiştirilmedi.

  4. Öznitelik satırını açıklama satırına [HtmlTargetElement] açıklama ekler ve varsayılan olarak formun <bold> HTML işaretlemesi olan hedefleme etiketlerine <bold>ayarlanır. Varsayılan adlandırma kuralının BoldTagHelper <bold> sınıf adıyla etiketlerle eşleşeceğini unutmayın.

  5. Uygulamayı çalıştırın ve etiketin <bold> etiket yardımcısı tarafından işlendiğini doğrulayın.

Bir sınıfı birden çok [HtmlTargetElement] öznitelikle süslemek, hedeflerin mantıksal VEYA ile sonuçlanıyor. Örneğin, aşağıdaki kodu kullanarak kalın bir etiket veya kalın bir öznitelik eşleşecektir.

[HtmlTargetElement("bold")]
[HtmlTargetElement(Attributes = "bold")]
public class BoldTagHelper : TagHelper
{
    public override void Process(TagHelperContext context, TagHelperOutput output)
    {
        output.Attributes.RemoveAll("bold");
        output.PreContent.SetHtmlContent("<strong>");
        output.PostContent.SetHtmlContent("</strong>");
    }
}

Aynı deyime birden çok öznitelik eklendiğinde, çalışma zamanı bunları mantıksal and olarak ele alır. Örneğin, aşağıdaki kodda, bir HTML öğesinin eşleşmesi için "bold" (<bold bold />) adlı bir öznitelikle "bold" olarak adlandırılması gerekir.

[HtmlTargetElement("bold", Attributes = "bold")]

Hedeflenen öğenin adını değiştirmek için de kullanabilirsiniz [HtmlTargetElement] . Örneğin BoldTagHelper , hedef etiketleri istiyorsanız <MyBold> aşağıdaki özniteliği kullanabilirsiniz:

[HtmlTargetElement("MyBold")]

Modeli Etiket Yardımcısı'na geçirme

  1. Models klasörü ekleyin.

  2. Models klasörüne aşağıdaki WebsiteContext sınıfı ekleyin:

    using System;

namespace AuthoringTagHelpers.Models
{
    public class WebsiteContext
    {
        public Version Version { get; set; }
        public int CopyrightYear { get; set; }
        public bool Approved { get; set; }
        public int TagsToShow { get; set; }
    }
}

  3. Aşağıdaki WebsiteInformationTagHelper sınıfı TagHelpers klasörüne ekleyin.

    using System;
using AuthoringTagHelpers.Models;
using Microsoft.AspNetCore.Razor.TagHelpers;

namespace AuthoringTagHelpers.TagHelpers
{
    public class WebsiteInformationTagHelper : TagHelper
    {
        public WebsiteContext Info { get; set; }

      public override void Process(TagHelperContext context, TagHelperOutput output)
      {
         output.TagName = "section";
         output.Content.SetHtmlContent(
$@"<ul><li><strong>Version:</strong> {Info.Version}</li>
<li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
<li><strong>Approved:</strong> {Info.Approved}</li>
<li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");
         output.TagMode = TagMode.StartTagAndEndTag;
      }
   }
}

    • Daha önce belirtildiği gibi etiket yardımcıları, etiket yardımcıları için Pascal büyük/küçük harfli C# sınıf adlarını ve özelliklerini kebap olayına çevirir. Bu nedenle, içinde Razorkullanmak WebsiteInformationTagHelper için yazın<website-information />.

    • Hedef öğeyi özniteliğiyle [HtmlTargetElement] açıkça tanımlamadığınız için varsayılan website-information öğesi hedeflenir. Aşağıdaki özniteliği uyguladıysanız (kebap örneği olmadığını ancak sınıf adıyla eşleşdiğini unutmayın):

    [HtmlTargetElement("WebsiteInformation")]

    Kebap olayı etiketi <website-information /> eşleşmiyor. özniteliğini [HtmlTargetElement] kullanmak istiyorsanız, aşağıda gösterildiği gibi kebap büyük/küçük harf kullanabilirsiniz:

    [HtmlTargetElement("Website-Information")]

    • Kendi kendine kapanan öğelerin içeriği yoktur. Bu örnekte, Razor işaretleme kendi kendine kapanan bir etiket kullanır, ancak etiket yardımcısı bir bölüm öğesi oluşturur (kendi kendini kapatmaz ve öğenin içine section içerik yazarsınız). Bu nedenle, çıkış yazmak için StartTagAndEndTag olarak ayarlamanız TagMode gerekir. Alternatif olarak, satır ayarını TagMode açıklama satırı yapabilir ve kapanış etiketiyle işaretleme yazabilirsiniz. (Örnek işaretleme bu öğreticinin ilerleyen bölümlerinde sağlanmıştır.)

    • $ Aşağıdaki satırdaki (dolar işareti) ilişkilendirilmiş bir dize kullanır:

    $@"<ul><li><strong>Version:</strong> {Info.Version}</li>

  4. Görünüme aşağıdaki işaretlemeyi About.cshtml ekleyin. Vurgulanan işaretleme, web sitesi bilgilerini görüntüler.

    @using AuthoringTagHelpers.Models
@{
    ViewData["Title"] = "About";
    WebsiteContext webContext = new WebsiteContext {
                                    Version = new Version(1, 3),
                                    CopyrightYear = 1638,
                                    Approved = true,
                                    TagsToShow = 131 };
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<p bold>Use this area to provide additional information.</p>

<bold> Is this bold?</bold>

<h3> web site info </h3>
<website-information info="webContext" />

    Dekont

    Aşağıda gösterilen işaretlemede Razor :

    <website-information info="webContext" />

    Razor özniteliğinin info dize değil sınıf olduğunu bilir ve C# kodu yazmak istiyorsunuz. Dize olmayan herhangi bir etiket yardımcısı özniteliği, karakter olmadan @ yazılmalıdır.

  5. Uygulamayı çalıştırın ve web sitesi bilgilerini görmek için Hakkında görünümüne gidin.

    Dekont

    Aşağıdaki işaretlemeyi bir kapanış etiketiyle kullanabilir ve etiket yardımcısında ile TagMode.StartTagAndEndTag satırını kaldırabilirsiniz:

    <website-information info="webContext" >
</website-information>

Koşul Etiketi Yardımcısı

Koşul etiketi yardımcısı, doğru bir değer geçirildiğinde çıkışı işler.

  1. Aşağıdaki ConditionTagHelper sınıfı TagHelpers klasörüne ekleyin.

    using Microsoft.AspNetCore.Razor.TagHelpers;

namespace AuthoringTagHelpers.TagHelpers
{
    [HtmlTargetElement(Attributes = nameof(Condition))]
    public class ConditionTagHelper : TagHelper
    {
        public bool Condition { get; set; }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (!Condition)
            {
                output.SuppressOutput();
            }
        }
    }
}

  2. Dosyanın içeriğini Views/Home/Index.cshtml aşağıdaki işaretlemeyle değiştirin:

    @using AuthoringTagHelpers.Models
@model WebsiteContext

@{
    ViewData["Title"] = "Home Page";
}

<div>
    <h3>Information about our website (outdated):</h3>
    <Website-InforMation info="Model" />
    <div condition="Model.Approved">
        <p>
            This website has <strong surround="em">@Model.Approved</strong> been approved yet.
            Visit www.contoso.com for more information.
        </p>
    </div>
</div>

  3. denetleyicideki IndexHome yöntemini aşağıdaki kodla değiştirin:

    public IActionResult Index(bool approved = false)
{
    return View(new WebsiteContext
    {
        Approved = approved,
        CopyrightYear = 2015,
        Version = new Version(1, 3, 3, 7),
        TagsToShow = 20
    });
}

  4. Uygulamayı çalıştırın ve giriş sayfasına gidin. Koşulludaki div işaretleme işlenmez. Sorgu dizesini ?approved=true URL'ye ekleyin (örneğin, http://localhost:1235/Home/Index?approved=true). approved true olarak ayarlanır ve koşullu işaretleme görüntülenir.

Dekont

Kalın etiket yardımcısıyla yaptığınız gibi bir dize belirtmek yerine hedef özniteliğini belirtmek için nameof işlecini kullanın:

[HtmlTargetElement(Attributes = nameof(Condition))]
 //   [HtmlTargetElement(Attributes = "condition")]
 public class ConditionTagHelper : TagHelper
{
   public bool Condition { get; set; }

   public override void Process(TagHelperContext context, TagHelperOutput output)
   {
      if (!Condition)
      {
         output.SuppressOutput();
      }
   }
}

Yeniden düzenlenmesi durumunda nameof işleci kodu korur (adı RedConditionolarak değiştirmek isteyebiliriz).

Etiket Yardımcısı çakışmalarını önleme

Bu bölümde, bir çift otomatik bağlama etiketi yardımcısı yazacaksınız. İlki, HTTP ile başlayan bir URL içeren işaretlemeyi aynı URL'yi içeren bir HTML bağlantısı etiketine (ve dolayısıyla URL'ye bir bağlantı oluşturan) değiştirir. İkincisi, WWW ile başlayan bir URL için de aynı işlemi yapar.

Bu iki yardımcı birbiriyle yakından ilişkili olduğundan ve gelecekte bunları yeniden düzenleyebileceği için, bunları aynı dosyada tutacağız.

  1. Aşağıdaki AutoLinkerHttpTagHelper sınıfı TagHelpers klasörüne ekleyin.

    [HtmlTargetElement("p")]
public class AutoLinkerHttpTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var childContent = await output.GetChildContentAsync();
        // Find Urls in the content and replace them with their anchor tag equivalent.
        output.Content.SetHtmlContent(Regex.Replace(
             childContent.GetContent(),
             @"\b(?:https?://)(\S+)\b",
              "<a target=\"_blank\" href=\"$0\">$0</a>"));  // http link version}
    }
}

    Dekont

    AutoLinkerHttpTagHelper sınıfı öğeleri hedefler p ve bağlantı oluşturmak için Regex kullanır.

  2. Dosyanın sonuna aşağıdaki işaretlemeyi Views/Home/Contact.cshtml ekleyin:

    @{
    ViewData["Title"] = "Contact";
}
<h2>@ViewData["Title"].</h2>
<h3>@ViewData["Message"]</h3>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong><email>Support</email><br />
    <strong>Marketing:</strong><email>Marketing</email>
</address>

<p>Visit us at http://docs.asp.net or at www.microsoft.com</p>

  3. Uygulamayı çalıştırın ve etiket yardımcısının tutturucuyu doğru şekilde işleyip işlemediğini doğrulayın.

  4. sınıfını AutoLinkerAutoLinkerWwwTagHelper , www metnini özgün www metnini de içeren bir tutturucu etiketine dönüştürecek şekilde güncelleştirin. Güncelleştirilmiş kod aşağıda vurgulanır:

        [HtmlTargetElement("p")]
    public class AutoLinkerHttpTagHelper : TagHelper
    {
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            var childContent = await output.GetChildContentAsync();
            // Find Urls in the content and replace them with their anchor tag equivalent.
            output.Content.SetHtmlContent(Regex.Replace(
                 childContent.GetContent(),
                 @"\b(?:https?://)(\S+)\b",
                  "<a target=\"_blank\" href=\"$0\">$0</a>"));  // http link version}
        }
    }

    [HtmlTargetElement("p")]
    public class AutoLinkerWwwTagHelper : TagHelper
    {
        public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            var childContent = await output.GetChildContentAsync();
            // Find Urls in the content and replace them with their anchor tag equivalent.
            output.Content.SetHtmlContent(Regex.Replace(
                childContent.GetContent(),
                 @"\b(www\.)(\S+)\b",
                 "<a target=\"_blank\" href=\"http://$0\">$0</a>"));  // www version
        }
    }
}

  5. Uygulamayı çalıştırma. Www metninin bağlantı olarak işlendiğine ancak HTTP metninin işlenmediğine dikkat edin. Her iki sınıfa da kesme noktası koyarsanız, önce HTTP etiketi yardımcı sınıfının çalıştığını görebilirsiniz. Sorun, etiket yardımcı çıkışının önbelleğe alınmış olması ve WWW etiket yardımcısı çalıştırıldığında HTTP etiketi yardımcısından önbelleğe alınan çıkışın üzerine yazmasıdır. Öğreticinin ilerleyen bölümlerinde, yardımcıları etiketlemenin çalıştığı sırayı nasıl denetleyebileceğimizi göreceğiz. Kodu aşağıdakilerle düzelteceğiz:

      public class AutoLinkerHttpTagHelper : TagHelper
  {
      public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
      {
          var childContent = output.Content.IsModified ? output.Content.GetContent() :
              (await output.GetChildContentAsync()).GetContent();

          // Find Urls in the content and replace them with their anchor tag equivalent.
          output.Content.SetHtmlContent(Regex.Replace(
               childContent,
               @"\b(?:https?://)(\S+)\b",
                "<a target=\"_blank\" href=\"$0\">$0</a>"));  // http link version}
      }
  }

  [HtmlTargetElement("p")]
  public class AutoLinkerWwwTagHelper : TagHelper
  {
      public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
      {
          var childContent = output.Content.IsModified ? output.Content.GetContent() : 
              (await output.GetChildContentAsync()).GetContent();

          // Find Urls in the content and replace them with their anchor tag equivalent.
          output.Content.SetHtmlContent(Regex.Replace(
               childContent,
               @"\b(www\.)(\S+)\b",
               "<a target=\"_blank\" href=\"http://$0\">$0</a>"));  // www version
      }
  }

    Dekont

    Otomatik bağlama etiketi yardımcılarının ilk sürümünde, hedefin içeriğini aşağıdaki kodla aldınız:

    var childContent = await output.GetChildContentAsync();

    Yani, yöntemine ProcessAsync geçirilen kullanarak TagHelperOutput çağırırsınızGetChildContentAsync. Daha önce belirtildiği gibi, çıktı önbelleğe alındığından, çalıştırılacak son etiket yardımcısı kazanır. Bu sorunu aşağıdaki kodla düzelttiniz:

    var childContent = output.Content.IsModified ? output.Content.GetContent() : 
    (await output.GetChildContentAsync()).GetContent();

    Yukarıdaki kod, içeriğin değiştirilip değiştirilmediğini denetler ve değiştirilip değiştirilmediğini denetler ve içeriği çıkış arabelleğinden alır.

  6. Uygulamayı çalıştırın ve iki bağlantının beklendiği gibi çalıştığını doğrulayın. Otomatik bağlayıcı etiket yardımcımız doğru ve eksiksiz görünse de, küçük bir sorunu vardır. önce WWW etiketi yardımcısı çalıştırılırsa, www bağlantıları doğru olmaz. Etiketin çalıştığı sırayı Order denetlemek için aşırı yüklemeyi ekleyerek kodu güncelleştirin. özelliği, Order aynı öğeyi hedefleyen diğer etiket yardımcılarına göre yürütme sırasını belirler. Varsayılan sipariş değeri sıfırdır ve önce daha düşük değerlere sahip örnekler yürütülür.

    public class AutoLinkerHttpTagHelper : TagHelper
{
    // This filter must run before the AutoLinkerWwwTagHelper as it searches and replaces http and 
    // the AutoLinkerWwwTagHelper adds http to the markup.
    public override int Order
    {
        get  {  return int.MinValue;   }
    }

    Yukarıdaki kod, HTTP etiketi yardımcısının WWW etiketi yardımcıdan önce çalışmasını garanti eder. MaxValue olarak değiştirin Order ve WWW etiketi için oluşturulan işaretlemenin yanlış olduğunu doğrulayın.

Alt içeriği inceleme ve alma

Etiket yardımcıları içerik almak için çeşitli özellikler sağlar.

  • sonucu GetChildContentAsync sonuna output.Contenteklenebilir.
  • ile GetContentsonucunu GetChildContentAsync inceleyebilirsiniz.
  • öğesini değiştirirseniz output.Content, otomatik bağlayıcı örneğimizde olduğu gibi çağırmadığınız GetChildContentAsync sürece TagHelper gövdesi yürütülemez veya işlenmez:
public class AutoLinkerHttpTagHelper : TagHelper
{
    public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
    {
        var childContent = output.Content.IsModified ? output.Content.GetContent() :
            (await output.GetChildContentAsync()).GetContent();

        // Find Urls in the content and replace them with their anchor tag equivalent.
        output.Content.SetHtmlContent(Regex.Replace(
             childContent,
             @"\b(?:https?://)(\S+)\b",
              "<a target=\"_blank\" href=\"$0\">$0</a>"));  // http link version}
    }
}
  • birden çok çağrısı GetChildContentAsync aynı değeri döndürür ve önbelleğe alınan sonucu kullanmayabileceğinizi belirten bir false parametresi geçirmediğiniz sürece gövdeyi yeniden yürütmez TagHelper .

Yük küçültüldü kısmi görünüm TagHelper

Üretim ortamlarında, küçültüldü kısmi görünümler yüklenerek performans artırılabilir. Üretimde küçültüldü kısmi görünümden yararlanmak için:

  • Kısmi görünümleri en aza indiren bir derleme öncesi işlemi oluşturun/ayarlayın.
  • Geliştirme dışı ortamlarda küçültüldü kısmi görünümleri yüklemek için aşağıdaki kodu kullanın.
public class MinifiedVersionPartialTagHelper : PartialTagHelper
    {
        public MinifiedVersionPartialTagHelper(ICompositeViewEngine viewEngine, 
                                IViewBufferScope viewBufferScope)
                               : base(viewEngine, viewBufferScope)
        {

        }

        public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
        {
            // Append ".min" to load the minified partial view.
            if (!IsDevelopment())
            {
                Name += ".min";
            }

            return base.ProcessAsync(context, output);
        }

        private bool IsDevelopment()
        {
            return Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") 
                                                 == EnvironmentName.Development;
        }
    }