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只是提供了由Framework提供的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);
javascript void 0 是什么意思//创建第⼆个span标签
HtmlGenericControl span2 = new HtmlGenericControl("span");
//把span2添加到input后⾯这⾥的 1 表⽰span2在控件数组中的索引因为先添加了⼀个text索引为0
span1.Controls.AddAt(1, 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;
}
结果：
⼤体思路就是这样的。也许我的代码还不完善。
如果你还有这样的需求：在后台需要遍历页⾯上的控件 (服务器控件这⾥就不说) 主要是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" 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标签特有的属性所以是 . 点不出来的(u) 那么⽤Attributes 可以获取就是key-value
//你也可以这样
Control c = item as HtmlAnchor;
string temp = ((HtmlAnchor)c).Attributes["menu"];
string tempId = c.ID;
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。