Accessing multiple values from generated panel

Question

I have some logic that loops and adds a new Panel control to another control:

for (int segmentIndex = 0; segmentIndex < segments.Length; ++segmentIndex)
{
    holder.Controls.Add(new Panel() { Width = Unit.Percentage(segments[segmentIndex] / segmentsSum * 100), CssClass = String.Format("segment segment-{0}", segmentIndex) });
}
container.Controls.Add(holder);  

This works great, but there are a few values that I need to store on each panel within the loop. I need to be able to access these values in both c# and javascript, once the control is rendered on the page. What would be the best way to achieve this? I've used the Tag property before on some controls, but a Panel doesn't have one.

Thanks so much

Answer 1

It sounds like you need to add markup inside of the Panel, is that correct? If so, you can add a control to the Panel control's Controls collection, such as a Label or a LiteralControl.

The following (non-tested) code illustrates this point:

for (int segmentIndex = 0; segmentIndex < segments.Length; ++segmentIndex)
{
    var p = new Panel() { ... };

    var innerContent = new LiteralControl("<p>Hello, World!</p>");

    p.Controls.Add(innerContent);

    holder.Controls.Add(p);
}
container.Controls.Add(holder);  

Alternatively, instead of a LiteralControl you could add a Label, a Button... whatever you need.

Answer 2

Add a HiddenField to your panel. It will render in HTML as <input type="hidden" /> so it's invisible, accessible for your server code and also for your javascript.

LiteralControl innerContent = new LiteralControl("<p>Hello, World!</p>");
HiddenField hiddenContent = new HiddenField() { ID = "hiddenContent", Value = "My hidden content" };
p.Controls.Add(innerContent);
p.Controls.Add(hiddenContent);