Insert JQuery Created textbox values into database using C#

Here i will explain how to save data into databases from dynamically created text-boxesText-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

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

Procedure :

CREATE Procedure Sp_Insert_Subjects

@P_STDDetails As Insert_Subjects Readonly
     Insert Into Subjectnames(SUbjcode,SubjectName,Staff)
     Select Subcode,SubjName,Staff From @P_STDDetails

<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() {
            var titl = "Create textbox using JQuery";
            document.getElementById('dialog-modal').title = titl;
                height: 150,
                width: 450,
                modal: true

            return false;
        function CloseDailog() {
            return false;
        function Okclick() {

            var counter = document.getElementById("<%=NumOfsubj.ClientID %>").value;
            for (var i = 1; i <= counter; i++) {
                $('<div/>', { 'id': 'TextBoxesGroup' }).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 }))
                $('.c2').css("display", "inline");
            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;


<form id="form1" runat="server">
<asp:Button ID="btnAdd" OnClientClick="javascript:return Show();" runat="server" Text="Add New Exams" />
<div id='TextBoxesGroup' style="text-align: center">
<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 id="dialog-modal" style="display: none">
Enter the number of records to Add &nbsp;&nbsp;
<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();" />&nbsp;&nbsp;
<asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="javascript:return CloseDailog();" />
<asp:HiddenField ID="hdnvalue" runat="server" />
<asp:Label ID="lblstsus" runat="server" ForeColor="Green" Font-Bold="true" Visible="false"></asp:Label>

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();
            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);
                lblstsus.Visible = true;
                lblstsus.Text = "Details Saved in to Database";
            catch (Exception es)
                lblstsus.Text = es.Message.ToString();