NetCore TagHelper随笔

最新推荐文章于 2023-08-24 08:59:58 发布

ks_xs_2012

最新推荐文章于 2023-08-24 08:59:58 发布

阅读量246

点赞数

分类专栏： Netcore 文章标签： netcore TagHelper

本文链接：https://blog.csdn.net/ks_xs_2012/article/details/101427140

版权

Netcore 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

TagHelpers 能够让服务端代码参与创建和渲染 HTML 元素,让整个View视图看起来只有Html代码,也让前台开发人员开发的页面直接被后台开发人员使用,而不需要重复的书写代码,这种设计将会成为主流,直接在Html元素上添加对应的标签即可，目前记录下自己遇见的问题(坑)及解决方法。我这边将TagHelper单独放在一个类库中。制作一个公共Select标签，自动填充Select选项。无需前段编写任何代码。

一.nuget引用 Microsoft.AspNetCore.Mvc

二.添加CriySelectTagHelper.cs 继承TagHelper (所有tagHelper扩展都必须继承 TagHelper) 源代码如下

几个比较容易出问题点：

1.[HtmlTargetElement("criyselect")] 设置前段使用的element名称(严格区分大小写，建议全部小写)

2.[HtmlAttributeName("data")]获取Html设置的属性值(如下图) 没有列出的HTML属性值系统自动添加上。所以这里只设置自己需要操作的属性即可

3.Process和ProcessAsync 为同步和异步加载数据。

namespace CoreExtends.Extends
{
    [HtmlTargetElement("criyselect")]
    public class CriySelectTagHelper : TagHelper
    {
        [HtmlAttributeName("data")]
        public string Data { get; set; }

        [HtmlAttributeName("class")]
        public string _class { get; set; } = "form-control";
        public override void Process(TagHelperContext context, TagHelperOutput output)
        {
            var db = DBConnect.db;
            List<TSelectParamsEntity> list = db.Queryable<TSelectParamsEntity>().Where(t => t.FNo == Data).OrderBy(t => t.FOrder).ToList();
            output.TagName = "select";
            output.TagMode = TagMode.StartTagAndEndTag;
            output.Attributes.SetAttribute("Data", Data);
            output.Attributes.SetAttribute("class", _class);
            string htmlstr = "";
            if (list.Count > 0)
            {
                foreach (var item in list)
                {
                    htmlstr += "<option value='" + item.FKey + "' >" + item.FValue + "</option>";
                }

            }
            else
            {
                htmlstr = "<option value='-1' disabled=''>" + rs.SelectNodata + "</option>";
            }
            output.Content.SetHtmlContent(htmlstr);
        }
    }
}

三.cshtml页面使用标签