.Net Core 表单组件封装-TagHelper

在表单中会有大量的HTML元素会重复，包括样式，数据绑定等等，通过TagHelper来进行自定义的封装

 

这里以LayUI的日期控件举例，

 

官网的日期控件使用：

1. <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
2. <input type="text" class="layui-input" id="test1">
3. </div>
4. <script src="/static/build/layui.js"></script>
5. <script>
6. layui.use('laydate', function(){
7. var laydate = layui.laydate;
8. //执行一个laydate实例
9. laydate.render({
10. elem: '#test1' //指定元素
11. });
12. });
13. </script>

封装后的代码量

<form:DateTime name="CreateTime" is-now="true"></form:DateTime>

 

步骤如下：

1.创建DateTimeTagHelper类

    

[HtmlTargetElement("form:DateTime")]
    /// <summary>
    /// 日期控件
    /// </summary>
    public class DateTimeTagHelper : TagHelper
    {
        /// <summary>
        /// 控件Name
        /// </summary>
        public string Name { get; set; }
        /// <summary>
        /// 是否显示当前时间
        /// </summary>
        public bool IsNow { get; set; }
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            output.TagName = "input";
            output.Attributes.Add("type", "text");
            output.Attributes.Add("class", "layui-input");
            output.Attributes.Add("id", Name);
            output.Attributes.Add("name", Name);
            output.Attributes.Add("placeholder", "yyyy-MM-dd");
            if (IsNow)
            {
                output.Attributes.Add("value", DateTime.Now.ToString("yyyy-MM-dd"));
            }
            output.TagMode = TagMode.StartTagAndEndTag;
            output.PostElement.SetHtmlContent($@"
       
           <script>
            layui.use('laydate', function(){{
                  var laydate = layui.laydate;
  
                  //执行一个laydate实例
                  laydate.render({{
                    elem: '#{Name}' //指定元素
                ,change:function(value){{
                      $('#{Name}').val(value);   
                }}
                  }});
                }});
            </script>");
        }
    }

HtmlTargetElement：标签的名称

Attributes:定义用于选择匹配应用元素的属性

PostElement.SetHtmlContent:增加需要的HTML元素

 

2.在_ViewImports.cshtml注册DateTimeTagHelper

@using NetCoreFrame.WebUI
@using NetCoreFrame.WebUI.Models
@addTagHelper "NetCoreFrame.WebUI.TagHelpers.DateTimeTagHelper,NetCoreFrame.WebUI"

 

3.使用 注册成功后，标签的字体会变粗

<div class="layui-inline">
        <label class="layui-form-label">发布日期</label>
        <div class="layui-input-block">
            <form:DateTime name="CreateTime" is-now="true"></form:DateTime>
        </div>
    </div>