It’s quite easy to save
data to database without any postback to the server using jQuery ajax in
ASP.NET. jQuery ajax allows you to call ASP.NET page methods without postback.
I have already written an article to call ASP.NET page method using jQuery
ajax. Please follow the link given below.
Using jQuery AJAX to
call ASP.NET page method
Using jQuery ajax to call ASP.NET page method to execute store procedure
Bind GridView using jQuery in ASP.NET
Table
Design:
Add
jQuery Library:
First
we have to add jQuery library. You can download jQuery library here, or you can
use following jQuery CDN.
<script type="text/javascript"
src="//code.jquery.com/jquery-1.10.2.min.js"></script>
jQuery
ajax method:
Here we
have to write jQuery ajax method to call ASP.NET page method.
$(document).ready(function () {
$('#btnsubmit').click(function () {
var
name = $('#txtName').val();
var
age = $('#txtAge').val();
var
sex = $('#txtSex').val();
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Default.aspx/Insert_Data',
data: "{'name':'" + name + "','age':'" + age + "','sex':'" + sex + "'}",
async: false,
success: function (response) {
$('#txtName').val('');
$('#txtAge').val('');
$('#txtSex').val('');
alert("Record saved successfully..!!");
},
error: function () {
alert("Error");
}
});
});
});
Web
method:
Here we have to write
WebMethod which is used to store data to SQL Server database. Method should be
declared as static with the [WebMethod] attribute.
[WebMethod]
public static string Insert_Data(string name, string
age, string sex)
{
SqlConnection
conn = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
try
{
conn.Open();
SqlCommand
cmd = new SqlCommand("Insert into Personal_Details (Name,Age,Sex)
values(@name,@age,@sex)", conn);
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@name", name);
cmd.Parameters.AddWithValue("@age", age);
cmd.Parameters.AddWithValue("@sex", sex);
cmd.ExecuteNonQuery();
conn.Close();
return
"Success";
}
catch (Exception ex)
{
return
"failure";
}
}
Putting
it all together:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<title>jQuery
AJAX call to insert records to database</title>
<script type="text/javascript">
$(document).ready(function () {
$('#btnsubmit').click(function () {
var
name = $('#txtName').val();
var
age = $('#txtAge').val();
var
sex = $('#txtSex').val();
$.ajax({
type: 'POST',
contentType: "application/json; charset=utf-8",
url: 'Default.aspx/Insert_Data',
data: "{'name':'" + name + "','age':'" + age + "','sex':'" + sex + "'}",
async: false,
success: function (response) {
$('#txtName').val('');
$('#txtAge').val('');
$('#txtSex').val('');
alert("Record saved successfully..!!");
},
error: function () {
alert("Error");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table align="center">
<tr>
<td> Name </td>
<td> <asp:TextBox ID="txtName"
runat="server"
ClientIDMode="Static"></asp:TextBox> </td>
</tr>
<tr>
<td> Age </td>
<td> <asp:TextBox ID="txtAge" runat="server"
ClientIDMode="Static"> </asp:TextBox> </td>
</tr>
<tr>
<td> Sex </td>
<td> <asp:TextBox ID="txtSex" runat="server"
ClientIDMode="Static"> </asp:TextBox> </td>
</tr>
<tr>
<td> <input type="button"
id="btnsubmit"
value="Submit"
/> </td>
</tr>
</table>
</div>
</form>
</body>
</html>
C#
code:
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;
public partial class _Default :
System.Web.UI.Page
{
protected void Page_Load(object
sender, EventArgs e)
{
}
[WebMethod]
public static string
Insert_Data(string name, string age, string
sex)
{
SqlConnection
conn = new SqlConnection(ConfigurationManager.ConnectionStrings["myConnectionString"].ConnectionString);
try
{
conn.Open();
SqlCommand
cmd = new SqlCommand("Insert into Personal_Details (Name,Age,Sex)
values(@name,@age,@sex)", conn);
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@name", name);
cmd.Parameters.AddWithValue("@age", age);
cmd.Parameters.AddWithValue("@sex", sex);
cmd.ExecuteNonQuery();
conn.Close();
return
"Success";
}
catch (Exception ex)
{
return
"failure";
}
}
}