Search This Blog

Saturday, October 20, 2012

Add Dynamic TextBox and Label at Runtime on DropDownList SelectedIndexChanged


In Technique when we need to create controls dynamically in a Page in some event, (Here I explained like how to add Textboxes, Labels based on a DropDownList SelectedIndexChanged Event). I have used the DropDownList’s Item’s Value to get the count to create the Controls. Used the DropDownList’d Item’s Text to populate the labels. Follow the below source and code behind to create yours.

Source:

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="CS.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Dynamic TextBox Example</title>
    <style type="text/css">
    .lbl
    {
           font-family: Verdana;
           font-size: 11px;
           font-weight: normal;
           color:#0C5470;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div id="pnlTextBox">
            <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True"
                onselectedindexchanged="DropDownList1_SelectedIndexChanged" Width="150px">
                <asp:ListItem Value="1">One</asp:ListItem>
                <asp:ListItem Value="2">Two</asp:ListItem>
                <asp:ListItem Value="3">Three</asp:ListItem>
                <asp:ListItem Value="4">Four</asp:ListItem>
                <asp:ListItem Value="5">Five</asp:ListItem>
            </asp:DropDownList>
            <asp:Panel ID="Panel1" runat="server">
            </asp:Panel>
        </div>

        </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Code Behind:

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
      
    }
    protected void Page_Load(object sender, EventArgs e)
    {

    }
  
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        int cnt = Convert.ToInt32(DropDownList1.SelectedValue);
        GenerateTable( 1, cnt);
    }

    //Code to Generate TextBox and Label
    private void GenerateTable(int colsCount, int rowsCount)
    {
        //Create Table in the Form
        Table table = new Table();
        table.ID = "Table1";
        Page.Form.Controls.Add(table);

        //Code to Add Controls in the Table
        for (int i = 0; i < rowsCount; i++)
        {
            TableRow row = new TableRow();
            for (int j = 0; j < colsCount; j++){
                TableCell cell = new TableCell();
                TableCell lblcell = new TableCell();
                TextBox tb = new TextBox();
                Label lbl = new Label();
                tb.CssClass = "lbl";
                // Set ID for each TextBox
                tb.ID = "TextBoxRow_" + i + "Col_" + j;
                lbl.ID = "Label_" + i + "Col_" + j;
                lbl.Text = DropDownList1.Items[i].ToString();
                lbl.CssClass = "lbl";
                // Add the control to the TableCell
                lblcell.Controls.Add(lbl);
                cell.Controls.Add(tb);
                // Add the TableCell to the TableRow
                row.Cells.Add(lblcell);
                row.Cells.Add(cell);
            }
            // Add the TableRow to the Table
            table.Rows.Add(row);
        }
        Panel1.Controls.Add(table);
    }
}

Output Screen Shot:

Sample Output




No comments:

Post a Comment

Note: Only a member of this blog may post a comment.