Creating ASP.NET Controls Dynamically

Question:

a) How to populate the data in ListBox from the database.
b) How to display the relevant Details in the Textboxes for selected item.

Solution:

Solution a)

To display the data in the Listbox from the Database is simple binding. (In our sample we are populating the ListBox with the EmployeeId's.)

Step 1: 

SqlConnection mycn; SqlDataAdapter myda; DataSet ds; String strConn; private void Page_Load(object sender, System.EventArgs e) { // Put user code to initialize the page here strConn="Data Source=localhost;uid=sa;pwd=;Initial Catalog=northwind"; mycn = new SqlConnection(strConn); myda = new SqlDataAdapter ("Select * FROM Employees", mycn); ds = new DataSet(); myda.Fill (ds,"Table"); if (!Page.IsPostBack ) { for(int i=0;i<ds.Tables[0].Rows.Count-1;i++) { ListBox1.Items.Add(new ListItem( ds.Tables [0].Rows[i]["Employeeid"].ToString() , i.ToString ())); } } }

Note: Refer * for Basic UI 

Solution b)

To display the details for the ListItem Selected in the Textboxes. (i.e Show Details of the EmployeeID selected)

This can be done by designing a page with n number of Textboxes based on the columns in the Database Table. Or the other solution is to create these Textboxes dynamically.

Lets take a look on how to create the Controls Dynamically. The sample shows the data from Employees Table (Northwind DataBase).

This Table has Columns having DataType as string, DateTime, Byte[]. So as we go through the process of dynamically adding the controls we'll also see how to handle these DataTypes and display the data accordingly.

Step 1:

We'll drag and drop PlaceHolder ( One to display the data in the Text Format and other to display the image i.e to handle the System.Byte[] DataType)

Step 2:

private void ListBox1_SelectedIndexChanged(object sender, System.EventArgs e) { //Controls to be dynamically created TextBox tb; //TextBox Label lb; //Label System.Web.UI.WebControls.Image img1 ; //Image //Create a DataView to Filter the DataBased on the Employeeid Selected DataView dvEmployees =new DataView(ds.Tables["Table"] ); dvEmployees.RowFilter = "Employeeid=" + ListBox1.SelectedItem.Text; Label1.Text = "Details of Employee ID: " + ListBox1.SelectedItem.Text; string strData; //Set the Rowindex int rowindex = Convert.ToInt32(ListBox1.SelectedItem.Value) ; foreach(DataColumn dc in dvEmployees.Table.Columns ) { //Set Id,Width,Font for Label and TextBox Control lb= new Label (); lb.ID = lb + dc.ColumnName ; tb = new TextBox(); tb.ID = tb + dc.ColumnName ; lb.Width =Unit.Percentage (30); tb.Width =Unit.Percentage (50) ; lb.Font.Name ="verdana"; lb.Font.Size =FontUnit.XSmall; lb.Font.Bold= true ; tb.Font.Name ="Verdana"; tb.Font.Size =FontUnit.XSmall; img1= new System.Web.UI.WebControls.Image (); //Set Text Property of Label Control lb.Text = dc.ColumnName ; //Set Text Property of TextBox Control strData = dvEmployees.Table.Rows[rowindex][dc.ColumnName ].ToString (); //If DataType is System.Byte[] if (dc.DataType.ToString () =="System.Byte[]") { //To display image of Employee if (strData!=DBNull.Value.ToString ()) { Byte[] imgByte = (Byte[])dvEmployees.Table.Rows[rowindex][dc.ColumnName]; int offset = 78; MemoryStream ms = new MemoryStream(); ms.Write(imgByte, offset, imgByte.Length - offset); Bitmap bmp = new Bitmap(ms); //To do the following give the Write Permissions for ASPNET user on respective folder bmp.Save(Server.MapPath ("sample.jpeg"), System.Drawing.Imaging.ImageFormat.Jpeg ); img1.ImageUrl = (Server.MapPath("sample.jpeg")); img1.ID="img" + dc.ColumnName; img1.ToolTip = dvEmployees.Table.Rows[rowindex]["Notes"].ToString(); //To set height and width of image //img1.Height =Unit.Pixel(222); //img1.Width =Unit.Pixel(191); PlaceHolder1.Controls.Add(img1); } //If no image is available else { Label lbNoImg = new Label(); lbNoImg.Text ="No image Available"; lbNoImg.Font.Name ="Verdana"; lbNoImg.Font.Size =FontUnit.Small; PlaceHolder1.Controls.Add (lbNoImg ); } } else { //If DataType is DateTime (Format Date as yyyy-dd-mm) if (dc.DataType.ToString()== "System.DateTime") { if (strData!=DBNull.Value.ToString()) { DateTime dt = DateTime.Parse(strData) ; tb.Text = dt.ToString ("MMMM yyyy, dd"); } } //For the rest of the fields else { if (strData.Length >=40) { tb.Text = strData.Substring(0,40) + "..."; tb.ToolTip = strData; } else { tb.Text = strData; } } //Add the dynamically created controls to the PlaceHolder PlaceHolder2.Controls.Add (lb); PlaceHolder2.Controls.Add (tb); } } }

* Not to forget how the UI looks like

<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="0"> <TR> <TD> <TABLE id="Table2" cellSpacing="1" cellPadding="1" width="100%" border="0"> <TR> <TD width="25%" vAlign="top"> <asp:Label id="Label1" runat="server" Font-Names="Verdana" Font-Size="X-Small" Font-Bold="True">Select Employee Id</asp:Label> </TD> <TD width="20%" vAlign="top"> <asp:listbox id="ListBox1" runat="server" AutoPostBack="True"></asp:listbox> </TD> <TD width="50%" vAlign="top"> <asp:placeholder id="PlaceHolder1" runat="server"></asp:placeholder> </TD> </TR> </TABLE> </TD> </TR> <TR> <TD> <asp:PlaceHolder id="PlaceHolder2" runat="server"></asp:PlaceHolder> </TD> </TR> </TABLE>

<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="100%" border="0"> <TR> <TD> <TABLE id="Table2" cellSpacing="1" cellPadding="1" width="100%" border="0"> <TR> <TD width="25%" vAlign="top"> <asp:Label id="Label1" runat="server" Font-Names="Verdana" Font-Size="X-Small" Font-Bold="True">Select Employee Id</asp:Label> </TD> <TD width="20%" vAlign="top"> <asp:listbox id="ListBox1" runat="server" AutoPostBack="True"></asp:listbox> </TD> <TD width="50%" vAlign="top"> <asp:placeholder id="PlaceHolder1" runat="server"></asp:placeholder> </TD> </TR> </TABLE> </TD> </TR> <TR> <TD> <asp:PlaceHolder id="PlaceHolder2" runat="server"></asp:PlaceHolder> </TD> </TR> </TABLE>