CODEWITHSUNDEEP
c#javascriptasp.net
user2176240
user2176240

Reputation:

Dynamic Div creation asp.net

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?

Upvotes: 5

Views: 15506

Answers (3)

Pawan Nogariya
Pawan Nogariya

Reputation: 8950

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);
    }

Upvotes: 2

nunespascal
nunespascal

Reputation: 17724

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.

Upvotes: 1

MarmiK
MarmiK

Reputation: 5775

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 :)

Upvotes: 0

Related Questions