.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>
效果图如下：
更多操作请前往微软官方文档