Category >
ASP.NET
|| Published on :
Wednesday, February 10, 2016 || Views:
10372
||
Add TextBox Dynamically ASP.Net on Click ASP.Net Button
Introduction
Here Pawan Kumar will explain how to Add TextBox Dynamically ASP.Net on Click ASP.Net Button
Description
In previous post I have explained
Export GridView selected rows to Excel or word in ASP.NET using CSharp,
How to allow numbers, backspace, delete, left and right arrow and Tab Keys to the TextBox using Javascript or JQuery in ASP.NET,
Upload And Read Excel File into DataSet in Asp.Net using C#,
How to find third highest salary in sql server.,
How to prevent input field from special character,
How to display image on image selection using fileupload control in JQuery., and many more articles.
Now I will explain How to Add TextBox Dynamically ASP.Net on Click ASP.Net Button
So follow the steps to learn Add TextBox Dynamically ASP.Net on Click ASP.Net Button
ASPX Code:-
<%@ 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> Add TextBox Dynamically ASP.Net on Click ASP.Net Button </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">
<asp:Button runat="server" ID="btnAddNew" Text="Add Q/A" 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 colspan="4"><b>Dynamically Create Textboxes using ASP.Net - Question and Answer</b></td>
</tr>
<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" />
<asp:Button runat="server" ID="Cancel" Text="Cancel" OnClick="Cancel_Click" />
</td>
</tr>
</table>
</div>
<br />
<asp:Label ID="lblResult" runat="server" ForeColor="Red" Text=""></asp:Label>
</form>
</body>
</html>
Code Behind:-
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;
}
}
}
}
}
Conclusion:
So, In this tutorial we have learned, Add TextBox Dynamically ASP.Net on Click ASP.Net Button
Download Source Codes