Insert JQuery Created textbox values into database using C#

Hi,
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
)
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 &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();" />
</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();
            }
        }
    }
}