In this article I am going to show how we can call a
WEB Method to insert record into your SQL Server table using jQuery and JSON.
Below is my SQL Server Table in Design mode:
Image 1.
Script
of my table:
CREATE TABLE [dbo].[Employee](
[ID] [int] IDENTITY(1,1) NOT NULL,
[Name]
[varchar](50) NULL,
[Email]
[varchar](500) NULL,
[Country]
[varchar](50) NULL
) ON [PRIMARY]
GO
Now below is my aspx code:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="jQueryWebMethodInsertData.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/json2/0.1/json2.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=btnSave]").bind("click", function () {
var employee = {};
employee.Name = $("[id*=txtName]").val();
employee.Email = $("[id*=txtEmail]").val();
employee.Country = $("[id*=txtCountry]").val();
$.ajax({
type: "POST",
url: "Default.aspx/SaveUser",
data: '{employee: ' +
JSON.stringify(employee) + '}',
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
alert("Employee has
been added successfully.");
window.location.reload();
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<table border="0" cellpadding="5" cellspacing="5" style="border: solid 2px Red; background-color: skyblue; width:100%;">
<tr>
<td colspan="2" style="background-color: #f00; color: white; font-weight: bold; font-size: 12pt; text-align: center; font-family: Verdana;">Saving
Data In SQL
Server By Calling WEB Method using jQuery & JSON</td>
</tr>
<tr>
<td style="text-align: left; vertical-align: top; width: 300px;">
<table border="0" cellpadding="5" cellspacing="5" style="border: solid 2px Green;">
<tr>
<td colspan="2" style="background-color: red; color: white; font-weight: bold; font-size: 12pt;
text-align: center; font-family:verdana;">Enter Employee
Information</td>
</tr>
<tr>
<td>Name:
</td>
<td>
<asp:TextBox ID="txtName" runat="server" Text="" />
</td>
</tr>
<tr>
<td>Email:
</td>
<td>
<asp:TextBox ID="txtEmail" runat="server" />
</td>
</tr>
<tr>
<td>Country:
</td>
<td>
<asp:TextBox ID="txtCountry" runat="server" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnSave" Text="Save" runat="server" />
</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>
<asp:GridView ID="gvEmployee" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2" CellPadding="4" ForeColor="#333333" GridLines="None">
<AlternatingRowStyle BackColor="SkyBlue" ForeColor="#284775" />
<Columns>
<asp:BoundField DataField="Id" HeaderText="ID"
ItemStyle-Font-Names="Verdana" ItemStyle-Width="40px" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Font-Names="Verdana"
ItemStyle-Width="180px" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Email" HeaderText="Email" ItemStyle-Font-Names="Verdana"
ItemStyle-Width="250px" HeaderStyle-HorizontalAlign="Center" />
<asp:BoundField DataField="Country" HeaderText="Country" ItemStyle-Font-Names="Verdana" />
</Columns>
<EditRowStyle BackColor="#999999" />
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#5D7B9D" ForeColor="White" Font-Bold="True" HorizontalAlign="Center"></HeaderStyle>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
<RowStyle BackColor="#F7F6F3" ForeColor="#333333"></RowStyle>
<SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
<SortedAscendingCellStyle BackColor="#E9E7E2" />
<SortedAscendingHeaderStyle BackColor="#506C8C" />
<SortedDescendingCellStyle BackColor="#FFFDF8" />
<SortedDescendingHeaderStyle BackColor="#6F8DAE" />
</asp:GridView>
</td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
Now
my aspx.cs 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;
using
System.Web.Script.Services;
namespace
jQueryWebMethodInsertData
{
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
BindEmployees();
}
}
private void BindEmployees()
{
string constr = ConfigurationManager.ConnectionStrings["RConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT *
FROM Employee ORDER BY ID"))
{
using (SqlDataAdapter da = new SqlDataAdapter())
{
DataTable dt = new DataTable();
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
da.SelectCommand = cmd;
da.Fill(dt);
gvEmployee.DataSource =
dt;
gvEmployee.DataBind();
}
}
}
}
[WebMethod]
[ScriptMethod]
public static void SaveUser(Employee employee)
{
string constr = ConfigurationManager.ConnectionStrings["RConnection"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO
Employee VALUES(@Name, @Email, @Country)"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Name", employee.Name);
cmd.Parameters.AddWithValue("@Email", employee.Email);
cmd.Parameters.AddWithValue("@Country", employee.Country);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
}
}
Now run your application
Image 2.
Image 3.
Image 4.
Image 5.