C# 后台动态添加标签(span,div) 以及模板添加

很多时候。我们需要在后台用C#代码添加html标签。而不是在html源码中添加。

比如在html源码中简单的一个input 标签

 <input type="type" name="name" value=" " />

那我们在后台用C#代码怎么写呢。那么就要用到HtmlInputText类 命名空间  System.Web.UI.HtmlControls.HtmlInputText

               //定义了一个文本框 对应html中 input type="text"
                System.Web.UI.HtmlControls.HtmlInputText text = new System.Web.UI.HtmlControls.HtmlInputText("text"); //text就是文本框类型 如果是button则是一个按钮 即 type="button"

                text.Attributes.Add("name", "aa");  //定义属性  也可以是自定义属性
                text.Style.Add(HtmlTextWriterStyle.BorderStyle, "none"); //定义样式
                text.Attributes.Add("class", "Wdate");//添加类样式
                text.Style.Add("Cursor", "pointer"); //跟下面效果一样
                text.Style.Add(HtmlTextWriterStyle.Cursor, "pointer");

既然创建一个button标签也是同样的方法 也许你会问那如果我要创建一个div span标签呢。

记住HtmlInputText只是提供了由.netFramework提供的ui 并不包含诸如 div span的ui

所以你得用HtmlGenericControl类： 定义不由特定的 .NET Framework 类表示的所有 HTML 服务器控件元素的方法、属性和事件。那我们一起来看看怎么定义一个span

               //创建一个span标签
                HtmlGenericControl span2 = new HtmlGenericControl("span");

                //属性
                span2.Attributes.Add("title", "选择型号");
               span2.Style.Add(HtmlTextWriterStyle.Width, "20px"); //按钮的高度

               //Page.Controls.Add(span2); //添加到页面 
　　　　　　　　　　
　　　　　　　　//但我这里介绍我用的模版添加标签(将在下面介绍)。因为是给aspxgridview动态添加模版列 ，里面需要text标签。

从两段代码可以看出。除了创建标签的方式不同 。添加属性或者样式都是相同的

因为我这里是添加模版，这仅仅是添加了标签。因为你并没有添加到控件集合。并不会输出到页面 。接下来我们定义一个类 继承ITemplate(模版)

比如：

  class Templates : ITemplate
    {
        //实现接口
        public void InstantiateIn(Control container)
        {
            //我这里演示的是 。先添加一个text文本框标签 然后把text添加到span1标签中 最后在把span1标签添加到span2中 然后把span2添加到控件容器中。
                System.Web.UI.HtmlControls.HtmlInputText text = new System.Web.UI.HtmlControls.HtmlInputText("text");

                text.Attributes.Add("id", "txt");
                text.Style.Add(HtmlTextWriterStyle.BorderStyle, "none");

                HtmlGenericControl span1 = new HtmlGenericControl("span");
                span1.Attributes.Add("class", "ContSpan");

                //把input添加到span中
                span1.Controls.Add(text);

                //创建第二个span标签
                HtmlGenericControl span2 = new HtmlGenericControl("span");

                //把span2添加到input后面   这里的 1 表示span2在控件数组中的索引 因为先添加了一个text索引为0
                span1.Controls.AddAt(, span2); 

                container.Controls.Add(span1);  //最后把整个控件添加到容器中  当然你完全可以放在指定的位置 比如哪个id的里面。

        }
    }

需要用到模版的就实例化Templates类。就可以添加控件到页面了。下面是添加的核心代码

　　　　　　　　　　//实例化一列
                    GridViewDataColumn gdc = new GridViewDataColumn(dc.ToString(), item.Ctitle);  //列的数据 列的标题

                    if (item.Ctitle == "型号")
                    {
                        Templates t = new Templates(item.Ctitle, "both", item.Etitle);
                        gdc.DataItemTemplate = t;//这里就是给 数据模版（DataItemTemplate ） 添加标签

                    }
                    else
                    {
                        Templates tem = new Templates(item.Ctitle, "text", item.Etitle);
                        gdc.DataItemTemplate = tem;
                    }

