Bagikan melalui

Pembuat Tag Helpers di ASP.NET Core

  • Artikel

Oleh Rick Anderson

Melihat atau mengunduh kode sampel (cara mengunduh)

Mulai menggunakan Pembantu Tag

Tutorial ini menyediakan pengantar Bantuan Tag pemrograman. Pengantar Bantuan Tag menjelaskan manfaat yang diberikan Oleh Pembantu Tag.

Pembantu tag adalah kelas apa pun yang mengimplementasikan ITagHelper antarmuka. Namun, ketika Anda menulis pembantu tag, Anda umumnya berasal dari TagHelper, melakukannya memberi Anda akses ke metode .Process

  1. Buat proyek ASP.NET Core baru yang disebut AuthoringTagHelpers. Anda tidak memerlukan autentikasi untuk proyek ini.

  2. Buat folder untuk menahan Pembantu Tag yang disebut TagHelpers. Folder TagHelperstidak diperlukan, tetapi ini adalah konvensi yang wajar. Sekarang mari kita mulai menulis beberapa pembantu tag sederhana.

Pembantu Tag minimal

Di bagian ini, Anda menulis pembantu tag yang memperbarui tag email. Contohnya:

<email>Support</email>

Server akan menggunakan pembantu tag email kami untuk mengonversi markup tersebut menjadi yang berikut:

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

Artinya, tag jangkar yang menjadikan ini tautan email. Anda mungkin ingin melakukan ini jika Anda menulis mesin blog dan membutuhkannya untuk mengirim email untuk pemasaran, dukungan, dan kontak lainnya, semuanya ke domain yang sama.

  1. Tambahkan kelas berikut EmailTagHelper ke folder TagHelpers .

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

    • Pembantu tag menggunakan konvensi penamaan yang menargetkan elemen nama kelas akar (dikurangi bagian TagHelper dari nama kelas). Dalam contoh ini, nama akar EmailTagHelper adalah email, sehingga <email> tag akan ditargetkan. Konvensi penamaan ini harus berfungsi untuk sebagian besar pembantu tag, nanti saya akan menunjukkan cara mengambil alihnya.

    • Kelas EmailTagHelper ini berasal dari TagHelper. Kelas ini TagHelper menyediakan metode dan properti untuk menulis Pembantu Tag.

    • Metode yang ditimpa Process mengontrol apa yang dilakukan pembantu tag saat dijalankan. Kelas ini TagHelper juga menyediakan versi asinkron (ProcessAsync) dengan parameter yang sama.

    • Parameter konteks ke Process (dan ProcessAsync) berisi informasi yang terkait dengan eksekusi tag HTML saat ini.

    • Parameter output ke Process (dan ProcessAsync) berisi perwakilan elemen HTML stateful dari sumber asli yang digunakan untuk menghasilkan tag dan konten HTML.

    • Nama kelas kami memiliki akhiran TagHelper, yang tidak diperlukan, tetapi dianggap sebagai konvensi praktik terbaik. Anda dapat mendeklarasikan kelas sebagai:

    public class Email : TagHelper

  2. Untuk membuat EmailTagHelper kelas tersedia untuk semua tampilan kami Razor , tambahkan direktif addTagHelper ke Views/_ViewImports.cshtml file:

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

    Kode di atas menggunakan sintaks kartubebas untuk menentukan semua pembantu tag di assembly kami akan tersedia. String pertama setelah @addTagHelper menentukan pembantu tag untuk dimuat (Gunakan "*" untuk semua pembantu tag), dan string kedua "AuthoringTagHelpers" menentukan rakitan tempat pembantu tag berada. Perhatikan juga bahwa baris kedua membawa pembantu tag ASP.NET Core MVC menggunakan sintaks kartubebas (pembantu tersebut dibahas dalam Pengenalan Pembantu Tag.) Ini adalah arahan @addTagHelper yang membuat pembantu tag tersedia untuk Razor tampilan. Atau, Anda dapat memberikan nama yang sepenuhnya memenuhi syarat (FQN) dari pembantu tag seperti yang ditunjukkan di bawah ini:

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

