Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

jQuery and JSON with WEB Method to Insert Data

Article:
Viewed:  910 
Posted On:  5/19/2015 10:05:09 AM 
How we can insert data in SQL server table using jQuery and JSON with WEB Method? 

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:

1.png

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

2.png

Image 2.

3.png

Image 3.

4.png

Image 4.

5.png

Image 5.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us