结果：

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMoAAAAkCAIAAABHSTINAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAEg0lEQVR4nO2bwVMbdRTH3/vtJiFpkYSkwHYgWooMpFgZ0Rl1DNZ66KGeOoNjLz0hf1PBA1x6r9NxRofqhYtyIRWtbROlTKWSJoGEBEiW7P48pLMTdje7S5IFzbzPKfntey+/yfvOe7+32WAqlYLjrKysxONxIIiWYWe9AaKTIXkRLkLyIlyE5EW4CMmLcBFcXFw86z0QHQtyznVLiURicnLyTHZDdBjUHAkXEU1XFxYWTnkfxH+Wubm5pn3N5dViUKJjaLHQUHMkXKRh9eoMEE1mF6IVfk7+svzrj5FAmHMADgyEnWLhvZHJG1PXEVFnfDJ5WWSr/pLuY3QumqWFmfNoTvZGtIviYfHh+sPZz2elYL+2WDgozn+3GIuORvuGdPYnkFctfw6z2EgcbTQzujgUItE0pXKp91yvFOz/9tn9zcImCizkD90e/+qSNLyzt9O8vDRVWSisll2HSa0ZW6iqPpqpmXapUXUk2kh+P58upLOFbOWoonAlmUslM0kQIdIdqagV+Uh+md4K+M4Fzwf7QhHNy5G8dHXLqDDTHDeKYwwIhrKki2Zd5KwrH9E6q3+tfr/+g9QjqUfK+MVxAZlP9DEPEwShS+wCwOH+6KPko5eF3Ve72anRd298cK3maCOv+hJiVBiYJV4z0K3XY9sTddEsBESF6hRY/n35609npaCkgCoAOzg6UBTl9TUOpXLpo9jUh7EpBMzvF+/eX3IqL2N2NVXV59X5mcwY3HS9Plqj4LZFi5TXLs77uqWg9OCPB0+2nzAP48gzhxmf4EMBS3Lp3uN7Ho9HBnmoe3Bm+Mv+0IDm6Kg5Oml8OpqwsRgJdcbWytM6r+0GCIfUvsoX+RepdAp8gCJ6vV5REBmwKq9u7G0AAxlkjpwD51zRHE9838uikDTqpPUttd7L4mwOx/tj/VlN1zfBrv8S7QIRgQEiIiACAgAHjq8XAHktDce+d3t5Wcz/tv0LGs9xprcYTEcH27bbRHElmqAv0DfYM8i8jDNekAtVtQoCiCiG/WFBFGQuX/BfQGCMCZpLM82xhvVsCHady6F6jCXQ4U6INlIs7+X2c7eu3vpi4iZwODg6XEosJXeTAgghf+jOlTuRQBgZiiAeVsqZ/CvNsZ0/ChlF06iqORkFtAhgJ0GqXm4TH5u++9N8NPyWWlWjvYOfTVwTBZED58ABoTcQWv/z2W8bj0WP95/M9lh0RHN0et/LiZlultRemFYg27ORsbw5uW1L2nKD6dHpmBTbym1lC9nE88T0lbisyGpVVUGVqzIH/vTvZNDXNTw4cv2djy9GTjI5Ojwjm2pL99Y0lO3iidzpRO8Ske5IpDuynd9+mk4KKETfiCqqwgTs9Ye9zOvzdl0aGLp6eULn1eFPTJDa2ovf698p5XKl3ZnYjAoqADBgh5XyZvr5+wZtQcfLi2gvPYGeT8bi88vfDPQMAEfOkQHLFLJvS8Nv9keN9uZ/5VhdXT2V3RL/A1p5bpn+KUS4CD0MTbgIyYtwEVxbWzvrPRAdC529CBeh5ki4CMmLcJF/AXJkoWjT72pjAAAAAElFTkSuQmCC" alt="" />

大体思路就是这样的。也许我的代码还不完善。

如果你还有这样的需求 ：在后台需要遍历页面上的控件 (服务器控件这里就不说) 主要是input标签 div span等

都指定页面的标签类型很多。我们遍历控件时都要判断是否是自己需要的类型标签 。故 要转换。其实就是个判断。知道判断就容易了

从上面的列子可以看出。创建一个div用到HtmlGenericControl 类  所以你遍历div时。只要判断Control是否可以转换为HtmlGenericControl

当然你得要知道什么时候用HtmlGenericControl 。如果是遍历页面的a标签那自然是转换为HtmlAnchor 想必你应该懂

比如我页面有这样一段代码 想要获取 div id="mb"中所有的a标签 的id值和自定义属性的menu的值 记住 后台要访问input标签 必须加上runat="server"

        <div id="mb" runat="server" style="padding:5px;margin-top:5px;" class="ui-widget-header">
            <a runat="server" href="javascript:void(0)" id="N8000" plain="false" class="easyui-menubutton" disabled="false" menu="#mm1" iconCls="icon-gzt">1</a>
            <a runat="server" href="javascript:void(0)" id="N5000" plain="false" class="easyui-menubutton" menu="#mm2" iconCls="icon-xwbj" menuid="N5000">2</a>
            <a runat="server" href="javascript:void(0)" id="N1000" plain="false" class="easyui-menubutton" menu="#mm3" iconCls="icon-kcgl" menuid="N1000">3</a>
            <a runat="server" href="javascript:void(0)" id="N3000" plain="false" class="easyui-menubutton" menu="#mm4" iconCls="icon-cggl" menuid="N3000">4</a>
            <a runat="server" href="javascript:void(0)" id="N2000" plain="false" class="easyui-menubutton" menu="#mm5" iconCls="icon-xsgl" menuid="N2000">5</a>
            <a runat="server" href="javascript:void(0)" id="N4000" plain="false" class="easyui-menubutton" menu="#mm6" iconCls="icon-yfys" menuid="N4000">6</a>
            <a runat="server" href="javascript:void(0)" id="N6000" plain="false" class="easyui-menubutton" menu="#mm7" iconCls="icon-xjyh" menuid="N6000">7</a>
            <a runat="server" href="javascript:void(0)" id="mb8" plain="false" class="easyui-menubutton" menu="#mm8" iconCls="icon-khgx" menuid="">8</a>
            <a runat="server" href="javascript:void(0)" id="N9000" plain="false" class="easyui-menubutton" menu="#mm9" iconCls="icon-jcsz" menuid="">9</a>
            <a href="javascript:void(0)" id="mb10" plain="false" class="easyui-menubutton" menu="#mm10" iconCls="icon-jcsz">10</a>
        </div>

则在后台

 //遍历菜单id为mb里面的控件
            foreach (Control item in mb.Controls)
            {
                bool con = item is HtmlAnchor; //判断是否是a标签
                //如果是div span 等则  bool con = item is HtmlGenericControl;

                if (con)
                {
                    HtmlAnchor link = item as HtmlAnchor;
                    string id = link.ID; //获取id
                    string menu = link.Attributes["menu"]; //获取自定义属性 因为menu不是a标签特有的属性 所以是 . 点不出来的(link.menu) 那么用Attributes 可以获取 就是key-value

                   //你也可以这样
                    Control c = item as HtmlAnchor;
                    string temp = ((HtmlAnchor)c).Attributes["menu"];
                    string tempId = c.ID;

                }
            }