how to create dynamic textbox on button click in asp.net

Keywords | how to add textbox dynamically in asp.net c#, how to add textbox on button click in asp.net c#, create dynamic textbox in asp net using c#, creating dynamic textbox controls in asp net, create dynamic textbox and get its value in asp net

How to create dynamic textbox on button click in ASP.Net

At times it is more practical to create a control at runtime than at design time. For example, Create Question and Answers page in which you want to display results in a table. Because you do not know how many items will be returned, you want to dynamically generate one table row for each returned item.

Create dynamic textbox in asp net using C# Example

In order to programmatically add a control to a page, there must be a container for the new control. For example, if you are creating table rows, the container is the table. If there is no obvious control to act as a container, you can use a PlaceHolder or Panel Web server control. We are using Panel as a container.

For example: Create ASP.Net Quiz Application by adding questions and answers. So in this example, we will learn how to generate multiple textboxes dynamically. Find the dot net source code below:-

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Demo.aspx.cs" Inherits="Demo" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>asp.net quiz application - how to create dynamic textbox on button click in asp.net c#</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <style type="text/css">
        table.table-style-two {
            font-family: verdana, arial, sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #3A3A3A;
            border-collapse: collapse;
        }

            table.table-style-two th {
                border-width: 1px;
                padding: 8px;
                border-style: solid;
                border-color: #517994;
                background-color: #B2CFD8;
            }

            table.table-style-two tr:hover td {
                background-color: #DFEBF1;
            }

            table.table-style-two td {
                border-width: 0px;
                padding: 8px;
                border-style: solid;
                border-color: #517994;
                background-color: #ffffff;
            }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <h2>How to create controls dynamically in asp.net and retrieve values from it</h2>

        <asp:Button runat="server" ID="btnAddNew" Text="ASP.Net Quiz Questions and Answers" OnClick="btnAddNew_Click" /><br />
        <br />
        <div id="divAdd" runat="server" visible="False" style="font-family: sans-serif; font-size: smaller;">
            <table class="table-style-two" style="vert-align: top;">
                <tr>
                    <td><b>Question</b></td>
                    <td><b>Answer</b></td>
                    <td></td>

                </tr>
                <tr valign="top">
                    <td>
                        <asp:Panel ID="pnlQuestion" runat="server">
                        </asp:Panel>
                    </td>
                    <td>
                        <asp:Panel ID="pnlAnswer" runat="server">
                        </asp:Panel>
                    </td>
                    <td>
                        <div>
                            <asp:ImageButton ID="imgAdd" OnClick="AddTextBox" Width="26" Height="26" ImageUrl="add.png" runat="server" />
                        </div>
                    </td>

                </tr>

                <tr>
                    <td colspan="3">
                        <asp:Button ID="btnGet" runat="server" Text="Save" OnClick="GetTextBoxValues" />
                        &nbsp;&nbsp;
                        <asp:Button runat="server" ID="Cancel" Text="Cancel" OnClick="Cancel_Click" />
                    </td>
                </tr>

            </table>
        </div>
        <br />
        <asp:Label ID="lblResult" runat="server" ForeColor="Orange" Text=""></asp:Label>
    </form>
</body>
</html>

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

