How to Create Text Box Dynamically in asp.net c#

Hello,

My Requirement is as following :

Creatingtext box Dynamically
Inserting data from generated textbox value into Database
Populating the line-chart from database

// aspx//
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CS.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
input[type=text]
{
margin-bottom: 10pt;
}
style>
<%--date picker--%>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js">script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js">script>
<script>
$(function () {
$("#datepicker").datepicker();
});
script>
<script>
$(function () {
$("#datepicker2").datepicker();
});
script>
<%--end--%>
head>
<body>
<form id="form1" runat="server">
<div>
<span class="style1"><strong>How to display Static LineChart on ASP.NET Webpagestrong>span>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
asp:ToolkitScriptManager>
<%--<asp:LineChart ID="LineChart11" runat="server" ChartWidth="450" ChartHeight="300"
ChartType="Basic" ChartTitle="Earings in Different Years" CategoriesAxis="1,2,3,4,5,6,7,8"
ChartTitleColor="#0E426C" CategoryAxisLineColor="#D08AD9" ValueAxisLineColor="#D08AD9"
BaseLineColor="#A156AB">
<Series>
<asp:LineChartSeries Name="N K techology" LineColor="#CC66FF" Data="80, 7, 600, 150,40, 300,120,100" />
<asp:LineChartSeries Name="Kiran" LineColor="#3399FF"
Data="9900, 4000, 11600, 9700,3200, 8600,6900,9950" />
<asp:LineChartSeries Name="sachin" LineColor="#FF0066"
Data="12000, 17000, 1500, 8400,9600, 11900,17600,12030" />
Series>
asp:LineChart>--%>
<asp:LineChart ID="LineChart1" runat="server" ChartHeight="300" ChartWidth = "450"
ChartType="Basic" ChartTitleColor="#000" Visible = "false"
CategoryAxisLineColor="#000" ValueAxisLineColor="#000" BaseLineColor="#c1c1c1">
asp:LineChart>
<br />
<p>
Date 1:
<input type="text" id="datepicker" runat="server" />
p>
<p>
Date 2:
<input type="text" id="datepicker2" runat="server" />
p>
<asp:Button ID="bnt" runat="server" OnClick="bnt_Click" Text="Get Date" />
div>
<asp:Panel ID="pnlTextBoxes" runat="server">
asp:Panel>
<hr />
<asp:Button ID="btnAdd" runat="server" Text="Add New" OnClick="AddTextBox" />
<asp:Button ID="btnSave" runat="server" Text="Save" OnClick="Save" />
<asp:Button ID="GenerateChart" runat="server" Text="Populate Chart"
onclick="GenerateChart_Click" />
form>
body>
html>

------Codebehind c# ----------

using System;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Linq;
using System.Collections.Generic;
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
int totaldays = 0;
protected void Page_PreInit(object sender, EventArgs e)
{
List keys = Request.Form.AllKeys.Where(key => key.Contains("txtDynamic")).ToList();
int i = 1;
foreach (string key in keys)
{
this.CreateTextBox("txtDynamic" + i);
i++;
}
}
protected void AddTextBox(object sender, EventArgs e)
{
int index = pnlTextBoxes.Controls.OfType().ToList().Count + 1;
this.CreateTextBox("txtDynamic" + index);
}
private void CreateTextBox(string id)
{
//TextBox txt = new TextBox();
//txt.ID = id;
//pnlTextBoxes.Controls.Add(txt);
//Literal lt = new Literal();
//lt.Text = "
";
//pnlTextBoxes.Controls.Add(lt);
for (int i = 0; i < totaldays; i++) //specifying the condition in for loop for creating no. of textboxes
{
//TextBox tb = new TextBox(); //Create the object of TexBox Class
//tb.ID = i.ToString(); // assign the loop value to textbox object for dynamically adding Textbox ID
//Form.Controls.Add(tb); // adding the controls
TextBox txt = new TextBox();
txt.ID = id;
pnlTextBoxes.Controls.Add(txt);
Literal lt = new Literal();
lt.Text = "
";
pnlTextBoxes.Controls.Add(lt);
}
}
protected void Save(object sender, EventArgs e)
{
foreach (TextBox textBox in pnlTextBoxes.Controls.OfType())
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
//for (int i = 0; i < totaldays; i++) //specifying the condition in for loop for creating no. of textboxes
//{
using (SqlCommand cmd = new SqlCommand("INSERT INTO chart VALUES(@DT,@Value)"))
{
cmd.Connection = con;
cmd.Parameters.AddWithValue("@DT", textBox.Text);
cmd.Parameters.AddWithValue("@value", textBox.Text);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
Response.Write("");
}
// }
}
}
}
//
private static DataTable GetData(string query)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
using (SqlDataAdapter sda = new SqlDataAdapter())
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
sda.SelectCommand = cmd;
sda.Fill(dt);
}
}
return dt;
}
}
protected void GenerateChart_Click(object sender, EventArgs e)
{
string query = string.Format("select * from chart");
DataTable dt = GetData(query);
string[] x = new string[dt.Rows.Count];
decimal[] y = new decimal[dt.Rows.Count];
for (int i = 0; i < dt.Rows.Count; i++)
{
x[i] = dt.Rows[i][0].ToString();
y[i] = Convert.ToInt32(dt.Rows[i][1]);
}
LineChart1.Series.Add(new AjaxControlToolkit.LineChartSeries { Data = y });
LineChart1.CategoriesAxis = string.Join(",", x);
// LineChart1.ChartTitle = string.Format("{0} Order Distribution", ddlCountries.SelectedItem.Value);
if (x.Length > 3)
{
LineChart1.ChartWidth = (x.Length * 75).ToString();
}
LineChart1.Visible = true;
}
public void datediff()
{
if (datepicker2.Value != "" && datepicker.Value != "")
{
//Storing input Dates
DateTime FromYear = Convert.ToDateTime(datepicker.Value);
DateTime ToYear = Convert.ToDateTime(datepicker2.Value);
//Creating object of TimeSpan Class
TimeSpan objTimeSpan = ToYear - FromYear;
//years
int Years = ToYear.Year - FromYear.Year;
//months
int month = ToYear.Month - FromYear.Month;
//TotalDays
double Days = Convert.ToDouble(objTimeSpan.TotalDays);
totaldays = Convert.ToInt32(Days);
Response.Write("");
////Total Months
//int TotalMonths = (Years * 12) + month;
////Total Hours
//double TotalHours = objTimeSpan.TotalHours;
////Total Minutes
//double TotalMinutes = objTimeSpan.TotalMinutes;
////Total Seconds
//double TotalSeconds = objTimeSpan.TotalSeconds;
////Total Mile Seconds
//double TotalMileSeconds = objTimeSpan.TotalMilliseconds;
}
}
protected void bnt_Click(object sender, EventArgs e)
{
datediff();
int index = pnlTextBoxes.Controls.OfType().ToList().Count + 1;
this.CreateTextBox("txtDynamic" + index);
}
}

4 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vivek Kumar Vishwas8y ago
There is no error in the code,
What i want is to be done.

Suppose there is 6 textbox generated on button click
When i entered value in each text box the value must be saved into the database table.

if there is 6 textbox and we have filled only 3 textbox the 3 row in database table must be inserted on button click

Please download my code and ru on your system and do it once please.
8y ago
Can you please share the error details, possible screenshot ?
Vivek Kumar Vishwas8y ago
Yes!

My requirement is as follows :
Creating textbox Dynamically -- It is working
Inserting data from generated textbox value into Database -- Error in this code.
Populating the line-chart from database -- This is also working
8y ago
Are you using facing any issues or struck somewhere?