.NET5 MVC6 TagHelpers简单使用

作者:outlela  来源:本站原创   发布时间:2021-1-26 8:32:35

.NET5 MVC6 提供两种自定义UI扩展方式:

一种是自定义HTML标签的方式:使用TagHelpers(标签)

第二种是返回自定义内容的方式:使用ViewComponent(组件)


本次进行简单入门记录的是:TagHelpers

首先来看看MVC6的Razor页面里自带的Tag,如下:

<label asp-for="Price" class="control-label">商品价格:</label>

其中:asp-for 就是MVC6自带的标记帮助器,在编辑的时候是带有智能提示的,且在转换成HTML代码的时候,会自动转换成如下格式:

<label class="control-label" for="Price">商品价格:</label>

如何自定义标签和标签上的属性呢?先来看一段简单的自定义代码:

    [HtmlTargetElement("del-button")]
    public class DelTagHelper : TagHelper
    {
        public string title => "删除";
        public string url { get; set; }

        public object id { get; set; }

        public bool disabled { get; set; }
        public bool hide { get; set; }

        public bool verify { get; set; } = true;

        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            if (verify)
            {
                hide = TagTool.VerifyLink(url);
            }
            if (!hide)
            {
                output.TagName = "a";
                output.TagMode = TagMode.StartTagAndEndTag;

                output.Attributes.SetAttribute("rel", "tooltip");
                if (disabled)
                {
                    output.Attributes.SetAttribute("class", "btn btn-danger disabled");
                    output.Attributes.SetAttribute("disabled", "disabled");
                }
                else
                {
                    output.Attributes.SetAttribute("class", "btn btn-danger");
                    output.Attributes.SetAttribute("onclick", $"delitem(this,{id})");
                    output.Attributes.SetAttribute("href", url);
                    output.Attributes.SetAttribute("data-id", id);
                }

                output.Attributes.SetAttribute("title", title);
                output.Content.SetHtmlContent("<i class=\"icon-delete\"></i>");
            }
            else
            {

            }
        }
    }

在Razor视图中使用方法:

<del-button id="@item.Id" url="@Url.Action("DeleteMenu")"></del-button>

在编辑的时候,id,url也都有智能提示,对开发的效率有极大提升。


好的现在解释一下代码:

一、[HtmlTargetElement("del-button")]:引号里面的名称即为我的在Razor视图中使用的标签名(ps:是带有智能提示的哦)

类的前面声名了6个属性,这6个属性可以在Razor视图中我们自定义的标签上使用,且带智能提示,意思就不讲解了就是字面意思。

特别讲一下verify,他是权限验证,默认是给到了权限验证的,没有权限就不会显示,这对需要进行权限验证的项目帮助极大。


二、public override void Process(TagHelperContext context, TagHelperOutput output)即为对Tag的封装,output即为我们要输出到界面的内容


三、output.TagName = "a";指定输出的标签为a标签


四、output.TagMode = TagMode.StartTagAndEndTag;指定输出的Tag标签是包含开始和结束的(有些html标签是不需要结束的,比如:input)


五、output.Attributes.SetAttribute("rel", "tooltip");设置其他自定义属性,rel为属性名,tooltip是属性值。


六、output.Content.SetHtmlContent("<i class=\"icon-delete\"></i>");在a标签内添加html内容


造成的html代码如下:

<a rel="tooltip" class="btn btn-danger" onclick="delitem(this,36)" href="/Auth/DeleteMenu" data-id="36" title="" data-original-title="删除"><i class="icon-delete"></i></a>

效果图如下:

image.png

更多操作请前往微软官方文档

*本文最后修改于:2021-1-27 8:56:44
本文标签: .NET5 MVC6 TagHelpers
本文由本站原创发布, 本文链接地址:https://outlela.com/Code/106.html
转载或引用请保留地址并注明出处:outlela.com