TagHelper 中使用及命名问题

12/6/2021 10:42:12 AM
718
0

自定义一个 TagHelper       ViewContext 引用的空间 using Microsoft.AspNetCore.Mvc.Rendering;

    [HtmlTargetElement("card")]
    public class CardTagHelper: TagHelper
    {
        public string Title { get; set; }
        public string Icon { get; set; }
        public string Url { get; set; }
        public string Tag { get; set; }

        [ViewContext]
        public ViewContext viewContext { get; set; }

        IWorkOrderService workOrderService;
        public   CardTagHelper(IWorkOrderService workOrderService)
        {
            this.workOrderService = workOrderService;
        }

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = Tag??"div";
            output.TagMode = TagMode.StartTagAndEndTag;

            
            var preContent = new StringBuilder();
            preContent.Append("<a>test</a>");
            viewContext.ViewBag.zhangsan = Title;
            int count = 0;
            var list = workOrderService.PageFind(0, null, null, null, null, null, 0, 1, 10, out count);
            viewContext.ViewBag.list = list;
            viewContext.ViewBag.count = count;

            output.PreContent.SetHtmlContent(preContent.ToString());
            output.PreContent.SetContent(Icon);
        }
    }

 

 Microsoft.AspNetCore.Mvc 中也有一个 ViewContext ,注意不要引用错

前端的写法
引入名称和所在程序集
@addTagHelper  CooperAdmin.CardTagHelper,CooperAdmin

这里嵌套调用
<card title="myTitle" icon="myIcon" url="redirectUrl">
    @ViewBag.zhangsan
    <ul>
        @foreach (var li in ViewBag.list)
        {
            <li>@li.Id, @li.Name</li>
        }
    </ul>
    <card title="myTitle2" icon="myIcon2" url="redirectUrl2">
    </card>
</card>

 

生成的代码:

<div>myIcon
    myTitle
    <ul>
            <li>6643, 苍茫的天涯是我的爱</li>
            <li>6642, 苍茫的天涯是我的爱</li>
            <li>6641, 苍茫的天涯是我的爱</li>
            <li>6640, 苍茫的天涯是我的爱</li>
            <li>6639, 苍茫的天涯是我的爱</li>
            <li>6638, 苍茫的天涯是我的爱</li>
            <li>6637, 苍茫的天涯是我的爱</li>
            <li>6636, 动可爱的人</li>
    </ul>
    <div>myIcon2</div>
</div>

值得注意的是使用标签时标签的名称和标签的属性名和程序代码中的属性不是完全一致的。在遇到标记名称和属性是由多个单词组成时应该注意

  • 标记帮助程序采用 Pascal 大小写格式的类和属性名将转换为各自相应的短横线格式。因此,要使用 MailTo 属性,请使用 <email mail-to="value"/> 等效项。
  • 未显式标识具有 [HtmlTargetElement] 属性的目标元素,标记帮助程序采用 Pascal 大小写格式的 C# 类名和属性转换为短横线格式。 因此,要在 Razor 中使用 WebsiteInformationTagHelper,请编写 <website-information />

 

全部评论



提问