.net core 下的TagHelper自定义新手提醒

最近一直在学习.net core 最近刚开始学习Taghelper的自定义。今天我发现了微软官方文档的一个错误,觉得立马要和大家分享出来,免得后边的人和我走一样的弯路

 首先这是微软官网关于TagHelper的自定义使用说明链接 https://docs.microsoft.com/en-us/aspnet/core/mvc/views/tag-helpers/authoring 无奈我的英语水平不太好,勉强还能看懂。

     在这一章 这一小节 Passing a model to a Tag Helper 的说明中 

    首先声明了Models 文件夹下声明一个类 

复制代码
1   public class WebsiteContext
2     {
3         public Version Version { get; set; }
4         public int CopyrightYear { get; set; }
5         public bool Approved { get; set; }
6         public int TagsToShow { get; set; }
7     }
复制代码

    接下来他的自定义TagHelper要使用这个类 

复制代码
 1   public class WebsiteInformationTagHelper : TagHelper
 2     {
 3         public WebsiteContext Info { get; set; }
 4 
 5       public override void Process(TagHelperContext context, TagHelperOutput output)
 6       {
 7          output.TagName = "section";
 8          output.Content.SetHtmlContent(
 9 $@"<ul><li><strong>Version:</strong> {Info.Version}</li>
10 <li><strong>Copyright Year:</strong> {Info.CopyrightYear}</li>
11 <li><strong>Approved:</strong> {Info.Approved}</li>
12 <li><strong>Number of tags to show:</strong> {Info.TagsToShow}</li></ul>");
13          output.TagMode = TagMode.StartTagAndEndTag;
14       }
15    }
复制代码

     在接下来在前台他要是用这个TagHelper

复制代码
 1 @using AuthoringTagHelpers.Models
 2 @{
 3     ViewData["Title"] = "About";
 4 }
 5 <h2>@ViewData["Title"].</h2>
 6 <h3>@ViewData["Message"]</h3>
 7 
 8 <p bold>Use this area to provide additional information.</p>
 9 
10 <bold> Is this bold?</bold>
11 
12 <h3> web site info </h3>
13 <website-information info="new WebsiteContext {
14                                     Version = new Version(1, 3),
15                                     CopyrightYear = 1638,
16                                     Approved = true,
17                                     TagsToShow = 131 }" />
复制代码

      这个就是他的使用过程 。

    如果 按照他的说明这样做完之后你会发现根本不行,浏览器报错  错误很明显 无法将Version类型转化为String类型

好了这里改一下 

复制代码
<Website-Information info="new WebSiteContext {
                                   
                                  Version = new string('1', 3),
                                    CopyrightYear = 1638,
                                    Approved = true,
                                    TagsToShow = 131 }" ></Website-Information>
复制代码

 

 这会测试的时候改完之后就可以直接运行了。原来在改之后还会出现一个错误。  <Website-Information info="......"></Website-Information>会报出无法识别 info这个属性, 给大家分析一下 首先Website-Information这个Tag是原本都没有的,是我们自己定义的。所以它本身也就不存在什么属性,而这里直接使用它的info属性。它肯定无法识别,所以在这里我们需要对其自定义的时候加上这个属性,让编译器能够识别 。

复制代码
public class WebsiteInfomationTagHelper : TagHelper
    {
        public WebSiteContext Info { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {

            output.TagName = "section";
            //如果说添加的属性不存在用add方法
            output.Attributes.Add("info", Info);
            //添加的属性存在则用setAttribute方法
            //output.Attributes.SetAttribute("info", info);
            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;

        }
    }
复制代码

    这样进行一番修改之后就可以运行了 这是运行的结果

     可能本人才疏学浅。毕竟刚开始学没两天。有什么问题欢迎在评论区评论。我会第一时间进行回复。希望大家一起帮助一起成长。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值