Hi,
Here i will explain how to save
data into databases from dynamically created text-boxes. Text-boxes are created
using JQuery as Shown in previous post. Here we can insert the text or data
into database from the dynamically created text-box. Follow the procedure below.
Follow this post before executing this :Create and Remove textbox dynamically using JQuery and JavaScript
User-defined table type :
CREATE TYPE [dbo].[Insert_Subjects] AS TABLE\
Procedure :
CREATE Procedure Sp_Insert_Subjects
Follow this post before executing this :Create and Remove textbox dynamically using JQuery and JavaScript
JQuery created Textbox values into database |
Table
:
create table Subjectnames
(
SUbjcode varchar(200),
SubjectName varchar(200),
Staff varchar(200)
)
User-defined table type :
CREATE TYPE [dbo].[Insert_Subjects] AS TABLE\
(
[Subcode] [varchar](50) NULL,
[SubjName]
[varchar](50) NULL,
[Staff] [varchar](50) NULL
)
GO
Procedure :
CREATE Procedure Sp_Insert_Subjects
(
@P_STDDetails As
Insert_Subjects Readonly
)
As
Begin
Insert Into
Subjectnames(SUbjcode,SubjectName,Staff)
Select Subcode,SubjName,Staff From
@P_STDDetails
End
GO
ASPX
PAGE :
<html>
<head runat="server">
<title>Copyright
@ Fourthbottle</title>
<script src="Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui1.10.3.js" type="text/javascript"></script>
<script src="Scripts/jquery-ui.js" type="text/javascript"></script>
<link href="Scripts/jquery-ui.css" rel="stylesheet"
type="text/css"
/>
<script type="text/javascript">
function
Show() {
$("#dialog:ui-dialog").dialog("destroy");
var
titl = "Create textbox using JQuery";
document.getElementById('dialog-modal').title = titl;
$("#dialog-modal").dialog({
height: 150,
width: 450,
modal: true
});
return
false;
}
function
CloseDailog() {
$('#dialog-modal').dialog('close');
return
false;
}
function
Okclick() {
var
counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
CloseDailog();
for
(var i = 1; i <= counter; i++) {
$('<div/>',
{ 'id': 'TextBoxesGroup'
}).html(
$('<label/>').html()
)
.append($('<input
type="text" runat="server" class="c1"
placeholder="Enter Subject Code" >').attr({ 'id': 'SubjectCode'
+ i, 'name': 'Subcode'
+ i }))
.append($('<input
type="text" runat="server" class="c1" placeholder="Enter
Subject Name" >').attr({ 'id':
'SubjName' + i, 'name':
'Subname' + i }))
.append($('<input
type="text" runat="server" class="c1"
placeholder="Enter Staff Name" >').attr({ 'id': 'StaffName'
+ i, 'name': 'Staff'
+ i }))
.appendTo('#TextBoxesGroup')
$('.c2').css("display", "inline");
}
NoOFRows()
return
false;
}
function
Removerow() {
var
counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
$("#SubjectCode"
+ counter).remove();
$("#SubjName"
+ counter).remove();
$("#StaffName"
+ counter).remove();
counter = counter - 1;
document.getElementById("<%=NumOfsubj.ClientID
%>").value
= counter;
return
false;
}
function
NoOFRows() {
document.getElementById("<%=hdnvalue.ClientID
%>").value
= document.getElementById("<%=NumOfsubj.ClientID %>").value;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnAdd" OnClientClick="javascript:return Show();" runat="server" Text="Add New Exams" />
<div id='TextBoxesGroup' style="text-align: center">
</div>
<div style="text-align: center">
<asp:Button ID="Button2" runat="server" Text="Save" Style="display: none" class="c2" OnClick="btnAdd_Click" />
<asp:Button ID="btnRemoveRow" runat="server" Style="display: none" OnClientClick="javascript:return Removerow();" class="c2" Text="Remove row" />
<asp:Button ID="Button1" runat="server" Text="Cancel" Style="display: none" class="c2" />
</div>
<div id="dialog-modal" style="display: none">
Enter the number of records to Add
<asp:TextBox ID="NumOfsubj" runat="server" Style="width: 50px;"></asp:TextBox><br />
<div style="text-align: center">
<asp:Button ID="btnOk" runat="server" Text="Okay" OnClientClick="javascript:return Okclick();" />
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="javascript:return CloseDailog();" />
</div>
</div>
<asp:HiddenField ID="hdnvalue" runat="server" />
<asp:Label ID="lblstsus" runat="server" ForeColor="Green" Font-Bold="true" Visible="false"></asp:Label>
</div>
</form>
</body>
</html>
C# :
using System;
using
System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using
System.Data.SqlClient;
namespace DynamicTextBx
{
public partial class WebForm1 : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
}
protected
void btnAdd_Click(object
sender, EventArgs e)
{
string
count = NumOfsubj.Text;
DataTable
Dt = new DataTable();
Dt.Columns.Add("Subcode");
Dt.Columns.Add("SubjName");
Dt.Columns.Add("StaffName");
int
RCount = Convert.ToInt32(hdnvalue.Value);
for
(int i = 1; i <= RCount; i++)
{
string subcode
= Request.Form["Subcode" +
i].ToString();
string
Subname = Request.Form["Subname" +
i].ToString();
string
StaffName = Request.Form["Staff" +
i].ToString();
Dt.Rows.Add(subcode, Subname, StaffName);
}
SqlConnection
con = new SqlConnection("connection string");
SqlCommand
cmd = new SqlCommand();
cmd.CommandText = "Sp_Insert_Subjects";
cmd.CommandType = CommandType.StoredProcedure;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@P_STDDetails", Dt);
try
{
con.Open();
cmd.ExecuteNonQuery();
con.Close();
lblstsus.Visible = true;
lblstsus.Text = "Details Saved in to Database";
}
catch
(Exception es)
{
lblstsus.Text =
es.Message.ToString();
}
}
}
}