03:53
Unknown
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">
functionCreateGridTable()
{
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.hovertableth
{
background-color: #c3dde0;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.hovertabletr
{
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;
usingSystem.Collections;
usingSystem.Configuration;
usingSystem.Data;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
usingSystem.Xml.Linq;
public partial class DynamicControl : System.Web.UI.Page
{
protected void Page_Load(objectsender, EventArgs e)
{
if(!IsPostBack)
{
btnProcees.Attributes.Add("OnClick", "return CreateGridTable()");
}
}
protected void BtnSave_Click(objectsender, EventArgs e)
{
intslots = Convert.ToInt32(txtSlots.Text);
for (int z = 1; z <= slots; z++)
{
stringvalue = 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#
0 comments:
Post a Comment