Untuk menambahkan pembantu tag ke tampilan menggunakan FQN, Anda terlebih dahulu menambahkan FQN (AuthoringTagHelpers.TagHelpers.EmailTagHelper), lalu nama rakitan (AuthoringTagHelpers, belum tentu namespace). Sebagian besar pengembang akan lebih suka menggunakan sintaks kartubebas. Pengantar Pembantu Tag masuk ke detail tentang penambahan pembantu tag, penghapusan, hierarki, dan sintaks kartubebas.

  1. Perbarui markup dalam Views/Home/Contact.cshtml file dengan perubahan ini:

    @{
    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. Jalankan aplikasi dan gunakan browser favorit Anda untuk melihat sumber HTML sehingga Anda dapat memverifikasi bahwa tag email diganti dengan markup jangkar (Misalnya, <a>Support</a>). Dukungan dan Pemasaran dirender sebagai tautan, tetapi tidak memiliki href atribut untuk membuatnya berfungsi. Kami akan memperbaikinya di bagian berikutnya.

SetAttribute dan SetContent

Di bagian ini, kita akan memperbarui EmailTagHelper sehingga akan membuat tag jangkar yang valid untuk email. Kami akan memperbaruinya untuk mengambil informasi dari Razor tampilan (dalam bentuk mail-to atribut) dan menggunakannya dalam menghasilkan jangkar.

EmailTagHelper Perbarui kelas dengan yang berikut ini:

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

  • Kelas kasus Pascal dan nama properti untuk pembantu tag diterjemahkan ke dalam kasus kebab mereka. Oleh karena itu, untuk menggunakan MailTo atribut , Anda akan menggunakan <email mail-to="value"/> yang setara.

  • Baris terakhir mengatur konten yang telah selesai untuk pembantu tag kami yang berfungsi minimal.

  • Baris yang disorot menunjukkan sintaks untuk menambahkan atribut:

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

Pendekatan tersebut berfungsi untuk atribut "href" selama saat ini tidak ada dalam koleksi atribut. Anda juga dapat menggunakan output.Attributes.Add metode untuk menambahkan atribut pembantu tag ke akhir kumpulan atribut tag.

  1. Perbarui markup dalam Views/Home/Contact.cshtml file dengan perubahan ini:

    @{
    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. Jalankan aplikasi dan verifikasi bahwa aplikasi menghasilkan tautan yang benar.

Catatan

Jika Anda menulis tag email penutupan mandiri (<email mail-to="Rick" />), output akhir juga akan ditutup sendiri. Untuk mengaktifkan kemampuan untuk menulis tag hanya dengan tag mulai (<email mail-to="Rick">) Anda harus menandai kelas dengan yang berikut:

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

Dengan pembantu tag email penutupan mandiri, outputnya adalah <a href="mailto:Rick@contoso.com" />. Tag jangkar penutupan mandiri bukan HTML yang valid, jadi Anda tidak ingin membuatnya, tetapi Anda mungkin ingin membuat pembantu tag yang menutup diri. Pembantu tag mengatur jenis TagMode properti setelah membaca tag.

Anda juga dapat memetakan nama atribut yang berbeda ke properti menggunakan [HtmlAttributeName] atribut .

Untuk memetakan atribut bernama recipient ke MailTo properti :

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

Tag Helper untuk recipient atribut :

<email recipient="…"/>

ProcessAsync

Di bagian ini, kita akan menulis pembantu email asinkron.

  1. EmailTagHelper Ganti kelas dengan kode berikut:

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

    Catatan:

    • Versi ini menggunakan metode asinkron ProcessAsync . Asinkron GetChildContentAsync mengembalikan yang Task berisi TagHelperContent.

    • output Gunakan parameter untuk mendapatkan konten elemen HTML.

  2. Lakukan perubahan berikut pada Views/Home/Contact.cshtml file sehingga pembantu tag bisa mendapatkan email target.

    @{
    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. Jalankan aplikasi dan verifikasi bahwa aplikasi menghasilkan tautan email yang valid.

RemoveAll, PreContent.SetHtmlContent dan PostContent.SetHtmlContent

  1. Tambahkan kelas berikut BoldTagHelper ke folder TagHelpers .

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

    • Atribut [HtmlTargetElement] meneruskan parameter atribut yang menentukan bahwa elemen HTML apa pun yang berisi atribut HTML bernama "tebal" akan cocok, dan Process metode penimpaan di kelas akan berjalan. Dalam sampel kami, Process metode menghapus atribut "tebal" dan mengelilingi markup yang berisi dengan <strong></strong>.

    • Karena Anda tidak ingin mengganti konten tag yang ada, Anda harus menulis tag pembuka <strong> dengan PreContent.SetHtmlContent metode dan tag penutup </strong> dengan PostContent.SetHtmlContent metode .

  2. About.cshtml Ubah tampilan untuk berisi bold nilai atribut. Kode yang telah selesai ditunjukkan di bawah ini.

    @{
    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. Jalankan aplikasi. Anda dapat menggunakan browser favorit Anda untuk memeriksa sumber dan memverifikasi markup.

    Atribut [HtmlTargetElement] di atas hanya menargetkan markup HTML yang menyediakan nama atribut "tebal". Elemen <bold> tidak dimodifikasi oleh pembantu tag.

  4. Komentari [HtmlTargetElement] baris atribut dan itu akan default untuk menargetkan <bold> tag, yaitu, markup HTML formulir <bold>. Ingat, konvensi penamaan default akan cocok dengan nama kelas BoldTagHelper dengan <bold> tag.

  5. Jalankan aplikasi dan verifikasi bahwa <bold> tag diproses oleh pembantu tag.

Menghias kelas dengan beberapa [HtmlTargetElement] atribut menghasilkan logis-OR dari target. Misalnya, menggunakan kode di bawah ini, tag tebal atau atribut tebal akan cocok.

[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>");
    }
}

Saat beberapa atribut ditambahkan ke pernyataan yang sama, runtime memperlakukannya sebagai logis-AND. Misalnya, dalam kode di bawah ini, elemen HTML harus diberi nama "tebal" dengan atribut bernama "tebal" (<bold bold />) agar cocok.

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

Anda juga dapat menggunakan [HtmlTargetElement] untuk mengubah nama elemen yang ditargetkan. Misalnya jika Anda ingin menargetkan BoldTagHelper<MyBold> tag, Anda akan menggunakan atribut berikut:

[HtmlTargetElement("MyBold")]

Meneruskan model ke Pembantu Tag

  1. Tambahkan folder Model.

  2. Tambahkan kelas berikut WebsiteContext ke folder Model :

    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. Tambahkan kelas berikut WebsiteInformationTagHelper ke folder TagHelpers .

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

    • Seperti disebutkan sebelumnya, pembantu tag menerjemahkan nama kelas C# kasus Pascal dan properti untuk pembantu tag ke dalam kasus kebab. Oleh karena itu, untuk menggunakan WebsiteInformationTagHelper di Razor, Anda akan menulis <website-information />.

    • Anda tidak secara eksplisit mengidentifikasi elemen target dengan [HtmlTargetElement] atribut , sehingga default website-information akan ditargetkan. Jika Anda menerapkan atribut berikut (perhatikan bahwa itu bukan kasus kebab tetapi cocok dengan nama kelas):

    [HtmlTargetElement("WebsiteInformation")]

    Tag <website-information /> kasus kebab tidak akan cocok. Jika Anda ingin menggunakan [HtmlTargetElement] atribut , Anda akan menggunakan kasus kebab seperti yang ditunjukkan di bawah ini:

    [HtmlTargetElement("Website-Information")]

    • Elemen yang menutup sendiri tidak memiliki konten. Untuk contoh ini, Razor markup akan menggunakan tag penutupan mandiri, tetapi pembantu tag akan membuat elemen bagian (yang tidak menutup sendiri dan Anda menulis konten di dalam section elemen ). Oleh karena itu, Anda perlu mengatur TagMode ke untuk StartTagAndEndTag menulis output. Atau, Anda dapat mengomentari pengaturan TagMode baris dan menulis markup dengan tag penutup. (Contoh markup disediakan nanti dalam tutorial ini.)

    • $ (tanda dolar) dalam baris berikut menggunakan string terinterpolasi:

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

  4. Tambahkan markup berikut ke About.cshtml tampilan. Markup yang disorot menampilkan informasi situs web.

    @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" />

    Catatan

    Dalam markup yang ditunjukkan Razor di bawah ini:

    <website-information info="webContext" />

    Razorinfo tahu atributnya adalah kelas, bukan string, dan Anda ingin menulis kode C#. Atribut pembantu @ tag non-string harus ditulis tanpa karakter.

  5. Jalankan aplikasi, dan navigasi ke tampilan Tentang untuk melihat informasi situs web.

    Catatan

    Anda dapat menggunakan markup berikut dengan tag penutup dan menghapus baris dengan TagMode.StartTagAndEndTag di pembantu tag:

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

Pembantu Tag Kondisi

Pembantu tag kondisi merender output saat melewati nilai benar.

  1. Tambahkan kelas berikut ConditionTagHelper ke folder TagHelpers .

    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. Ganti konten Views/Home/Index.cshtml file dengan markup berikut:

    @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. Index Ganti metode di Home pengontrol dengan kode berikut:

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

  4. Jalankan aplikasi dan telusuri ke halaman beranda. Markup dalam kondisi div tidak akan dirender. Tambahkan string ?approved=true kueri ke URL (misalnya, http://localhost:1235/Home/Index?approved=true). approved diatur ke true dan markup bersyarat akan ditampilkan.

Catatan

Gunakan operator nameof untuk menentukan atribut yang akan ditargetkan daripada menentukan string seperti yang Anda lakukan dengan pembantu tag tebal:

[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();
      }
   }
}

Operator nameof akan melindungi kode jika pernah direfaktor (kita mungkin ingin mengubah nama menjadi RedCondition).

Hindari konflik Pembantu Tag

Di bagian ini, Anda menulis sepasang pembantu tag penautan otomatis. Yang pertama akan menggantikan markup yang berisi URL yang dimulai dengan HTTP ke tag jangkar HTML yang berisi URL yang sama (dan dengan demikian menghasilkan tautan ke URL). Yang kedua akan melakukan hal yang sama untuk URL yang dimulai dengan WWW.

Karena kedua pembantu ini terkait erat dan Anda dapat merefaktornya di masa mendatang, kami akan menyimpannya dalam file yang sama.

  1. Tambahkan kelas berikut AutoLinkerHttpTagHelper ke folder TagHelpers .

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

    Catatan

    Kelas AutoLinkerHttpTagHelper menargetkan p elemen dan menggunakan Regex untuk membuat jangkar.

  2. Tambahkan markup berikut ke akhir Views/Home/Contact.cshtml file:

    @{
    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. Jalankan aplikasi dan verifikasi bahwa pembantu tag merender jangkar dengan benar.

  4. AutoLinker Perbarui kelas untuk menyertakan AutoLinkerWwwTagHelper yang akan mengonversi teks www menjadi tag jangkar yang juga berisi teks www asli. Kode yang diperbarui disorot di bawah ini:

        [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. Jalankan aplikasi. Perhatikan teks www dirender sebagai tautan tetapi teks HTTP tidak. Jika Anda meletakkan titik henti di kedua kelas, Anda dapat melihat bahwa kelas pembantu tag HTTP berjalan terlebih dahulu. Masalahnya adalah bahwa output pembantu tag di-cache, dan ketika pembantu tag WWW dijalankan, ia menimpa output yang di-cache dari pembantu tag HTTP. Nanti dalam tutorial kita akan melihat cara mengontrol urutan yang dijalankan pembantu tag. Kami akan memperbaiki kode dengan yang berikut:

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

    Catatan

    Pada edisi pertama pembantu tag penautan otomatis, Anda mendapatkan konten target dengan kode berikut:

    var childContent = await output.GetChildContentAsync();

    Artinya, Anda memanggil GetChildContentAsync menggunakan yang diteruskan TagHelperOutput ke ProcessAsync metode . Seperti disebutkan sebelumnya, karena output di-cache, pembantu tag terakhir untuk menjalankan menang. Anda memperbaiki masalah tersebut dengan kode berikut:

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

    Kode di atas memeriksa untuk melihat apakah konten telah dimodifikasi, dan jika ada, kode tersebut mendapatkan konten dari buffer output.

  6. Jalankan aplikasi dan verifikasi bahwa dua tautan berfungsi seperti yang diharapkan. Meskipun mungkin muncul pembantu tag auto linker kami sudah benar dan selesai, itu memiliki masalah yang halang. Jika pembantu tag WWW berjalan terlebih dahulu, tautan www tidak akan benar. Perbarui kode dengan menambahkan Order kelebihan beban untuk mengontrol urutan yang dijalankan tag. Properti Order menentukan urutan eksekusi relatif terhadap pembantu tag lain yang menargetkan elemen yang sama. Nilai pesanan default adalah nol dan instans dengan nilai yang lebih rendah dijalankan terlebih dahulu.

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

    Kode sebelumnya menjamin bahwa pembantu tag HTTP berjalan sebelum pembantu tag WWW. Ubah Order ke MaxValue dan verifikasi bahwa markup yang dihasilkan untuk tag WWW salah.

Memeriksa dan mengambil konten anak

Pembantu tag menyediakan beberapa properti untuk mengambil konten.

  • Hasil dari GetChildContentAsync dapat ditambahkan ke output.Content.
  • Anda dapat memeriksa hasilnya GetChildContentAsync dengan GetContent.
  • Jika Anda memodifikasi output.Content, isi TagHelper tidak akan dieksekusi atau dirender kecuali Anda memanggil GetChildContentAsync seperti dalam sampel auto-linker kami:
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}
    }
}
  • Beberapa panggilan untuk GetChildContentAsync mengembalikan nilai yang sama dan tidak menjalankan TagHelper kembali isi kecuali Anda meneruskan parameter false yang menunjukkan untuk tidak menggunakan hasil yang di-cache.

Muat tagHelper tampilan parsial yang dikurangi

Di lingkungan produksi, performa dapat ditingkatkan dengan memuat tampilan parsial yang dikurangi. Untuk memanfaatkan tampilan parsial yang dikurangi dalam produksi:

  • Buat/siapkan proses pra-build yang meminimalkan tampilan parsial.
  • Gunakan kode berikut untuk memuat tampilan parsial yang dikurangi di lingkungan non-pengembangan.
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;
        }
    }