Creating DIV in C# and adding controls to it

Question

I have the following which adds a layout on the asp page in c#

chart_holder.Controls.Add(new LiteralControl("<div id='chart_location"+ i.ToString()+"'>" +
                        "<asp:Panel ID='chartbtns"+i.ToString() +
                   "'runat='server' Visible='true' >" +
                         "<div class='chart_button_container'>" +
                            "<div class='chart_buttons'> " +
                               "<ul class='menu2' >" +
                                   "<li> <a href='#' class='chart_buttons_image_save' title='Save'></a>" +
                                        "<ul><li> <asp:LinkButton ID='btnSaveXLSX" + i.ToString() + "' runat='server' oncommand='btnSaveXLSX_Click' CommandArgument='"+ i.ToString() +"' >Excel</asp:LinkButton></li> " +
                                        "<li> <asp:LinkButton ID='SavePDF" + i.ToString() + "' runat='server' oncommand='btnSavePDF_Click' CommandArgument='" + i.ToString() + "'>PDF</asp:LinkButton></li>" +
                                            "<li><asp:LinkButton ID='btnSaveimg" + i.ToString() + "' runat='server' oncommand='btnSaveimg_Click' CommandArgument='" + i.ToString() + "'>Image</asp:LinkButton> </li>" +
                                       " </ul>" +
                                    "</li>" +
                                "</ul>" +
                            "</div>" +
                            "<div class='chart_buttons'>" +
                                "<asp:LinkButton ID='enlarge_chart_" + i.ToString() + "'CssClass='chart_buttons_image_enlarge' style='background-image:url(/Images/1386870554_arrow-maximise.png)' Runat='server' oncommand='enlarge_chart_Click' CommandArgument='" + i.ToString() + "'></asp:LinkButton>" +
                            "</div>" +
                            "<div class='chart_buttons'>" +
                                "<asp:LinkButton ID='refresh_chart_" + i.ToString() + "' CssClass='chart_buttons_image_refresh' style='background-image:url(/Images/refresh.png)' Runat='server' CommandArgument='1'></asp:LinkButton>" +
                            "</div>" +
                       " </div>" +
                       "<div id ='chart" + i.ToString() + "_holder" +"' enableviewstate='true' runat='server' style='height:95%; width:100%'> </div>" +

                       "</asp:Panel>" +
                    "</div>"));

Then else where I want to eventually add a chart in one of the divs above. Is there anyway I can access the div and then add a control to it...?

previously I had the following

chart1_holder.Controls.Add(chart_location_1);

but chart1_holder was from the asp page and not dynamic.

You can't add runat=server controls like LinkButton via LiteralControl. Literal control is just for text\usual html. You need to create them dynamically — Sergey Litvinov, Jan 04 '14 at 12:50
you need to add a div dynamically then you can add chart in this div. Using new object of div and add chart control this object. — Umesh Sehta, Jan 04 '14 at 12:52

score 12 · Accepted Answer · edited May 23 '17 at 11:46

12

Use this:

 System.Web.UI.HtmlControls.HtmlGenericControl createDiv =
        new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");      
        createDiv.ID = "createDiv";
        createDiv.InnerHtml = " I'm a div, from code behind ";
        this.Controls.Add(createDiv);

edited May 23 '17 at 11:46

Community

1
1

answered Jan 04 '14 at 12:53

yeah that would work..but how could I have the same layout as the code i posted? eg. div within a div.. – Chris Jan 04 '14 at 13:33

Sergey Litvinov · Answer 2 · 2014-01-04T13:00:20.563

If you want to generate a couple of such control, you can use Repeater

 <asp:Repeater runat="server" ID="rptItems">
  <ItemTemplate>
        <div id="chart_location"> 
        <asp:Panel ID="Panel1" runat="server" Visible="true" >
         <div class="chart_button_container"> 
            <div class="chart_buttons"> 
               <ul class="menu2" >
                   <li> <a href="#" class="chart_buttons_image_save" title="Save"></a>
                        <ul><li> <asp:LinkButton ID="LinkButton1" runat="server" oncommand="btnSaveXLSX_Click"CommandArgument="<%#Container.ItemIndex %>" >Excel</asp:LinkButton></li> 
                        <li> <asp:LinkButton ID="LinkButton2" runat="server" oncommand="btnSavePDF_Click" CommandArgument="<%#Container.ItemIndex %>">PDF</asp:LinkButton></li>
                            <li><asp:LinkButton ID="LinkButton3" runat="server" oncommand="btnSaveimg_Click" CommandArgument="<%#Container.ItemIndex %>">Image</asp:LinkButton> </li>
                       </ul>
                    </li>
                </ul>
            </div>
            <div class="chart_buttons">
                <asp:LinkButton ID="LinkButton4" CssClass="chart_buttons_image_enlarge" style="background-image:url(/Images/1386870554_arrow-maximise.png)" Runat="server" oncommand="enlarge_chart_Click" CommandArgument="<%#Container.ItemIndex %>"></asp:LinkButton>
            </div>
            <div class="chart_buttons">
                <asp:LinkButton ID="LinkButton5" CssClass="chart_buttons_image_refresh" style="background-image:url(/Images/refresh.png)" Runat="server" CommandArgument="1"></asp:LinkButton>
            </div>
       </div>
       <div id ="Div1" enableviewstate="true" runat="server" style="height:95%; width:100%"> </div>

       </asp:Panel>
    </div>
  </ItemTemplate>
</asp:Repeater>

And then you can bind it

rptItems.DataSource = yourDataItems;
rptItems.DataBind();

Creating DIV in C# and adding controls to it

2 Answers2