Below
is the aspx.Net page where we will build the dynamic textbox functionality using
JavaScript. I have placed aspx button and Textbox to add the textboxes on DIV when
click on button I am calling JavaScript function which I will explain later.
Also I have html DIV control which will act as a container to hold the dynamic
textboxes. Finally there’s an ASP.Net Button control which I used to show how
to fetch the values of the dynamic textboxes generated using JavaScript server
side and also retain the dynamic textboxes after Post Back.
<%@ Page Language="C#"
AutoEventWireup="true"
CodeFile="DynamicControl.aspx.cs"
Inherits="DynamicControl"
%>
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 id="Head1"
runat="server">
<title>How to
create dynamic textbox using asp.net and C#title>
<script type="text/javascript" language="javascript">
function
CreateGridTable()
{
var txtSlot
= document.getElementById("txtSlots");
var div =
document.getElementById("div1");
var div2 =
document.getElementById("div2");
if(txtSlot.value
!= "")
{
var table =
document.createElement('table');
table.width="100%";
table.className ='hovertable';
div.appendChild(table);
var tr1 =
document.createElement('tr');
table.appendChild(tr1);
var td1 =
document.createElement('td');
td1.innerHTML = document.getElementById("Label1").innerHTML;
tr1.appendChild(td1);
for(var i = 1; i<= txtSlot.value; i++)
{
var tdH =
document.createElement('td');
tdH.innerHTML = String(i);
tdH.width="50px";
tr1.appendChild(tdH);
}
var tr2 =
document.createElement('tr');
table.appendChild(tr2);
var td2 =
document.createElement('td');
td2.innerHTML = "Value";
td2.width="50px";
tr2.appendChild(td2);
for(var i = 1; i<= txtSlot.value; i++)
{
var tdC =
document.createElement('td');
var txtC =
document.createElement('input');
txtC.type = "text";
txtC.name = String("txt"
+ i);
txtC.style['width']
= '45px';
tdC.appendChild(txtC);
tr2.appendChild(tdC);
}
}
div2.style.display = "block";
div.style.display = "block";
return false;
}
script>
<style type="text/css">
table.hovertable
{
font-family:
verdana,arial,sans-serif;
font-size:
11px;
color:
#333333;
border-width:
1px;
border-color:
#999999;
border-collapse:
collapse;
}
table.hovertable
th
{
background-color:
#c3dde0;
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#a9c6c9;
}
table.hovertable
tr
{
background-color:
#d4e3e5;
}
table.hovertable td
{
border-width:
1px;
padding:
8px;
border-style:
solid;
border-color:
#a9c6c9;
}
style>
<style type="text/css">
.style1
{
}
.style2
{
width:
100%;
}
.style3
{
width:
100%;
height:
23px;
}
style>
head>
<body>
<form id="form1" runat="server">
<div>
<table style="width: 48%; height: auto">
<tr>
<td class="style2">
<div id="divmain" runat="server" style="font-size: small; font-family: Arial;">
<table style="width: 100%; height: auto" class="hovertable">
<tr>
<td class="style1">
<asp:Label ID="Label1" Text="Enter the
No " runat="server">asp:Label>
<asp:TextBox runat="server"
ID="txtSlots">asp:TextBox>
td>
tr>
<tr>
<td class="style1" align="left">
<br />
<asp:Button ID="btnProcees"
Text="Add Text
Box" runat="server"
/>
td>
tr>
table>
div>
td>
tr>
<tr>
<td class="style3">
<div id="div1" style="display: none" runat="server" class="hovertable">
div>
td>
tr>
<tr>
<td class="style3">
<div id="div2" style="display: none" runat="server">
<br />
<asp:Button ID="BtnSave" runat="server" Text="Save" OnClick="BtnSave_Click" />
div>
td>
tr>
table>
div>
form>
body>
html>
using System;
using
System.Collections;
using
System.Configuration;
using
System.Data;
using
System.Linq;
using
System.Web;
using
System.Web.Security;
using
System.Web.UI;
using
System.Web.UI.HtmlControls;
using
System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using
System.Xml.Linq;
public partial class DynamicControl : System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
btnProcees.Attributes.Add("OnClick", "return
CreateGridTable()");
}
}
protected void BtnSave_Click(object
sender, EventArgs e)
{
int
slots = Convert.ToInt32(txtSlots.Text);
for (int z = 1; z <= slots; z++)
{
string
value = Convert.ToString(Request.Form["txt" + z]);
}
}
}
Description:
Dynamic Controls have to be recreated on Page PostBack and values entered in the Text box, will be retained from viewstate. If we want to use Control ID to get value, we need to make sure that same control ID is used for recreating on postback. We can use a for loop to get text entered in the dynamic Text box
Downloads
You can download the complete source code in C#
