Dynamic Div creation asp.net

Question

I am trying to create Div dynamically on the press of button click.

For that i refered this link>> http://forums.asp.net/t/1349244.aspx

and made code on server side(.cs page) as follows>>

public static int i = 0;
    protected void Button1_Click(object sender, EventArgs e)
    {
        i++;
        HtmlGenericControl newControl = new HtmlGenericControl("div");

        newControl.ID = "NEWControl"+i;
        newControl.InnerHtml = "This is a dynamically created HTML server control.";

        PlaceHolder1.Controls.Add(newControl);
    }

This code was giving me just one div each time when i press the button., I wanted to have addition of divs.

On client side using javascript also i tried>>

<body>
    <form id="form1" runat="server">
    <div>

        <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" OnClientClick="addDiv();" />

    </div>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </form>
</body>
</html>
<script type="text/javascript">
    function addDiv() {
        alert("Control comming in function");
        var r = document.createElement('Div');
        r.style.height = "20px";
        r.style.width = "25px";
        r.appendChild("div");
        alert("Control going out of function");
    }
</script>

Both of these didnt work.

What mistake am i making?

Is there any thing wrong?

hey, now i have kept my controls in ajax update panel , and page is not getting refreshed, still the same result.@Prasad — user2176240
– user2176240, Commented Mar 21, 2013 at 5:51

Pawan Nogariya · Accepted Answer · 2013-03-21 08:37:39Z

2

Use this

    public int Index
    {
       get
       {
          if(ViewState["Index"]==null)
          {
             ViewState["Index"]=0;
          }
          else
          {
             ViewState["Index"]=int.Parse(ViewState["Index"].ToString())+1;
          }

          return int.Parse(ViewState["Index"].ToString());    
       }
   }

    protected void Button1_Click(object sender, EventArgs e)
    {
        HtmlGenericControl newControl = new HtmlGenericControl("div");
        newControl.ID = "NEWControl"+Index;
        newControl.InnerHtml = "This is a dynamically created HTML server control.";

        PlaceHolder1.Controls.Add(newControl);
    }

edited Mar 21, 2013 at 8:37

answered Mar 21, 2013 at 6:11

Pawan Nogariya

9,04614 gold badges61 silver badges137 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

user2176240 Over a year ago

There is some problem second last line i.appendChild("div"); Its not printing last alert.

Pawan Nogariya Over a year ago

which code you are using? Mine one? I have not used i.appendChild("div") line. I have used i.appendChild(r)

user2176240 Over a year ago

yeah, i have tried that also >> i.appendChild(r) ..it also not worked

user2176240 Over a year ago

I think so, because last alert i.e. alert("Control going out of function"); is not showing. If i place it above i.appendChild(r); , its showing me the alert. Means, i.appendChild(r); must have problem.

Pawan Nogariya Over a year ago

Are you using firefox's firebug, or chrome console? They will show you the exact error

|

nunespascal · Accepted Answer · 2013-03-21 05:43:38Z

1

It is giving you one div, cause you are adding one div.
Remember that asp.net needs you to create all dynamically added controls on very PostBack after that.

If you want two controls you have to add two to the PlaceHolder.

answered Mar 21, 2013 at 5:43

nunespascal

17.7k2 gold badges45 silver badges46 bronze badges

2 Comments

user2176240 Over a year ago

but i dont know how many divs user will create? so i cant predict about number of placeholders.

nunespascal Over a year ago

One place holder, but when you know the number, say on a button click, then you have to keep track of it. Then use that to create the divs.

MarmiK · Accepted Answer · 2013-03-21 05:38:29Z

0

Just use one parent div with some ID(predefined lets say id="dvDynamic") and runat="server"

and then use it the dvDynamic.innerHTML = "<div> /* dynamic div contents */ </div>"

Its the simplest way, as if you are using html element in ASP.net use dom controls for better generation. Dynamic creation of control will require handled, interface and many things to co-ordinate with that control. As its not predefined by system. you have to create it.

SO choose the DOM element option. that is faster and better :)

I hope this will help :)

answered Mar 21, 2013 at 5:38

MarmiK

5,8156 gold badges47 silver badges51 bronze badges

2 Comments

user2176240 Over a year ago

means instead of creating div server side, i should create it on aspx page only?

MarmiK Over a year ago

Yes :) and then use it in back end code. that will reduce your work and will be easy to code further :)

Collectives™ on Stack Overflow

Dynamic Div creation asp.net

3 Answers 3

8 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related