asp.net: adding multiple divs to the same page

Question

I'm trying to create some sort of forum and want to add a new div (with some text in it) every time I click the button. (this will change later on when I get everything from a database) So the idea is; click the button, div appears, click the button again, another div appears, right underneath the last one, repeating infinitely. I got as far as creating 1 div, but it won't make any more. Here's my code:

protected void Button1_Click(object sender, EventArgs e)
{
    i += 1;
    top += 60;
    try
    {
        Panel div = new Panel();
        div.ID = "panel" + i;
        div.CssClass = "postdiv";
        div.Style["position"] = "absolute";
        div.Style["top"] = top.ToString();
        form1.Controls.Add(div);
    }
    catch (Exception er)
    {
        Console.Write(er);
    }
}

I think my problem lies with the div.Style["top"] = top.ToString(); but I'm not sure. Anyone know a solution?

Where are you declaring i and top? The problem lies in storing i and top I suspect. — RealityDysfunction
– RealityDysfunction, Commented Dec 27, 2013 at 16:57

ekad · Accepted Answer · 2013-12-27 18:21:44Z

2

The problem is the i and top values will always be 0 every time you click the button, so you need to use ViewState or HiddenFields in order to keep the values between postbacks.

You'll also need to recreate the dynamically created divs in Page_Load every time a postback occurs.

Here's what I would've done using ViewState:

private int Counter
{
   get
   {
      if (ViewState["Counter"] == null)
      {
         return 0;
      }
      else
      {
         return (int)ViewState["Counter"];
      }
   }
   set
   {
      ViewState["Counter"] = value;
   }
}

protected void Page_Load(object sender, EventArgs e)
{
    if (this.IsPostBack)
    {
        if (this.Counter > 0)
        {
            for (int i = 0; i < this.Counter; i++)
            {
                Panel div = new Panel();
                div.ID = string.Format("panel{0}", i + 1);
                div.CssClass = "postdiv";
                div.Style["position"] = "absolute";
                div.Style["top"] = string.Format("{0}px", (60 * (i + 1)));
                form1.Controls.Add(div);
            }
        }
    }
}

protected void Button1_Click(object sender, EventArgs e)
{
    this.Counter += 1;

    try
    {
        Panel div = new Panel();
        div.ID = string.Format("panel{0}", this.Counter);
        div.CssClass = "postdiv";
        div.Style["position"] = "absolute";
        div.Style["top"] = string.Format("{0}px", (60 * this.Counter));
        form1.Controls.Add(div);
    }
    catch (Exception er)
    {
        Console.Write(er);
    }
}

edited Dec 27, 2013 at 18:21

answered Dec 27, 2013 at 16:02

ekad

14.7k26 gold badges46 silver badges49 bronze badges

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

8 Comments

Gamidron Over a year ago

Well when debugging I noticed the values did went up as expected, the div just won't appear.

Gamidron Over a year ago

Btw, that solution won't work. It still only creates the first div.

Gamidron Over a year ago

Unfortunately, it still doesn't work. Is there another (fairly easy) way to add divs or should I just approach this in an entirely different way?

ekad Over a year ago

The code works for me, it adds a new div every time I click the button. There is another way to add divs using jquery if you don't need the postback.

Gamidron Over a year ago

I just looked through the html on the website with developer tools (F12), and apparently "top" has an invalid property value. Am I using a wrong doctype or anything similar?

|

Manoj Mevada · Accepted Answer · 2013-12-27 16:06:59Z

2

Please add "px" when you assign top style:

   div.Style["top"] = top.ToString() + "px";

answered Dec 27, 2013 at 16:06

Manoj Mevada

6694 silver badges7 bronze badges

Comments

asm00 · Accepted Answer · 2013-12-27 17:19:45Z

1

You need to take into account that each time your browser makes a round-trip to the server (be it the first or subsequent times - postbacks) the object model for the page needs to be recreated from scratch.

None of the variables, controls or objects you create in your code behind will survive a postback.

For that reason, you need to add the controls EACH TIME that the code behind is executed. That's why you need an approach as @ekad has provided. Your control generation routine needs to be inside a loop.

answered Dec 27, 2013 at 17:19

asm00

7096 silver badges7 bronze badges

Collectives™ on Stack Overflow

asp.net: adding multiple divs to the same page

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related