This article explains how to save data into a database using jQuery and JSON in ASP.NET. The query above will create a new table in your database like this:
Our database is ready to use. Now we will create a webpage to receive and show the data.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style type="text/css">
<style type="text/css">
body
{
font-family: Verdana;
font-size: 11px;
}
.errMsg
{
width: 200px;
text-align: left;
color: yellow;
font: 12px arial;
background: red;
padding: 5px;
display: none;
}
.tblResult
{
border-collapse: collapse;
}
.tblResult td
{
padding: 5px;
border: 1px solid red;
}
.tblResult th
{
padding: 5px;
border: 1px solid red;
}
img
{
cursor: pointer;
}
</style>
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<%--//=== Here we will show error and confirmation messages.--%>
<div class="errMsg">
</div>
</td>
</tr>
<tr>
<td>
<b>Name</b>
</td>
<td>
<asp:TextBox runat="server" ID="txtName" />
</td>
</tr>
<tr>
<td>
<b>Email</b>
</td>
<td>
<asp:TextBox runat="server" ID="txtEmail" />
</td>
</tr>
<tr>
<td>
<b>Age</b>
</td>
<td>
<asp:TextBox runat="server" ID="txtAge" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" onclick="saveData()" id="btnSave" value="Save" title="Save" />
</td>
</tr>
<tr>
<td colspan="2">
<%--//==== We will show our data in this div--%>
<div id="divData">
</div>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function clear() {
$("#txtName").val("");
$("#txtEmail").val("");
$("#txtAge").val("");
}
function bindData() {
$.ajax({
type: "POST",
url: "Default.aspx/getData",
data: "{}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function (response) {
if ($('#tblResult').length != 0) // remove table if it exists
{ $("#tblResult").remove(); }
var table = "<table class='tblResult' id=tblResult><thead> <tr><th>Name</th><th>Email</th><th>Age</th></thead> <tbody>";
for (var i = 0; i <= response.d.length - 1; i++) {
var row = "<tr>";
row += '<td>' + response.d[i].Name + '</td>';
row += '<td>' + response.d[i].Email + '</td>';
row += '<td>' + response.d[i].Age + '</td>';
row += '</tr>';
table += row;
}
table += '</tbody></table>';
$('#divData').html(table);
$("#divData").slideDown("slow");
},
error: function (response) {
alert(response.status + ' chandan ' + response.statusText);
}
});
}
function saveData() {
var txtName = $("#txtName").val();
var txtEmail = $("#txtEmail").val();
var txtAge = $("#txtAge").val();
$.ajax({
type: "POST",
url: "Default.aspx/saveData",
data: "{name:'" + txtName + "',email:'" + txtEmail + "',age:'" + txtAge + "'}",
contentType: "application/json; charset=utf-8",
datatype: "jsondata",
async: "true",
success: function (response) {
$(".errMsg ul").remove();
var myObject = eval('(' + response.d + ')');
if (myObject > 0) {
bindData();
$(".errMsg").append("<ul><li>Data saved successfully</li></ul>");
}
else {
$(".errMsg").append("<ul><li>Opppps something went wrong.</li></ul>");
}
$(".errMsg").show("slow");
clear();
},
error: function (response) {
alert(response.status + ' ' + response.statusText);
}
});
}
</script>
</form>
</body>
</html>
The Output will be like this:
![Output]()
Step 1: Add this code between the head tags of your page.
Let's create our save function in the Default.aspx.cs page. To call your method from jQuery you need to be create a method of type [WebMethod].
Step 2: Add Name space: using System.Web.Services;
Step 3: Save Method:
[WebMethod]
public static int saveData(string name, string email, string age)
{
try
{
int status = 1;
string Query = string.Empty;
SqlConnection cn = new SqlConnection("Data Source=sqlexpress; Initial Catalog=Json;Integrated Security=True");
Query = "INSERT INTO Student (Name,Email,Age,CreatedOn) VALUES ('" + name + "','" + email + "'," + age + ",GETDATE())";
SqlCommand cmd = new SqlCommand(Query, cn);
cn.Open();
cmd.ExecuteNonQuery();
cn.Close();
return status;
}
catch
{
return -1;
}
}
2. bindData() method. This method will create a dynamic HTML table and insert into the page to show the records we have entered.
[WebMethod]
public static Student[] getData()
{
string data = string.Empty;
data = "dhdhdhddh";
StudentCollection sc = new StudentCollection();
try
{
SqlConnection con = new SqlConnection("Data Source=sqlexpress; Initial Catalog=Json;Integrated Security=True");
if (con.State == ConnectionState.Closed)
{
con.Open();
}
SqlDataReader dr;
SqlCommand cmd;
string FetchData = "Select * From Student";
cmd = new SqlCommand(FetchData, con);
dr = cmd.ExecuteReader();
if (dr.Read())
{
while (dr.Read())
{
Student s = new Student();
s.Name = dr[0].ToString();
s.Email = dr[1].ToString();
s.Age = dr[2].ToString();
sc.Add(s);
}
}
return sc.ToArray();
}
catch
{
return sc.ToArray();
}
}
}
public class Student
{
public string Name { get; set; }
public string Email { get; set; }
public string Age { get; set; }
}
public class StudentCollection : List<Student>
{
public void Add(Student st)
{
base.Add(st);
}
}
Output
If you have followed all the steps carefully then you will see the output like this: