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(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" 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;
                   
                }
            }