How To Submit Form without page refresh in with Ajax and Jquery.

Spread the love

In this article I’ll show you how to Submit Form Using Ajax and Jquery.

First Create a Eployee table .

Create a new WebSite 

Add a new WebForm name as Index.aspx.

Add the following code to page.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx.cs" Inherits="Index" %>
<!DOCTYPE html>
<html xmlns="">
<head runat="server">
    <script src="Script/jquery-2.1.1.min.js"></script>
    <script src="Script/Myjs.js"></script>
    <form id="form1" runat="server">
                    <input type="text" id="txtName" />
                    <input type="text" id="txtAge" />
                    <input type="text" id="txtEmail" />
                    <input type="button" id="btnSubmit" value="Save" />
        <label id="lblResult" ></label>

Now Open your Code behind File Index.aspx.cs.

Write the following code.

using System;
using System.Web.Services;
using System.Data.SqlClient;
public partial class Index : System.Web.UI.Page
    protected void Page_Load(object sender, EventArgs e)
    public static string SaveRecord(string Name,int Age, string Email)
        string messageResult = string.Empty;
        string strConnection = @"Data Source=(LocalDB)\v11.0;AttachDbFilename=C:\Users\AMIT\Documents\TestDB.mdf;Integrated Security=True;Connect Timeout=30";
        SqlConnection con = new SqlConnection(strConnection);
        SqlCommand cmd = new SqlCommand("insert into Employee (Name,Age,Email) values (@name,@age,@email)",con);
        cmd.Parameters.AddWithValue("@name", Name);
        cmd.Parameters.AddWithValue("@email", Email);
        int result = cmd.ExecuteNonQuery();
        if(result == 1)
            messageResult = "Record Inserted";
            messageResult="Unable to Save Record";
        return messageResult;

Above you can see, I have added a attribute [WebMethod].

What is WebMethod ?

A WebMethod Attribute Enable a method to be called through the WebServices.

Now add a new JS file. 

Write the following code in your JS file.

$(document).ready(function () {
    $('#btnSubmit').on('click', function () {
        var getName = $('#txtName').val();
        var getAge = parseInt($('#txtAge').val());
        var getEmail = $('#txtEmail').val();
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Index.aspx/SaveRecord",
                data: "{'Name':'" + getName + "','Age':" + getAge + ",'Email':'" + getEmail + "'}",
                dataType: "json",

Leave a Reply

Your email address will not be published. Required fields are marked *

  • Broadband Speed Check
    Spread the love Broadband speed refers to the data transfer rate from the internet to your computer.  Broadband speed tests measure […]
  • Compare Internet Service Providers (DSL)
    Spread the love   Verizon DSL Qwest DSL Deluxe AT&T U-Verse High Speed Internet. Maximum connection speed (Download / Upload)* 0.5 -1 […]
  • Compare High Speed 56K Dialup ISP
    Spread the love   PeoplePC AT&T EarthLink AOL Time usage/m Unlimited Unlimited 200 hr Unlimited Unlimited Unlimited […]
  • DSL vs Cable Internet – Differences between DSL and Cable Internet
    Spread the love DSL internet Cable internet Data transmission via phone line Data transmission via coaxial cable line Connected through DSL modem […]
  • VoIP – Bonus Features
    Spread the love Unlike landline phone service, VoIP providers often provide many bonus features for free.  Some of them are very useful to […]
  • Virtual Telephone Number – What is a virtual telephone number?
    Spread the love A virtual telephone number is simply a phone number that doesn’t have a directly-associated phone line.  It is a vanity number […]
  • Satellite VoIP
    Spread the love The market of VoIP has been expanding rapidly over the past few years.  VoIP allows the transmission of voice signals over the […]
  • VoIP – FAQ
    Spread the love VoIP is a relatively new phone service to many consumers.  Some of you may have hesitations when transferring your phone service from […]
  • Cable Internet Service Providers
    Spread the love Comcast Cable Internet Maximum connection speed: 8 Mbps / 384 kbps (download speed up to 100 times faster than 56K dialup) $75 Cash […]
  • Broadband DSL. What does DSL stand for?
    Spread the love DSL stands for “Digital Subscriber Line”. It is a family of technologies that provides digital data transmission over the wires of […]
  • Broadband Internet
    Spread the love Broadband Internet, also called High Speed Internet, is an internet connection offering high data transmission rate of 256 Kbps […]
  • Wireless Internet Service Providers
    Spread the love AT&T Wi-Fi service can connect you with public wireless high speed internet access at speeds much faster than dialup when you are […]
  • Satellite Internet Providers
    Spread the love HughesNetTM offers affordable, super-fast, always-on, satellite Internet access and is available anywhere in the contiguous […]
  • VoIP for Small Business
    Spread the love VoIP, or voice over internet protocol, is a technology that has revolutionized the way businesses communicate today. This technology […]
  • Wireless Internet / Wi-Fi
    Spread the love How does wireless internet work?  Wireless internet transfers digital data using radio frequency. Wi-Fi is the leading wireless […]
  • Ten Tips for Choosing a VoIP Provider
    Spread the love What should you consider when choosing a VoIP provider? Read our simple tips and do your own VoIP comparisons before making your […]
  • Satellite Internet
    Spread the love Satellite Internet Access is probably the most expensive high speed internet service for home users. However, in rural or remote […]
  • Best VoIP Providers
    Spread the love VoIPo Residential VoIP Key Features: Unlimited Calls to US/Canada Over 38 Calling Features 2nd Line (Cloned) Free Equipment Free […]
  • ISP: Tips for Choosing a Good Broadband ISP
    Spread the love For those who are relocating or moving from dialup to broadband internet access, choosing a broadband ISP can cause some headaches. […]
  • 56K Dialup ISP / High Speed Dialup ISP
    Spread the love PeoplePC Accelerated Unlimited internet access Accelerated technology increases speed by up to 5X Smart dialer technology (dial the […]