MVC自定义标签TagHelper

原创 Laughing  2017-08-27 17:02  阅读 83 次 评论 0 条

MVC中微软为我们预置了很多常用的标签助手,当系统预置的标签助手满足不了我们需要时,我们可以实现自己自定义的标签助手。

实现自定义标签助手

实现自定义标签助手的方法也很简单,
1、继承TagHrlper类
2、重写process方法

实战TagHelper

实现一个简单的Email标签助手

EmailTagHelper.cs
  1. using System;  
  2. using Microsoft.AspNetCore.Razor.TagHelpers;  
  3.   
  4. namespace Razor.TagHelpers  
  5. {  
  6.     public class EmailTagHelper:TagHelper  
  7.     {  
  8.         private const string emailDomain = "lisen.me";  
  9.         public string MailTo { getset; }  
  10.   
  11.         public override void Process(TagHelperContext context, TagHelperOutput output)  
  12.         {  
  13.             output.TagName = "a";  
  14.             var address = MailTo + "@" + emailDomain;  
  15.             output.Attributes.SetAttribute("href","mailto:"+address);  
  16.             output.Attributes.Add("href1","www.lisen.me");  
  17.             output.Content.SetContent(address);  
  18.         }  
  19.     }  
  20. }  
BoldTagHelper.cs
  1. using System;  
  2. using Microsoft.AspNetCore.Html;  
  3. using Microsoft.AspNetCore.Razor.TagHelpers;  
  4.   
  5. namespace Razor.TagHelpers  
  6. {  
  7.     [HtmlTargetElement(Attributes = "bold")]  
  8.     public class BoldTagHelper:TagHelper  
  9.     {  
  10.         public override void Process(TagHelperContext context, TagHelperOutput output)  
  11.         {  
  12.             output.Attributes.RemoveAll("bold");  
  13.             output.Attributes.Add("color","red");  
  14.             output.PreContent.SetHtmlContent("<strong>");  
  15.             output.PostContent.SetHtmlContent("</strong>");  
  16.         }  
  17.     }  
  18. }  
WebsiteInformationTagHelper.cs
  1. using System;  
  2. using Microsoft.AspNetCore.Razor.TagHelpers;  
  3. using Razor.Models;  
  4.   
  5. namespace Razor.TagHelpers  
  6. {  
  7.     public class WebsiteInformationTagHelper:TagHelper  
  8.     {  
  9.         public WebsiteContext Info { getset; }  
  10.   
  11.         public override void Process(TagHelperContext context, TagHelperOutput output)  
  12.         {  
  13.             output.TagName = "section";  
  14.             output.Content.SetHtmlContent(  
  15.                 $@"<ul><li><strong>Version:</strong> {Info.Version}</li> 
  16. <li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li> 
  17. <li><strong>Approved:</strong> {Info.Approved}</li> 
  18. <li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");  
  19.             output.TagMode = TagMode.StartTagAndEndTag;  
  20.         }  
  21.     }  
  22. }  
index.cshtml
  1. @page  
  2. @using System  
  3. @using System.Collections.Generic  
  4. @using System.IO  
  5. @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers  
  6. @addTagHelper *, AuthoringTagHelpers  
  7. @addTagHelper Razor.TagHelpers.EmailTagHelper,Razor  
  8. @addTagHelper Razor.TagHelpers.BoldTagHelper,Razor  
  9. @addTagHelper Razor.TagHelpers.WebsiteInformationTagHelper,Razor  
  10. @using Razor.Models  
  11.   
  12. @model IndexModel  
  13. @{  
  14.     ViewData["Title"] = "Home page";  
  15. }  
  16.   
  17. <email mail-to="lisen">Email</email>  
  18. <p bold>测试一下</p>  
  19.   
  20. <website-information info="new WebsiteContext{Version = new Version(1, 3), 
  21.                                     CopyrightYear = 1638, 
  22.                                     Approved = true, 
  23.                                     TagsToShow = 131}"/>  
WebsiteContext.cs
  1. using System;  
  2.   
  3. namespace Razor.Models  
  4. {  
  5.     public class WebsiteContext  
  6.     {  
  7.         public Version Version { getset; }  
  8.         public int CopyrightYear { getset; }  
  9.         public bool Approved { getset; }  
  10.         public int TagsToShow { getset; }  
  11.     }  
  12. }  
本文地址:https://www.lisen.me/mvc-taghelper-custom-tag.html
版权声明:本文为原创文章,版权归 木子网 所有,欢迎分享本文,转载请保留出处!

发表评论


表情