public partial class Demo : System.Web.UI.Page
{
    protected void Page_PreInit(object sender, EventArgs e)
    {
        List<string> keysQ = Request.Form.AllKeys.Where(key => key.Contains("txtQ")).ToList();
        if (keysQ.Count > 0)
        {
            foreach (string key in keysQ)
            {
                int txtId = Convert.ToInt16(key.Substring(4));
                this.CreateTextBoxQ("txtQ" + txtId, txtId);
                txtId++;
            }
        }

        List<string> keysA = Request.Form.AllKeys.Where(key => key.Contains("txtA")).ToList();
        if (keysA.Count > 0)
        {
            foreach (string key in keysA)
            {
                int txtId = Convert.ToInt16(key.Substring(4));
                this.CreateTextBoxA("txtA" + txtId, txtId);
                txtId++;
            }
        }

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            pnlQuestion.Controls.Clear();
            pnlAnswer.Controls.Clear();
        }
    }

    private void InitializeDynamicText()
    {
        int index = pnlQuestion.Controls.OfType<TextBox>().ToList().Count + 1;
        int index1 = pnlAnswer.Controls.OfType<TextBox>().ToList().Count + 1;
        this.CreateTextBoxQ("txtQ" + index, index);
        this.CreateTextBoxA("txtA" + index1, index1);
    }

    protected void AddTextBox(object sender, EventArgs e)
    {
        int indexQ = pnlQuestion.Controls.OfType<TextBox>().ToList().Count + 1;
        int indexA = pnlAnswer.Controls.OfType<TextBox>().ToList().Count + 1;
        this.CreateTextBoxQ("txtQ" + indexQ, indexQ);
        this.CreateTextBoxA("txtA" + indexA, indexA);
    }

    private void CreateTextBoxQ(string id, int i)
    {
        TextBox txt = new TextBox { ID = id, Width = 120 };
        Label lbl = new Label { Text = "Question " + i + ": " };
        Literal lt = new Literal { Text = "<br />" };
        pnlQuestion.Controls.Add(txt);
        pnlQuestion.Controls.Add(lt);
    }

    private void CreateTextBoxA(string id, int i)
    {
        TextBox txt = new TextBox { ID = id, Width = 120 };
        Label lbl = new Label { Text = "Answer " + ": " };
        Literal lt = new Literal { Text = "<br />" };

        Button btnRemove = new Button { ID = "bttn" + i.ToString(), Text = "x" };
        btnRemove.Click += new EventHandler(Remove_Click);
        btnRemove.Visible = i != 1;

        pnlAnswer.Controls.Add(txt);
        pnlAnswer.Controls.Add(btnRemove);
        pnlAnswer.Controls.Add(lt);
    }

    protected void GetTextBoxValues(object sender, EventArgs e)
    {
        try
        {
            string resultQ = pnlQuestion.Controls.OfType<TextBox>().Aggregate("", (current, textBox) => current + (textBox.ID + ": " + textBox.Text + ", "));
            string resultA = pnlAnswer.Controls.OfType<TextBox>().Aggregate("", (current, textBox) => current + (textBox.ID + ": " + textBox.Text + ", "));
            lblResult.Text = resultQ + resultA;
        }
        catch (Exception)
        {
            throw;
        }
    }

    protected void btnAddNew_Click(object sender, EventArgs e)
    {
        divAdd.Visible = true;
        InitializeDynamicText();
    }

    protected void Cancel_Click(object sender, EventArgs e)
    {
        divAdd.Visible = false;
        pnlQuestion.Controls.Clear();
        pnlAnswer.Controls.Clear();
        lblResult.Text = string.Empty;
    }

    protected void btnRemove_Click(object sender, EventArgs e)
    {
        List<string> keysQ = Request.Form.AllKeys.Where(key => key.Contains("txtQ")).ToList();
        List<string> keysA = Request.Form.AllKeys.Where(key => key.Contains("txtA")).ToList();
        int countQ = keysQ.Count; int countA = keysA.Count;
        if (countQ > 1 && countA > 1)
        {
            pnlQuestion.Controls.Remove(pnlQuestion.FindControl("txtQ" + countQ + ""));
            pnlAnswer.Controls.Remove(pnlAnswer.FindControl("txtA" + countA + ""));
        }
    }

    void Remove_Click(object sender, EventArgs e)
    {
        Button ib = sender as Button;
        if (ib != null)
        {
            string btnId = ib.ID;
            string txtId = btnId.Substring(4);

            string deltxtQ = "txtQ" + txtId;
            foreach (Control c in pnlQuestion.Controls)
            {
                if (c.ID == deltxtQ)
                {
                    pnlQuestion.Controls.Remove(c);

                    break;
                }
            }

            string deltxtA = "txtA" + txtId;
            foreach (Control a in pnlAnswer.Controls)
            {
                if (a.ID == deltxtA)
                {
                    pnlAnswer.Controls.Remove(a);
                    pnlAnswer.Controls.Remove(ib);
                    break;
                }
            }
        }
    }
}

how to create dynamic textbox on button click create dynamic textbox on button click How to create Dynamic multiple Textbox in asp.net using C# how to create dynamic textbox on button click min

Download Code

What do you think?

I hope you liked this article. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

LEAVE A REPLY

Please enter your comment!
Please enter your name here