csharp

Insert data from HTML Table to Database Using jQuery Ajax in ASP.Net C#

Here I will explain How to Insert data from HTML Table to Database Using jQuery Ajax in ASP.Net C#.
In this article, I will explain with an example, how to Insert data from HTML Table to Database Using jQuery Ajax in ASP.Net C#.
Next article learn
jQuery Ajax Curd : Select Insert Edit Update and Delete Using jQuery Ajax in C#
Step 1:Before creating the application first create the database and use this database.
First, the multiple rows (records) will be inserted into an HTML Table and then the data from all the rows of the HTML Table will be sent to Web Services Method using jQuery AJAX which will be ultimately saved to the database using.

[php]
Create database JqueryDatabase
Use JqueryDatabase
[/php]
Step 2: After that create a table named “Person” in a database to insert data.
[php]
Create table Person(
Personid int primary key identity(1,1),
Name varchar(30),
Address varchar(20),
Age int
)

[/php]
Step 3: After creating a table create stored procedure for insert data into table “Person”.
[php]
Create proc sp_person_insert
@name varchar(30),
@address varchar(20),
@age int
as
begin
insert into Person(Name,Address,Age) values(@name,@address,@age)
end
[/php]

Step 4.Step 1: Create Web Application
“Start”-“All Program”–>Microsoft VS 2012
“File”–>”New”–>”Project”–>Select Visual C# Web–>ASP.NET Empty website
Give the Project Name like My project Name JqueryDemo1 or whatever you wish
Then Right click on the project then selects “Add New Item” by Default new item name “Person.aspx” Page
Step 5: After that, we need to add the jQuery Library to your project. Install the jquery library Click on “ProjectName”
–>Select “Manage NuGet Packages..”–>Select “nuget.org” from the left menu and write “jquery” on search online(ctrl+E) search box.After successful installation, the new script folder is generated in your project.

Step 5. Open .aspx page and write this code.
[php]
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Person.aspx.cs" Inherits="JqueryDemo1.Person" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
//Here Add Reference jQuery Library
<script src="jquery.min.js"></script>
<script type="text/javascript">
//Create a function for Insert the data
//In url write your page name like"Person.aspx".
//Write jQuery Ajax to call WebMethod(InsertData).

function SubmitData() {
$.ajax({
url: ‘Person.aspx/InsertData’,//InsertData is a method name create in ".aspx.cs" page.
type: ‘post’,
contentType: ‘application/json;charset=utf-8’,
dataType: ‘json’,
data: "{Name:’" +$(‘#txtname’).val()+ "’,Address:’" + $(‘#txtaddress’).val() + "’,age:’" + $(‘#txtage’).val() + "’}",
success: function () {
alert("Data inserted successfully");

},
error:function(){
alert("insert errorr");
}

});

}

</script>

<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>Name:</td>
<td><input type="text" id="txtname" /></td>
</tr>
<tr>
<td>Address:</td>
<td><input type="text" id="txtaddress" /></td>
</tr>
<tr>
<td>Age:</td>
<td><input type="text" id="txtage" /></td>
</tr>
<tr>
<td></td>
<td><input type="button" id="btnsave" value="Submit" onclick="SubmitData()" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>

[/php]

Step 6: Open web.config file and Establish a connection with database

Note

  • In initial catalog write Database Name
  • In data source you can simply write (.) /your server name/(local)
  • Integrated security for Authentication

[php]
<connectionStrings>
<add name="DBCS" connectionString="data source=.; initial catalog=JqueryDatabase;integrated security=true"/>
</connectionStrings>
[/php]

Step 7: Open “aspx.cs” page.Put This code on “.aspx.cs” Page.
[php]
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;
using System.Configuration;
using System.Web.Services;

namespace JqueryDemo1
{
public partial class Person : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

[WebMethod]
public static void InsertData(string Name, string Address, int age)
{
SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["DBCS"].ConnectionString);
con.Open();
SqlCommand cmd = new SqlCommand("sp_person_insert", con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.AddWithValue("@name", Name);
cmd.Parameters.AddWithValue("@address", Address);
cmd.Parameters.AddWithValue("@age", age);
cmd.ExecuteNonQuery();
con.Close();
}
}
}
[/php]

Demo

1 thought on “Insert data from HTML Table to Database Using jQuery Ajax in ASP.Net C#

Leave a Reply

Your email address will not be published.