How to dynamically add HTML div element using ASP.Net and C#

Question

1.00/5 (1 vote)

See more:

Hi I am yogesh and I want to know how to dynamically add the div in ASP page.
Please also suggest to change its height and width dynamically.
Please give an example.

Posted 26-Aug-11 21:16pm

yogesh a sharma

Updated 22-Oct-17 23:46pm

Tech Code Freak

v2

Add a Solution

Comments

OriginalGriff 27-Aug-11 3:37am

What have you tried?

Ala'aldin Alzu'bi 27-Aug-11 5:30am

where you need to add the DIV? on the page or inside a specific control?

6 solutions

Solution 6

C#

protected void Page_PreInit(object sender, EventArgs e)
    {
        GenerateControls();
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    private void GenerateControls()
    {
        if (Session["divCount"] != null)
        {
            int divID = (int)Session["divCount"];

            for (int i = 0; i < divID; i++)
            {
                HtmlGenericControl divYogesh = new HtmlGenericControl("div");
                divYogesh.Attributes.Add("class", "myClass");
                divYogesh.Attributes.Add("id", (i + 1).ToString());

                pnlYogesh.Controls.Add(divYogesh);
            }
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (Session["divCount"] == null)
            Session["divCount"] = 1;
        else
        {
            int divID = (int)Session["divCount"];
            divID++;
            Session["divCount"] = divID;
        }

        HtmlGenericControl divYogesh = new HtmlGenericControl("div");
        divYogesh.Attributes.Add("class", "myClass");
        divYogesh.Attributes.Add("id", Session["divCount"].ToString());

        pnlYogesh.Controls.Add(divYogesh);
    }

hope it heps you :)

Posted 31-Oct-13 0:17am

Neema Derakhshan

Comments

akshaynangare22@gmail.com 2-Aug-14 4:13am

what is pnlYogesh? on laast line

Neema Derakhshan 21-Aug-14 2:23am

it's a

<asp:Panel ID="pnlYogesh" runat="server"/>

that you can put it anywhere on your form

Solution 5

you should add a asp panel in your html like "pnlYogesh"
and then :

C#

HtmlGenericControl divYogesh = new HtmlGenericControl("div");
divYogesh.Attributes.Add("class","myClass");

pnlYogesh.Controls.Add(divYogesh);

css :

CSS

.myClass
{
  width:100px;
  height:100px;
}

Posted 20-Aug-13 21:50pm

Neema Derakhshan

Comments

Vinay Kumar Tiwary 16-Oct-13 7:39am

Hi.. I tried your code. Its working fine for single instance but when I'm trying to add multiple divs it simply doesn't work. I'm using a button to add dynamic divs. When I click for the first time it adds that div to the panel and when I click it again, it doesn't add another div to the same panel. Can you please resolve my issue? Thanks..

Solution 4

You can add it into your panel or other control...

example:

=> in markup/asp.net

<asp:panel id="TestPanel" runat="server" xmlns:asp="#unknown">

=> in code behind

CSS

System.Web.UI.HtmlControls.HtmlGenericControl newdiv = System.Web.UI.HtmlControls.HtmlGenericControl

newdiv.style.height="200px";
newdiv.style.width="250px";

TestPanel.Control.Add(newdiv);

Posted 20-Aug-13 20:17pm

Yohanda

Solution 3

ASP.NET

<asp:Panel ID="Panel2" runat="server" groupingtext="Nodes" height="100%">
    <div id="mydiv" align="left" style="width: 170px; text-align: top; overflow: auto; height: 100%;<br mode=" hold=" />                                min-height: 100%;">
        <asp:treeview runat="server" id="treesiteMap" onselectednodechanged="SiteMapTree_SelectedNodeChanged">
            Style="text-align: left; margin-left: 0; margin-right: auto; padding-left: 0;
            padding-right: auto; position: static" meta:resourcekey="treesiteMapResource1">
            <hovernodestyle backcolor="LightBlue" />
            <selectednodestyle backcolor="LightGray" />
        </asp:treeview>
    </div>
</asp:Panel>

Posted 19-Aug-13 0:45am

sudhakar lambat

Updated 20-Aug-13 22:01pm

v2

Solution 2

If you want it to do in Javascript then use createElement()

have a look on the example

function addDiv(innertext) 
{
      var r  = document.createElement('Div');
      r.style.height="20px";
      r.style.width="25px";
      r.appendChild(innertext);
}

this will add a div on the page. If you want to add this in a specific control then use can use

document.getElementById('specific control name').createElement('Div');

Posted 27-Aug-11 21:56pm

nit_singh

Comments

Tech Code Freak 28-Aug-11 5:44am

My 5!

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

hitech_s · Accepted Answer · 2011-08-26T21:34:00

Solution 1

System.Web.UI.HtmlControls.HtmlGenericControl newdiv = System.Web.UI.HtmlControls.HtmlGenericControl

newdiv.style.height="200px";
newdiv.style.width="250px";

Posted 26-Aug-11 21:34pm

hitech_s

Updated 26-Aug-11 21:36pm

v2

Comments

RaisKazi 27-Aug-11 3:37am

Edited for "pre" Tag.

hitech_s 27-Aug-11 3:39am

what "edited for pre tag"?

Christoph Keller 27-Aug-11 7:14am

That means that RaisKazi improved your solution by adding a "pre" tag around your code. This was just a readability improvement. You could do this by yourself when you write a post on CodeProject by surrounding any code you paste with a <pre> tag.

Hope this helps.

Have a nice day,
Chris

Tech Code Freak 28-Aug-11 5:46am

My 5!

dinesh_verma 14-Mar-15 6:12am

http://www.odix.in