Insert data method using jQuery Ajax JSON Call in C# with sample code

jQuery is most famous JavaScript library to work handle JavaScript events easily. You can download jQuery or get CDN jQuery Version to include it in your project.
Mostly when we are using application we always preferred postback events for submitting form data. Now every year technology changes as per new requirement. Now a day you can see most famous site preferred submit form without any postback. To prevent and handle postback while submitting data We come up with jQuery AJAX based form submitting.Using AJAX callback you can call server side events of any page. AJAX use JSON format data while forwarding the POST request. For using AJAX Call for submitting data in, you must include jQuery to handle all events.

We use simple database structure to understand very easily. You can use your own if you are better in coding.

Example of jQuery AJAX JSON Call in C#

Database Structure for our example

Column NameData Type
IDint(Primary Key)
First Namevarchar(50)
Last Namevarchar(50)

 [ID] [int] IDENTITY(1,1) NOT NULL,
 [FirstName] [varchar](50) NULL,
 [LastName] [varchar](50) NULL,
 [City] [varchar](30) NULL,
 [EmailID] [varchar](100) NULL)
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <title>Example of jQuery AJAX Callback using C#</title>
    <script type="text/javascript" src=""></script>

    <form id="form1" runat="server">
                    <td>First Name :</td>
                        <input type="text" id="txtFirstName" />
                    <td>Last Name :</td>
                        <input type="text" id="txtLastName" />
                    <td>City :</td>
                          <input type="text" id="txtCity" />
                    <td>EmailID :</td>
                          <input type="text" id="txtEmailID" />
                    <td colspan="2">
                        <input type="button" id="btnSubmit" value="Submit" />
                        <label id="lblmsg" style="color:green" />
            <asp:GridView ID="gvData" AutoGenerateColumns="true" runat="server"></asp:GridView>
      <script type="text/javascript">
          $(function () {
              $('#btnSubmit').click(function () {
                      type: "POST",
                      contentType: "application/json; charset=utf-8",
                      url: "Default.aspx/InsertData",
                      dataType: "json",
                      data: "{'FirstName':'" + $('#txtFirstName').val() + "','LastName':'" + $('#txtLastName').val() + "','City':'" + $('#txtCity').val() + "','EmailID':'" + $('#txtEmailID').val() + "'}",
                      success: function (data) {
                          var obj = data.d;
                          if (obj == 'true') {
                              $('#lblmsg').html('Data Inserted Successfully');
                      error: function (result) {
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)

    public static string InsertData(string FirstName, string LastName, string City, string EmailID)
        string retMessage = string.Empty;
        string ConnectionString= "Enter Your Connection String";
        using (SqlConnection con = new SqlConnection(ConnectionString))
            string Query = "insert into Sample(FirstName, LastName, City, EmailID) values(@FirstName,@LastName,@City,@EmailID)";
            using (SqlCommand cmd = new SqlCommand(Query,con))
                cmd.Parameters.Add("@FirstName", FirstName);
                cmd.Parameters.Add("@LastName", LastName);
                cmd.Parameters.Add("@City", City);
                cmd.Parameters.Add("@EmailID", EmailID);

                int AffectedRow = cmd.ExecuteNonQuery();
                if (AffectedRow == 1)
                    retMessage = "true";
                    retMessage = "false";
            return retMessage;
Download Sample Code


Popular posts from this blog

12 opensource and free MVC gridview contols

Scheduling background jobs using Hangfire in ASP.NET Core

Difference ExecuteNonQuery vs ExecuteScalar vs ExecuteReader in