How to add Ajax activity indicator while calling webservice in

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<head runat="server">

    <script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            $("#ajaxStatus").ajaxStart(function() {
            }).ajaxStop(function() {

            // Start our ajax request when doAjaxButton is clicked
            $('#AjaxButton').click(function() {
                    type: 'POST',
                    url: 'JqueryLoader.aspx/HelloWorld',
                    data: '{}',
                    dataType: 'json',
                    contentType: 'application/json',

                    success: function(json) {
                        // Data processing can process your response
                    $('#response').append('Response Value: ' + json.d);

    <form id="form1" runat="server">
    <div id="ajaxStatus" style="display: none; background-color: Red; width: 100px;">
    <div id="response"></div>
    <input type="button" id="AjaxButton" value="Ajax" />

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

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

    public static string HelloWorld()
        return "Hello World";

See the {{Demo}}

No comments:

Post a Comment