How to add Ajax activity indicator while calling webservice in asp.net


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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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() {
                $(this).show();
            }).ajaxStop(function() {

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

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

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

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)
    {

    }
    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string HelloWorld()
    {
        System.Threading.Thread.Sleep(5000);
        return "Hello World";
    }
}

See the {{Demo}}

No comments:

Post a Comment