Monday, 16 September 2013

Jquery Ajax with ajax start and ajax end events to call server side method

In this post I give the demo of jquery ajax to call server side method and use ajax start event to handling  ajax start  and display loading image and on ajax stop I hide loading image after request return response. I use web method to call server side method and add thread to delay response.


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxDemo.aspx.cs" Inherits="AjaxDemo"%>

<!DOCTYPE html>

<html xmlns="">
<head runat="server">
    <script src="//"></script>

    <script type="text/javascript">
        function displayMessage() {
                   type: "POST",
                   contentType: "application/json; charset=utf-8",
                   url: "AjaxDemo.aspx/GetMessage",
                   data: "{}",
                   success: function (result) {

        $(document).ajaxStart(function () {

        $(document).ajaxStop(function () {


    <form id="form1" runat="server">
    <div style="text-align: center; margin-top: 150px;">
    <input type="button" value="click me" onclick="displayMessage();" />
        <div id="result"></div>
        <div id="loading" style="display: none">
            <img src="ajax-loader.gif" />

using System;
using System.Web.Services;

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


    public static string GetMessage()
        return "Hello Ajax";

No comments:

Post a Comment