Dynamically Creating asp Tables in C#

For a project I was tasked with at work I needed to program something that had to generate tables on the fly based on user input, accept user selections via textboxes on that table and loop through the table gathering the users' selections and append that to an asp hiddenfield to be passed back to C# codebehind.  I had the concept in my head on how to program it but I did run into some problems and didn't see much documentation on the web on what I wanted to do so I decided to start a blog.  This is my first blog and first post.  Hope I can be clear and to the point.  Enjoy!

I am programming using Visual Studio Express 2012 Web Edition.  The project I am working with is a webforms project.  This concept can be easily translated to any MVC project.  First off we need to generate the table programmatically and assign meaningful, unique names to the table elements. Using a simple for loop I am creating a table containing an asp CheckBox, Label, and HiddenField with a value in each row.

Tables.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Tables.aspx.cs" Inherits="Project.Tables" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
    <script src="../Scripts/table.js" type="text/javascript"></script>
    <asp:Button ID="button1" runat="server" Text="show table"
        ClientIDMode="Static"
        OnClick="createTable"/>
    <asp:Table ID="table1" runat="server"
        ClientIDMode="Static"></asp:Table>
    <asp:Button ID="button2" runat="server"
        Text="get values"
        ClientIDMode="Static"
        OnClientClick="addNames(event)" /> //ignore this
                                           //javascript function
                                           //for now
    <asp:HiddenField ID="hidden1" runat="server" //also ignore
                                                 //this for now
        ClientIDMode="Static" />
</asp:Content>
Pretty simple.  We just create a webform(with or without masterpage), added a couple of buttons, a table element, and one hidden field.  We will use this hidden field to store values later.

Tables.aspx.cs:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Project
{
    public partial class test : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                //do nothing
            }
        }

        protected void createTable(object sender, EventArgs e)
        {
            for (int i = 0; i < 5; i++)
            {
                TableRow tr = new TableRow();

                TableCell tc1 = new TableCell();
                TableCell tc2 = new TableCell();

                HiddenField hiddenField = new HiddenField();
                hiddenField.ID = "hidden_" + i;
                hiddenField.Value = i.ToString();
                hiddenField.ClientIDMode = 
                    System.Web.UI.ClientIDMode.Static;

                Label lbl = new Label();
                lbl.ID = "lbl_" + i;
                lbl.Text = i.ToString();
                lbl.ClientIDMode = 
                    System.Web.UI.ClientIDMode.Static;

                CheckBox cb = new CheckBox();
                cb.ID = "cb_" + i;
                cb.AutoPostBack = false;
                cb.ClientIDMode = 
                    System.Web.UI.ClientIDMode.Static;

                tc1.Controls.Add(cb);
                tc2.Controls.Add(lbl);
                tc2.Controls.Add(hiddenField);

                cb.Attributes.Add("onchange",
                    "Javascript:addNames(event)");

                tr.Controls.Add(tc1);
                tr.Controls.Add(tc2);

                table1.Controls.Add(tr);
            }
        }
    }
}
Method createTable will build our table row by row, adding the controls to the cells and cells to the rows.  Note, if (!IsPostBack) this will prevent the page from completely reloading and resetting data. If you do not understand IsPostBack please follow this tutorial and you will get it, http://www.codeproject.com/Articles/12810/The-Intricacies-of-the-IsPostBack-If-Block-in-ASP

At this point the webapp will create a table of any length you want with a checkbox, label, and a hiddenfield with a value.  These checkboxes and hiddenfields all have unique names and can be accessed from the codebehind C#.

Well this was my first blog and first post.  Next post I will show how to get the value of the hidden fields if the checkbox in the row is checked and append the hiddenfields' values to one hidden field that will store them all using JavaScript!