Tips/Tricks

Compress Asp.net Ajax Web Service Response - Save Bandwidth

Kazi Manzur Rashid — Sat, 15 Sep 2007 11:09:31 GMT

In this post, I will show you how to compress the Asp.net Ajax Web Service response, To understand the benefits of compression let us start with a simple example, Consider you have an web service which returns a large data like the following:

[WebMethod()]
public string GetLargeData()
{
    using (StreamReader sr = File.OpenText(Server.MapPath("~/DataFile.txt")))
    {
        return sr.ReadToEnd();
    }
}

The web method reads an large text file (around 100KB) and returns it contents. Once we call this method from a page the network activity in the firebug shows like the following:

Now, lets examine the HttpModule which compress the Ajax Web Service response. The following shows the complete code of this module:

using System;
using System.IO;
using System.IO.Compression;
using System.Globalization;
using System.Web;


public class JsonCompressionModule : IHttpModule
{
    public JsonCompressionModule()
    {
    }

    public void Dispose()
    {
    }

    public void Init(HttpApplication app)
    {
        app.PreRequestHandlerExecute += new EventHandler(Compress);
    }

    private void Compress(object sender, EventArgs e)
    {
        HttpApplication app = (HttpApplication)sender;
        HttpRequest request = app.Request;
        HttpResponse response = app.Response;

        //Ajax Web Service request is always starts with application/json
        if (request.ContentType.ToLower(CultureInfo.InvariantCulture).StartsWith("application/json"))
        {
            //User may be using an older version of IE which does not support compression, so skip those
            if (!((request.Browser.IsBrowser("IE")) && (request.Browser.MajorVersion <= 6)))
            {
                string acceptEncoding = request.Headers["Accept-Encoding"];

                if (!string.IsNullOrEmpty(acceptEncoding))
                {
                    acceptEncoding = acceptEncoding.ToLower(CultureInfo.InvariantCulture);

                    if (acceptEncoding.Contains("gzip"))
                    {
                        response.Filter = new GZipStream(response.Filter, CompressionMode.Compress);
                        response.AddHeader("Content-encoding", "gzip");
                    }
                    else if (acceptEncoding.Contains("deflate"))
                    {
                        response.Filter = new DeflateStream(response.Filter, CompressionMode.Compress);
                        response.AddHeader("Content-encoding", "deflate");
                    }
                }
            }
        }
    }
}

Next, register this module in the web.config like the following:

<httpModules>
    <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    <add name="JsonCompressionModule" type="JsonCompressionModule"/>
</httpModules>

This time the network activity shows like the following:

So by adding this little module, we have saved 74KB. Now consider the impact of this in an highly traffic ajax web application :-). You will find the complete source code in the bottom of this post. If you want to learn more optimization tips check out my previous post Implement Yahoo's YSlow in your Asp.net pages and Combine Multiple JavaScript and CSS Files and Remove Overheads.

Download: Full Source

Showing Modal Progress Dialog in all Ajax Operation

Kazi Manzur Rashid — Sat, 25 Aug 2007 00:13:57 GMT

If you ever like to show a Modal Progress dialog like the above for any ajax operation no matter which Update Panel or Web Service call is responsible for it, the following code will do the same.

<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [System.Web.Services.WebMethod()]
    public static string GetDate()
    {
        //Doing a fake delay for 3 seconds
        System.Threading.Thread.Sleep(3000);

        return DateTime.Now.ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDate1.Text = lblDate2.Text = DateTime.Now.ToString();
        }
    }

    protected void btnDate1_Click(object sender, EventArgs e)
    {
        //Doing a fake delay for 3 seconds
        System.Threading.Thread.Sleep(3000);
        lblDate1.Text = DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Modal Dialog Progress</title>
    <style type="text/css">
        .modalBackground
        {
            background-color:#e6e6e6;
            filter:alpha(opacity=60);
            opacity:0.60;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">
        </asp:ScriptManager>
        <fieldset>
            <legend>UpdatePanel</legend>
            <div>
                <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                    <ContentTemplate>
                        <asp:Label ID="lblDate1" runat="server"></asp:Label>
                        <asp:Button ID="btnDate1" runat="server" Text="Get Date" OnClick="btnDate1_Click" />
                    </ContentTemplate>
                </asp:UpdatePanel>
            </div>
        </fieldset>
        <fieldset>
            <legend>PageMethods</legend>
            <div>
                <asp:Label ID="lblDate2" runat="server"></asp:Label>
                <asp:Button ID="btnDate2" runat="server" Text="Get Date" OnClientClick="return btnDate2_Click()" />
            </div>
        </fieldset>
        <asp:Panel ID="pnlProgress" runat="server" style="background-color:#ffffff;display:none;width:400px">
            <div style="padding:8px">
                <table border="0" cellpadding="2" cellspacing="0" style="width:100%">
                    <tbody>
                        <tr>
                            <td style="width:50%"></td>
                            <td style="text-align:right">
                                <img alt="" src="indicator-big.gif" />
                            </td>
                            <td style="text-align:left;white-space:nowrap">
                                <span style="font-size:larger">Loading, Please wait ...</span>
                            </td>
                            <td style="width:50%"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </asp:Panel>
        <ajaxToolKit:ModalPopupExtender ID="mpeProgress" runat="server" TargetControlID="pnlProgress" PopupControlID="pnlProgress" BackgroundCssClass="modalBackground" DropShadow="true" />
    </form>
    <script type="text/javascript">

        Sys.Net.WebRequestManager.add_invokingRequest(onInvoke);
        Sys.Net.WebRequestManager.add_completedRequest(onComplete);

        function onInvoke(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').show();
        }

        function onComplete(sender, args)
        {
            $find('<%= mpeProgress.ClientID %>').hide();
        }

        function btnDate2_Click()
        {
            PageMethods.GetDate (
                                    function(result)
                                    {
                                        var lbl = $get('<%= lblDate2.ClientID %>');

                                        if (document.all)
                                        {
                                            lbl.innerText = result;
                                        }
                                        else
                                        {
                                            lbl.textContent = result;
                                        }
                                    }
                                );

            return false;
        }

        function pageUnload()
        {
            Sys.Net.WebRequestManager.remove_invokingRequest(onInvoke);
            Sys.Net.WebRequestManager.remove_completedRequest(onComplete);
        }

    </script>
</body>
</html>

The main trick is hooking the two special events of Sys.Net.WebRequestManager class. This class is responsible for managing all kinds of communication with the server, even a manual invoke of a Sys.Net.WebRequest class will bring this class into action. It fires the invokingRequest before making an Ajax call and fires the completeRequest once the method completes. We are simply showing/hiding the modal popup extender in these events.

Download: Full Source

Loading UserControl Dynamically in UpdatePanel

Kazi Manzur Rashid — Sun, 12 Aug 2007 01:48:32 GMT

In this post, I will show you how to load different user control in UpdatePanel from different menu item click. I have found a lot of request in Asp.net Ajax Forum and some of them are having misconception about this. Once you complete reading this post you will be able to load controls dynamically and learn how to employ different helper controls like UpdateProgress, ModalPopupExtender while the UserControl is loading. First let us create plain page without the ajax support:

Markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PlainSampleMenu.aspx.cs" Inherits="PlainSampleMenuPage" %>
<!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">
    <title>Plain Sample Menu</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="File">
                    <asp:MenuItem Text="Load Control1"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control2"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control3"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
        <br />
        <br />
        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    </form>
</body>
</html>

Code Behind:

using System;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class PlainSampleMenuPage : System.Web.UI.Page
{
    private const string BASE_PATH = "~/DynamicControlLoading/";

    private string LastLoadedControl
    {
        get
        {
            return ViewState["LastLoaded"] as string;
        }
        set
        {
            ViewState["LastLoaded"] = value;
        }
    }

    private void LoadUserControl()
    {
        string controlPath = LastLoadedControl;

        if (!string.IsNullOrEmpty(controlPath))
        {
            PlaceHolder1.Controls.Clear();
            UserControl uc = (UserControl)LoadControl(controlPath);
            PlaceHolder1.Controls.Add(uc);
        }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        LoadUserControl();
    }

    protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
    {
        MenuItem menu = e.Item;

        string controlPath = string.Empty;

        switch (menu.Text)
        {
            case "Load Control2":
                controlPath = BASE_PATH + "SampleControl2.ascx";
                break;
            case "Load Control3":
                controlPath = BASE_PATH + "SampleControl3.ascx";
                break;
            default:
                controlPath = BASE_PATH + "SampleControl1.ascx";
                break;
        }

        LastLoadedControl = controlPath;
        LoadUserControl();
    }
}

As you can see we are loading the UserControls in the PlaceHolder Control on different menu item click. If you are wondering why I am also loading the controls in Page Load event based upon the ViewState, the reason is otherwise those dynamically loaded controls will not be visible in the consequent postbacks. There are few good articles written by Scott Mitchell on dynamically loading Controls which you will find in the following links:

Now let us ajaxify this page, lets wrap the PlaceHolder with an UpdatePanel control. The following shows the markup:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleMenu1.aspx.cs" Inherits="SampleMenuPage1" %>
<!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">
    <title>Sample Menu</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="File">
                    <asp:MenuItem Text="Load Control1"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control2"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control3"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Menu1" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

Since the Menu control resides outside the UpdatePanel we will also need a AsyncPostBackTrigger for the Menu Control. Now run this page, you will find the controls are loaded without a full postback.

Now let us further enhance this page with UpdateProgress and AjaxControlToolKit's ModalPopupExtender. First with the UpdateProgress Control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleMenu1.aspx.cs" Inherits="SampleMenuPage1" %>
<!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">
    <title>Sample Menu - UpdateProgress</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="File">
                    <asp:MenuItem Text="Load Control1"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control2"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control3"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">
                    <ProgressTemplate>
                        Loading....
                    </ProgressTemplate>
                </asp:UpdateProgress>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Menu1" />
            </Triggers>
        </asp:UpdatePanel>
    </form>
</body>
</html>

As you can see we have added a UpdateProgress Control in the UpdatePanel ContentTemplate. But the UpdateProgress does not get visible when you click any of the menu item. This is the true nature of UpdatePanel, it does not shows the UpdateProgress if the control is out side the UpdatePanel which caused the postback. We have to manually show the UpdateProgress by the JavaScript code like the following:

<script type="text/javascript">

    var prm = Sys.WebForms.PageRequestManager.getInstance();

    prm.add_initializeRequest(initializeRequest);
    prm.add_endRequest(endRequest);

    var _postBackElement;

    function initializeRequest(sender, e)
    {
        if (prm.get_isInAsyncPostBack())
        {
            e.set_cancel(true);
        }

        _postBackElement = e.get_postBackElement();

        if (_postBackElement.id.indexOf('Menu1') > -1)
        {
            $get('UpdateProgress1').style.display = 'block';
        }
    }

    function endRequest(sender, e)
    {
        if (_postBackElement.id.indexOf('Menu1') > -1)
        {
            $get('UpdateProgress1').style.display = 'none';
        }
    }
</script>

Now run the page, you will find the UpdateProgress Control is showing the loading message no matter which control caused the postback.

In this final section we will implement the AjaxControlToolKit's ModalPopupExtender to show the loading message, this will give you a similar look of CodePlex Site. The following shows the source:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SampleMenu2.aspx.cs" Inherits="SampleMenuPage2" %>
<!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">
    <title>Sample Menu - ModalPopupExtender</title>
    <style type="text/css">
        .modalBackground
        {
            background-color:#dcdcdc;
            filter:alpha(opacity=60);
            opacity:0.60;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:Menu ID="Menu1" runat="server" OnMenuItemClick="Menu1_MenuItemClick">
            <Items>
                <asp:MenuItem Text="File">
                    <asp:MenuItem Text="Load Control1"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control2"></asp:MenuItem>
                    <asp:MenuItem Text="Load Control3"></asp:MenuItem>
                </asp:MenuItem>
            </Items>
        </asp:Menu>
        <br />
        <br />
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Menu1" />
            </Triggers>
        </asp:UpdatePanel>
        <asp:Panel ID="Panel1" runat="server" style="background-color:#ffffff;display:none;width:400px">
            <div style="padding:8px">
                <h2>Loading...</h2>
            </div>
        </asp:Panel>
        <ajaxToolKit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Panel1" PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" />
        <script type="text/javascript">

            var prm = Sys.WebForms.PageRequestManager.getInstance();

            prm.add_initializeRequest(initializeRequest);
            prm.add_endRequest(endRequest);

            var _postBackElement;

            function initializeRequest(sender, e)
            {
                if (prm.get_isInAsyncPostBack())
                {
                    e.set_cancel(true);
                }

                _postBackElement = e.get_postBackElement();

                if (_postBackElement.id.indexOf('Menu1') > -1)
                {
                    $find('ModalPopupExtender1').show();
                }
            }

            function endRequest(sender, e)
            {
                if (_postBackElement.id.indexOf('Menu1') > -1)
                {
                    $find('ModalPopupExtender1').hide();
                }
            }
        </script>
    </form>
</body>
</html>

As you can see we first created a custom style which will be shown as the background style when the modal popup is visible, next we have added a regular Asp.net Panel control which will be shown as the modal popup. We have initially set the Panel control display mode to none, so there will be no flicker when the modal popup is shown. At last, we have added a ModalPopupExtender and sets its required property. The previous rule also applies here, we have to manually show/hide the ModalPopup which we are doing in the above JavaScript code. You will also found few cool techniques of ModalPopupExtender in this link.

To run the sample first create a AjaxControlToolKit enable site website then create a folder DynamicControlLoading folder and copy the files in the following attachment.

Download: Complete Source

Asp.net Ajax UpdatePanel Simultaneous Update - A Remedy

Kazi Manzur Rashid — Wed, 08 Aug 2007 11:29:07 GMT

If you ever try to do more than one simultaneous partial update with Asp.net Ajax Update Panel, I guess you already found that Asp.net Ajax Framework cancel the current update request and starts the new one. You think I am kidding? Okay lets try the following code:

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDate1.Text = lblDate2.Text = DateTime.Now.ToString();
        }
    }

    protected void btnDate1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000 * 5); // Sleeps 5 second
        lblDate1.Text = DateTime.Now.ToString();
    }

    protected void btnDate2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000 * 5); // Sleeps 5 second
        lblDate2.Text = DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Update Panel</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdatePanel ID="updDate1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                Update Panel 1: <asp:Label ID="lblDate1" runat="server"></asp:Label>
                <asp:Button ID="btnDate1" runat="server" Text="Update Time" OnClick="btnDate1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <div>
            <asp:UpdatePanel ID="updDate2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                <ContentTemplate>
                    Update Panel 2: <asp:Label ID="lblDate2" runat="server"></asp:Label>
                    <asp:Button ID="btnDate2" runat="server" Text="Update Time" OnClick="btnDate2_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

The example is quite simple, I have two update panel which UpdateMode is set to Conditional, upon clicking the buttons inside the update panel I am doing a fake delay of 5 seconds then printing the current time of the server in the labels. Okay now run the code and click the first button and then click the second button in 5 seconds so that you can do simultaneous update. What happens, the first label never gets updated? Yes this is the nature of update panel, it cancels the current call and start executing the new one. You can get a more clear picture if you run it in FireFox with FireBug, Open FireFox Click Tools->FireBug->Open FireBug, then move to the Console tab in the firebug and repeat the button clicks, you will find only the last request spinning animation gets completed.

I can understand the Update Panel does a monsters job for us, executing the full life cycle of the page in the server, generating the updated part of the page, downloading new scripts, updating viewstates etc and that is why it needs to work serially. But how come it discards it current update request once it found a new request? is not it better if it queues the new request and execute it once the current request completes?

Now Consider the following page:

<%@ Page Language="C#"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            lblDate1.Text = lblDate2.Text = DateTime.Now.ToString();
        }
    }

    protected void btnDate1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000 * 5); // Sleeps 5 second
        lblDate1.Text = DateTime.Now.ToString();
    }

    protected void btnDate2_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(1000 * 5); // Sleeps 5 second
        lblDate2.Text = DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Update Panel Enhanced</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/Test/PageRequestManagerEx.js" />
            </Scripts>
        </asp:ScriptManager>
        <script type="text/javascript">
            PageRequestManagerEx.init();
        </script>
        <asp:UpdatePanel ID="updDate1" runat="server" UpdateMode="Conditional">
            <ContentTemplate>
                Update Panel 1: <asp:Label ID="lblDate1" runat="server"></asp:Label>
                <asp:Button ID="btnDate1" runat="server" Text="Update Time" OnClick="btnDate1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
        <div>
            <asp:UpdatePanel ID="updDate2" runat="server" UpdateMode="Conditional" RenderMode="Inline">
                <ContentTemplate>
                    Update Panel 2: <asp:Label ID="lblDate2" runat="server"></asp:Label>
                    <asp:Button ID="btnDate2" runat="server" Text="Update Time" OnClick="btnDate2_Click" />
                </ContentTemplate>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

The only difference you will find from the previous one that I have added a new JavaScript file PageRequestManagerEx.js and called a method PageRequestManagerEx.init(). Now run this page and repeat the button clicks, you will find the complete source in the bottom of this post. If you run it in FireFox with FireBug, you will find that no matter how many clicks you made in those buttons there is only one concurrent call and once the current call completes it executes another call. Yes as you have guessed the new JavaScript file which I just added does the trick. Now let us see what is in the JavaScript file.

var PageRequestManagerEx =
{
    _initialized : false,

    init : function()
    {
        if (!PageRequestManagerEx._initialized)
        {
            var _callQueue = new Array();
            var _executingElement = null;
            var prm = Sys.WebForms.PageRequestManager.getInstance();

            _prm.add_initializeRequest(initializeRequest);
            _prm.add_endRequest(endRequest);

            PageRequestManagerEx._initialized = true;
        }

        function initializeRequest(sender, args)
        {
            if (_prm.get_isInAsyncPostBack())
            {
                //if we are here that means there already a call pending.

                //Get the element which cause the postback
                var postBackElement = args.get_postBackElement();

                //We need to check this otherwise it will abort the request which we made from the
                //end request
                if (_executingElement != postBackElement)
                {
                    //Does not match which means it is another control
                    //which request the update, so cancel it temporary and 
                    //add it in the call queue
                    args.set_cancel(true);
                    Array.enqueue(_callQueue, postBackElement);
                }

                //Reset it as we are done with our matching
                _executingElement = null;
            }
        }

        function endRequest(sender, args)
        {
            //Check if we have a pending call
            if (_callQueue.length > 0)
            {
                //Get the first item from the call queue and setting it
                //as current executing item
                _executingElement = Array.dequeue(_callQueue);

                //Now Post the from which will also fire the initializeRequest
                _prm._doPostBack(_executingElement.id, '');
            }
        }
    }
}

if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}

The PageRequestManagerEx is a Static class which hooks the initializeRequest and endRequest events of the original PageRequestManager. Then in the initializeRequest it first checks if there is an ongoing update, if so it cancel the new request and adds the control in a queue which cause the postback. Then in the endRequest it check if there is any pending call in the queue, if so it executes it. This loops gets executed until all the call in the queue get completed.

Lets me know if you found any issue. I will be also very curious to know why update panel does not behave like this?

Download : Complete Source

Create An Ajax Style File Upload

Kazi Manzur Rashid — Wed, 01 Aug 2007 08:36:58 GMT

If you visit Asp.net Ajax Forum, you will find hundreds of request on File Upload Control that it does not give Ajax version of the page when it is placed in an UpdatePanel. Certainly, it is not possible, as the XMLHTTPRequest object that is used internally to post the form does not support file upload. In this post I will show you how to create Ajax like version of the file upload. The trick is very simple, I will use an Iframe to upload the file so the whole page does not get refreshed and when the post is in progress it will show a dummy progress. The following shows you the screenshots of the solutions:

Now lets discuss the implementation part, starting with the Main page markup.

<fieldset>
    <legend>Photo Upload Demo</legend>
    <div id="divFrame">
        <iframe id="ifrPhoto" onload="initPhotoUpload()" scrolling="no" frameborder="0" hidefocus="true" 
style="text-align:center;vertical-align:middle;border-style:none;margin:0px;width:100%;height:55px" src="PhotoUpload.aspx"></iframe>
    </div>
    <div id="divUploadMessage" style="padding-top:4px;display:none"></div>
    <div id="divUploadProgress" style="padding-top:4px;display:none">
        <span style="font-size:smaller">Uploading photo...</span>
        <div>
            <table border="0" cellpadding="0" cellspacing="2" style="width:100%">
                <tbody>
                    <tr>
                        <td id="tdProgress1">&nbsp; &nbsp;</td>
                        <td id="tdProgress2">&nbsp; &nbsp;</td>
                        <td id="tdProgress3">&nbsp; &nbsp;</td>
                        <td id="tdProgress4">&nbsp; &nbsp;</td>
                        <td id="tdProgress5">&nbsp; &nbsp;</td>
                        <td id="tdProgress6">&nbsp; &nbsp;</td>
                        <td id="tdProgress7">&nbsp; &nbsp;</td>
                        <td id="tdProgress8">&nbsp; &nbsp;</td>
                        <td id="tdProgress9">&nbsp; &nbsp;</td>
                        <td id="tdProgress10">&nbsp; &nbsp;</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</fieldset>

As you see that we are using few divs to show and hide the upload form and the progress bar. The important thing is we are binding the initPhotoUpload in the frame load event. Now let us check the iframe source page markup.

<form id="photoUpload" enctype="multipart/form-data" runat="server">
    <div>
        <input id="filPhoto" type="file" runat="server"/>
    </div>
    <div id="divUpload" style="padding-top:4px">
        <input id="btnUpload" type="button" value="Upload Photo" />
    </div>
</form>

The iframe source page contains only a file upload control and a button to post the form. Now lets get back to the main page initPhotoUpload function and lets check how it is implemented:

function initPhotoUpload()
{
    _divFrame = document.getElementById('divFrame');
    _divUploadMessage = document.getElementById('divUploadMessage');
    _divUploadProgress = document.getElementById('divUploadProgress');
    _ifrPhoto = document.getElementById('ifrPhoto');

    var btnUpload = _ifrPhoto.contentWindow.document.getElementById('btnUpload');

    btnUpload.onclick = function(event)
    {
        var filPhoto = _ifrPhoto.contentWindow.document.getElementById('filPhoto');

        //Baisic validation for Photo
        _divUploadMessage.style.display = 'none';

        if (filPhoto.value.length == 0)
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Please specify the file.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        var regExp = /^(([a-zA-Z]:)|(\\{2}\w+)\$?)(\\(\w[\w].*))(.jpg|.JPG|.gif|.GIF|.png|.PNG|.bmp|.BMP)$/;

        if (!regExp.test(filPhoto.value)) //Somehow the expression does not work in Opera
        {
            _divUploadMessage.innerHTML = '<span style=\"color:#ff0000\">Invalid file type. Only supports jpg, gif, png and bmp.</span>';
            _divUploadMessage.style.display = '';
            filPhoto.focus();
            return;
        }

        beginPhotoUploadProgress();
        _ifrPhoto.contentWindow.document.getElementById('photoUpload').submit();
        _divFrame.style.display = 'none';
    }
}

Once the iframe is loaded we are setting few module level variables (All module level variables are prefixed with _ (underscore) character in this example) to DOM elements, we are also getting the reference of the Upload button which is in the iframe and creating its click handler. In the click handler first we are doing few basic validation such as the file upload control is not empty or the file that is specified has a valid image file extension. Once the validation qualifies then we are calling the beginPhotoUploadProgress function (discussed next) and submitting the iframe form. The beginPhotoUploadProgress function is the first of three functions which are used to show the dummy progress bar. Let us see how these functions are written:

function beginPhotoUploadProgress()
{
    _divUploadProgress.style.display = '';
    clearPhotoUploadProgress();
    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

function clearPhotoUploadProgress()
{
    for (var i = 1; i <= _maxLoop; i++)
    {
        document.getElementById('tdProgress' + i).style.backgroundColor = 'transparent';
    }

    document.getElementById('tdProgress1').style.backgroundColor = PROGRESS_COLOR;
    _loopCounter = 1;
}

function updatePhotoUploadProgress()
{
    _loopCounter += 1;

    if (_loopCounter <= _maxLoop)
    {
        document.getElementById('tdProgress' + _loopCounter).style.backgroundColor = PROGRESS_COLOR;
    }
    else 
    {
        clearPhotoUploadProgress();
    }

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _photoUploadProgressTimer = setTimeout(updatePhotoUploadProgress, PROGRESS_INTERVAL);
}

As we can see we are basically using the timer (window.setTimeout) to show the dummy progress in these functions. Now lets see what happens in the server side when the iframe page posts.

private const string SCRIPT_TEMPLATE = "<" + "script " + "type=\"text/javascript\">window.parent.photoUploadComplete('{0}', {1});" + "<" + "/script" + ">";

private void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        //Sleeping for 10 seconds, fake delay, You should not it try at home.
        System.Threading.Thread.Sleep(10 * 1000);
        UploadPhoto();
    }
}

private void UploadPhoto()
{
    string script = string.Empty;

    if ((filPhoto.PostedFile != null) && (filPhoto.PostedFile.ContentLength > 0))
    {
        if (!IsValidImageFile(filPhoto))
        {
            script = string.Format(SCRIPT_TEMPLATE, "The uploaded file is not a valid image file.", "true");
        }
    }
    else
    {
        script = string.Format(SCRIPT_TEMPLATE, "Please specify a valid file.", "true");
    }

    if (string.IsNullOrEmpty(script))
    {
        //Uploaded file is valid, now we can do whatever we like to do, copying it file system,
        //saving it in db etc.

        //Your Logic goes here

        script = string.Format(SCRIPT_TEMPLATE, "Photo uploaded.", "false");
    }

    //Now inject the script which will fire when the page is refreshed.
    ClientScript.RegisterStartupScript(this.GetType(), "uploadNotify", script);
}

private static bool IsValidImageFile(HtmlInputFile file)
{
    try
    {
        using (Bitmap bmp = new Bitmap(file.PostedFile.InputStream))
        {
            return true;
        }
    }
    catch (ArgumentException)
    {
        //throws exception if not valid image
    }

    return false;
}

In the server side we are first doing some basic validation such as the file upload control has file and the file is a valid image file. Once the validation is done we are injecting some javascript which will be executed when the page is loaded in the browser. The javascript calls the main page photoUploadComplete function which shows the success/failure or the validation message of the upload. Lets see the javascript function photoUploadComplete of the main page.

function photoUploadComplete(message, isError)
{
    clearPhotoUploadProgress();

    if (_photoUploadProgressTimer)
    {
        clearTimeout(_photoUploadProgressTimer);
    }

    _divUploadProgress.style.display = 'none';
    _divUploadMessage.style.display = 'none';
    _divFrame.style.display = '';

    if (message.length)
    {
        var color = (isError) ? '#ff0000' : '#008000';

        _divUploadMessage.innerHTML = '<span style=\"color:' + color + '\;font-weight:bold">' + message + '</span>';
        _divUploadMessage.style.display = '';

        if (isError)
        {
            _ifrPhoto.contentWindow.document.getElementById('filPhoto').focus();
        }
    }
}

The function simply hides the progress bar and shows the upload control then it shows the message in colored text which is sent from the server.

I hope you can easily implment it in Ajax UpdatePanel, if not please let me know, I will show it in next post.

Download : Complete Solution

Implement Yahoo's YSlow in your Asp.net pages

Kazi Manzur Rashid — Sun, 29 Jul 2007 10:14:46 GMT

I have got quite a bit of comments and feedbacks on my previous post where I shown how to combine multiple JS and CSS Files into one. So I decided to enhance it a bit more. Now it Supports:

GZip or Deflate Compression based upon the browser header. Can be turned on/off from web.config
Minifier for both JS and CSS files. Although it is recommended to keep separate version of these files for both development and production instead of minifying it runtime. There are plenty of online and offline tool available to do it. This can be also turned on/off from web.config.
New Setting in the web.config for Cache Duration instead of hardcoding it in the code.

If you have checked the recent YSlow of Yahoo which works on top of Firebug, you already know that the above items are highly recommended for creating High Performance web applications.

Download: Enhanced Version

Combine Multiple JavaScript and CSS Files and Remove Overheads

Kazi Manzur Rashid — Wed, 25 Jul 2007 20:57:46 GMT

When developing a large web application especially if it is Ajax enabled, we often ended up with a larger number of JavaScript and Cascading Stylesheet files and it is quite common that more than one JavaScript file is involved for a single functionality. For example, if you are using DataTable widget of Yahoo User Interface you have to add yahoo-dom-event.js, connection-min.js, dragdrop-min.js, json.js, datasource-beta-min.js, datatable-beta-min.js (as per the example). When a browser encounters an external resource file such as Image, CSS, JS it opens a separate connection to download the file which actually add extra overhead both to server and the browser. To minimize it we can manually combine multiple JS and CSS file into a single large file, but this makes development life harder. Instead we can programmatically combine these files which we will see in the next section.

To combine these resource file we can utilize the Generic Handler (.ashx) file which comes with the Asp.net, we can also put some directive in the web.config file to conditionally combines the resource files depending upon the settings. First, lets see the web.config file.

<appSettings>
  <add key="UseFileSet" value="true"/>
  <add key="VersionNo" value="1.0"/>
  <add key="FileSet_CSS_Style1" value="Css/StyleSheet1.css,Css/StyleSheet2.css,Css/StyleSheet3.css,Css/StyleSheet4.css" />
  <add key="FileSet_JS_Functionality1" value="Scripts/JScript1.js,Scripts/JScript2.js,Scripts/JScript3.js,Scripts/JScript4.js" />
</appSettings>

As you can see there three kind of settings, first whether we will use the file set which is specified in the consequent settings, second the version number which we will discuss later and third different file sets. Each fileset contains the fileset name as the key and files location in comma separated value. Now lets see how do we embed this resource files in an aspx page:

<% if (ResourceHandler.UseFileSet)
   {
%>
    <link type="text/css" href="ResourceHandler.ashx?v=<%= ResourceHandler.VersionNo %>&fileSet=FileSet_CSS_Style1&type=text/css" rel="Stylesheet"/>
    <script type="text/javascript" src="ResourceHandler.ashx?v=<%= ResourceHandler.VersionNo %>&fileSet=JS_Functionality1&type=application/x-javascript"></script>
<%
   }
   else
   {
%>
    <link href="Css/StyleSheet1.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet2.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet3.css" rel="stylesheet" type="text/css" />
    <link href="Css/StyleSheet4.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="Scripts/JScript1.js"></script>
    <script type="text/javascript" src="Scripts/JScript2.js"></script>
    <script type="text/javascript" src="Scripts/JScript3.js"></script>
    <script type="text/javascript" src="Scripts/JScript4.js"></script>
<%
   }
%>

As you can see we are using Asp.net syntax to conditionally add these resource file depending upon the settings. When we are in development mode we can turn it off from the web.config file. But the problem with using generic resource handler is the files never gets cached in the browser. So our generic handler must also inject proper caching headers along with combining files. Now lets see how the generic handler is implemented:

<%@ WebHandler Language="C#" Class="ResourceHandler" %>
using System;
using System.IO;
using System.Web;
using System.Configuration;

public class ResourceHandler : IHttpHandler
{
    public static bool UseFileSet
    {
        get
        {
            return Convert.ToBoolean(ConfigurationManager.AppSettings["UseFileSet"]);
        }
    }

    public static string VersionNo
    {
        get
        {
            return ConfigurationManager.AppSettings["VersionNo"];
        }
    }

    public bool IsReusable
    {
        get
        {
            return true;
        }
    }

    public void ProcessRequest (HttpContext context)
    {
        string fileSet = context.Request.QueryString["fileSet"];

        //Basic Validation
        if (string.IsNullOrEmpty(fileSet))
        {
            return;
        }

        string contetType = context.Request.QueryString["type"];

        if (string.IsNullOrEmpty(contetType))
        {
            return;
        }

        string files = ConfigurationManager.AppSettings["FileSet_" + fileSet];

        if (string.IsNullOrEmpty(files))
        {
            return;
        }

        //Get the list of files specified in the FileSet
        string[] fileNames = files.Split(',');

        if ((fileNames != null) && (fileNames.Length > 0))
        {
            //Write each files in the response
            for (int i = 0; i < fileNames.Length; i++)
            {
                context.Response.Write(File.ReadAllText(context.Server.MapPath(fileNames[i])));
            }

            //Set the content type
            context.Response.ContentType = contetType;

            // Cache the resource for 7 Days
            CacheUtility.Cache(TimeSpan.FromDays(7));
        }
    }
}

As we can see the Handler contains some static property which we used when embedding in the aspx files. The file merging is done in the ProcessRequest method. In this method we are reading the physical files which is specified in the web.config fileset and writing it in the Asp.net Response object and at the end we are using a helper class CacheUtility to cache the response. Now let see how the this class is implemented:

using System;
using System.Web;
using System.Reflection;

public static class CacheUtility
{
    public static void Cache(TimeSpan duration)
    {
        HttpCachePolicy cache = HttpContext.Current.Response.Cache;

        FieldInfo maxAgeField = cache.GetType().GetField("_maxAge", BindingFlags.Instance | BindingFlags.NonPublic);
        maxAgeField.SetValue(cache, duration);

        cache.SetCacheability(HttpCacheability.Public);
        cache.SetExpires(DateTime.Now.Add(duration));
        cache.SetMaxAge(duration);
        cache.AppendCacheExtension("must-revalidate, proxy-revalidate");
    }
}

As you can see we are not only using the regular caching methods of Asp.net, we are also using some reflection code to set the proper cache-control header. You can find the reason why the reflection is used from these two links Client-side caching for script methods access in ASP.NET AJAX and ASP.NET AJAX under the hood secrets. If you want to know more about the cache-control header then read Caching Details. If any of the files get modified then update the version number in web.config, it will ensure that the latest files get downloaded due to the query string.

Download: Complete Solution

Cancel a Web Service Call in Asp.net Ajax

Kazi Manzur Rashid — Sat, 14 Jul 2007 10:30:34 GMT

In this post I will show you how to cancel a web Service call after it is invoked, I will also provide you some interesting findings (Maybe a Bug) in Asp.net Ajax Network Layer. There are plenty of examples available on how to abort an UpdatePanel AsyncPostback but none for the WebService. The following will show you how to do it.

Since we are going to cancel a call we need a web method which wait for a long time to complete:

The Web Method:

[WebMethod()]
public string LongOperation(int miliseconds)
{
    System.Threading.Thread.Sleep(miliseconds);
    return "Task Complete";
}

Now lets check the client part. If you are already familiar with Web Service calling in JavaScript, I hope you know that there is always a JavaScript Proxy class involved for that Web Service. This Proxy class is inherited from the Sys.Net.WebServiceProxy which contains a single method invoke. If you check the Ajax Documentation you will find that this invoke method returns a WebRequest object which is used to call Web Service method, it is also mentioned that this WebRequest object can be also used to cancel the call. Now lets see what is the generated Proxy class looks like. You can easily generate the proxy class by appending /js in the Web Service URL.

var TestService=function() {
TestService.initializeBase(this);
this._timeout = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
TestService.prototype={
LongOperation:function(miliseconds,succeededCallback, failedCallback, userContext) {
return this._invoke(TestService.get_path(), 'LongOperation',false,{miliseconds:miliseconds},succeededCallback,failedCallback,userContext); }}
TestService.registerClass('TestService',Sys.Net.WebServiceProxy);
TestService._staticInstance = new TestService();
TestService.set_path = function(value) { TestService._staticInstance.set_path(value); }
TestService.get_path = function() { return TestService._staticInstance.get_path(); }
TestService.set_timeout = function(value) { TestService._staticInstance.set_timeout(value); }
TestService.get_timeout = function() { return TestService._staticInstance.get_timeout(); }
TestService.set_defaultUserContext = function(value) { TestService._staticInstance.set_defaultUserContext(value); }
TestService.get_defaultUserContext = function() { return TestService._staticInstance.get_defaultUserContext(); }
TestService.set_defaultSucceededCallback = function(value) { TestService._staticInstance.set_defaultSucceededCallback(value); }
TestService.get_defaultSucceededCallback = function() { return TestService._staticInstance.get_defaultSucceededCallback(); }
TestService.set_defaultFailedCallback = function(value) { TestService._staticInstance.set_defaultFailedCallback(value); }
TestService.get_defaultFailedCallback = function() { return TestService._staticInstance.get_defaultFailedCallback(); }
TestService.set_path("TestService.asmx");
TestService.LongOperation= function(miliseconds,onSuccess,onFailed,userContext) {TestService._staticInstance.LongOperation(miliseconds,onSuccess,onFailed,userContext); }

As you can see the LongOperation in protoype section is using the base class(Sys.Net.WebServiceProxy) invoke method to call the Web method which in turn returns WebRequest. The Proxy also has a self instance as a _staticInstance. But in later it overrides the method and uses the _staticInstance to call the WebMethod but it does not return the WebRequest(This is the bug) in this case. So if I write the code as we always did for calling a web method it does not return the WebReqest object.

var _request = TestService.LongOperation    (       10000, //10 seconds
                                                    function(result)
                                                    {
                                                        //
                                                    },
                                                    function(exception)
                                                    {
                                                        //
                                                    }
                                            );

But if I call like the following the WebRequest is returned:

var _request = TestService._staticInstance.LongOperation  (     10000, //10 seconds
                                                            function(result)
                                                            {
                                                                //
                                                            },
                                                            function(exception)
                                                            {
                                                                //
                                                            }
                                                        );

Really interesting!!! I have already posted a bug in Asp.net Ajax Forum you can check the progress from this link.

Now lets check how to cancel the call as we have already got the reference of the WebRequest object. To Cancel we can use the following code:

if (_request != null)
{
    var executor = _request.get_executor();

    if (executor.get_started())
    {
        executor.abort();
    }
}

Explanation: Every WebRequest in Ajax Framework has an associated Executor which actually uses the browser XMLHttpRequest to call the server side method (An URL). In the above, first we are getting a reference of that executor then checking if the call is in progress (To be in the safe side), if so then we are invoking abort method of that executor which in turns call the abort method of the XMLHttpRequest.

Another annoying problem I found after doing the abort the Ajax Framework throws an exception and for this reason the OnFailure Callback of the Web method call is executed. So we also need to differentiate between a real exception and an User Defined Abort (May be a button click of the user). For this we have to put some extra check in the failure callback like the following:

var _request = TestService._staticInstance.LongOperation  (     10000, //10 seconds
                                                                function(result)
                                                                {
                                                                    alert(result);
                                                                    $get('btnInvoke').disabled = false;
                                                                    $get('btnAbort').disabled = true;
                                                                },
                                                                function(exception)
                                                                {
                                                                    if (!_request.get_executor().get_aborted())
                                                                    {
                                                                        alert(exception.get_message());
                                                                    }
                                                                    $get('btnInvoke').disabled = false;
                                                                    $get('btnAbort').disabled = true;
                                                                }
                                                            );

In the Failure Callback we are again checking if the WebRequest Executor has been aborted, if so then it is not an exception rather the user choose to cancel the call.

Download: Complete working sample.

SJAX Call

Kazi Manzur Rashid — Wed, 04 Jul 2007 23:57:09 GMT

While visiting Asp.net forum, I found an interesting request, A forum member is trying to implement some validator controls where the member wants to call a Web Service method, since the nature of Asp.net Ajax is asynchronous the call does not return instantly. In the reply, another member from Microsoft provides some code which uses XMLHttpRequest to make a Synchronous call to web service. Certainly it does the Job but there is no flavor of Asp.net Ajax Framework. I am not sure the MS guy really knows that the Asp.net Ajax Framework supports Custom Web Request executor, by default Asp.net Ajax uses Sys.Net.XMLHttpExecutor for server side method calling. So I decide to create a small class which can be used with the Asp.net Ajax Framework to call a Server Side method synchronously. The Following shows the code how to call a server side method synchronously:

function GetWebRequest()
{
    var resultElement = $get('ResultId');

    resultElement.innerHTML = '';

    // Instantiate a WebRequest.
    var wRequest = new Sys.Net.WebRequest();
    // Set the request URL.
    wRequest.set_url('getTarget.aspx');
    // Set the request verb.
    wRequest.set_httpVerb('GET');

    var executor = new Sys.Net.XMLHttpSyncExecutor(); // This is the Custom Executor
    wRequest.set_executor(executor);
    // Execute the request.
    wRequest.invoke();

    if (executor.get_responseAvailable()) 
    {
        // Clear the previous results. 
        resultElement.innerHTML = '';
        // Display Web request status. 
        resultElement.innerHTML += 'Status: [' + executor.get_statusCode() + ' ' + executor.get_statusText() + ']' + '<br/>';
        // Display Web request headers.
        resultElement.innerHTML +=  'Headers: ';
        resultElement.innerHTML += executor.getAllResponseHeaders() + '<br/>';
        // Display Web request body.
        resultElement.innerHTML +=  'Body:';

        if(document.all)
        {
            resultElement.innerText += executor.get_responseData();
        }
        else
        {
            resultElement.textContent += executor.get_responseData();
        }
    }
}

As you can see here is no onComplete handler since this is a synchronous call, I have just ported this example which is found with Asp.net Ajax Documentation with the Custom executor. The following shows the code of this custom executor.

Type.registerNamespace('Sys.Net');

Sys.Net.XMLHttpSyncExecutor = function()
{
    Sys.Net.XMLHttpSyncExecutor.initializeBase(this);

    this._started = false;
    this._responseAvailable = false;

    this._onReceiveHandler = null;

    this._responseData = null;
    this._statusCode = null;
    this._statusText = null;
    this._headers = null;
}

Sys.Net.XMLHttpSyncExecutor.prototype =
{
    get_aborted : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        return false;
    },

    get_responseAvailable : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        return this._responseAvailable;
    },

    get_responseData : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (!this._responseAvailable)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_responseData'));
        }

        return this._responseData;
    },

    get_started : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        return this._started;
    },

    get_statusCode : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (!this._responseAvailable)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_statusCode'));
        }

        return this._statusCode;
    },

    get_statusText : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (!this._responseAvailable)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_statusText'));
        }

        return this._statusText;
    },

    get_xml : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (!this._responseAvailable)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'get_xml'));
        }

        var xml = this._responseData;

        if ((!xml) || (!xml.documentElement))
        {
            xml = new XMLDOM(this._responseData);

            if ((!xml) || (!xml.documentElement))
            {
                return null;
            }
        }
        else if (navigator.userAgent.indexOf('MSIE') !== -1)
        {
            xml.setProperty('SelectionLanguage', 'XPath');
        }

        if ((xml.documentElement.namespaceURI === "http://www.mozilla.org/newlayout/xml/parsererror.xml") &&
            (xml.documentElement.tagName === "parsererror"))
        {
            return null;
        }

        if (xml.documentElement.firstChild && xml.documentElement.firstChild.tagName === "parsererror")
        {
            return null;
        }

        return xml;
    },

    executeRequest : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (this._started)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallOnceStarted, 'executeRequest'));
        }

        var webRequest = this.get_webRequest();

        if (webRequest === null)
        {
            throw Error.invalidOperation(Sys.Res.nullWebRequest);
        }

        var body = webRequest.get_body();
        var headers = webRequest.get_headers();
        var verb = webRequest.get_httpVerb();

        var xmlHttpRequest = new XMLHttpRequest();
        this._onReceiveHandler = Function.createCallback(this._onReadyStateChange, {sender:this, xmlHttp:xmlHttpRequest});
        this._started = true;
        xmlHttpRequest.onreadystatechange = this._onReceiveHandler;
        xmlHttpRequest.open(verb, webRequest.getResolvedUrl(), false); // False to call Synchronously

        if (headers)
        {
            for (var header in headers)
            {
                var val = headers[header];

                if (typeof(val) !== "function")
                {
                    xmlHttpRequest.setRequestHeader(header, val);
                }
            }
        }

        if (verb.toLowerCase() === "post")
        {
            if ((headers === null) || !headers['Content-Type'])
            {
                xmlHttpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            }

            if (!body)
            {
                body = '';
            }
        }

        xmlHttpRequest.send(body);
    },

    getAllResponseHeaders : function()
    {
        if (arguments.length !== 0) throw Error.parameterCount();

        if (!this._responseAvailable)
        {
            throw Error.invalidOperation(String.format(Sys.Res.cannotCallBeforeResponse, 'getAllResponseHeaders'));
        }

        return this._headers;
    },

    _onReadyStateChange : function(e)
    {
        if (e.xmlHttp.readyState === 4)
        {
            e.sender._responseAvailable = true;
            e.sender._responseData = e.xmlHttp.responseText;
            e.sender._statusCode = e.xmlHttp.status;
            e.sender._statusText = e.xmlHttp.statusText;
            e.sender._headers = e.xmlHttp.getAllResponseHeaders();

            e.xmlHttp.onreadystatechange = Function.emptyMethod;
            e.sender._onReceiveHandler = null;

            e.sender._started = false;
        }
    }
}

Sys.Net.XMLHttpSyncExecutor.registerClass('Sys.Net.XMLHttpSyncExecutor', Sys.Net.WebRequestExecutor);

if (typeof(Sys) != 'undefined')
{
    Sys.Application.notifyScriptLoaded();
}

You can also download the full code listing from this link . Since the nature of the Call is Synchronous we can call it Synchronous JavaScript and XML or SJAX.

Check User Name in Ajax way

Kazi Manzur Rashid — Sun, 01 Jul 2007 01:32:58 GMT

While visiting the Asp.net Ajax forum I found quite a few post on the User Name Checking when creating an User. This is very common request and it is available in many Websites, So I decided to create a small sample. The following shows the full code listing:

<%@ Page Language="C#"%>
<%@ Import Namespace="System.Web.Services" %>
<%@ Import Namespace="System.Web.Security" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    [WebMethod()]
    public static bool CheckUserName(string userName)
    {
        return (Membership.GetUser(userName) != null);
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Create User</title>
    <script type="text/javascript">

    var _txtUserName;
    var _divStatus;
    var _timerHandle;

    function pageLoad()
    {
        _txtUserName = $get('<%= CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("UserName").ClientID %>');
        _divStatus = $get('<%= CreateUserWizard1.CreateUserStep.ContentTemplateContainer.FindControl("divStatus").ClientID %>');
        $addHandler(_txtUserName, "keyup", onKeyUp);
    }

    function pageUnload()
    {
        $removeHandler(_txtUserName, "keyup", onKeyUp);
        clearTimer();
    }

    function onKeyUp(e)
    {
        setupTimer();
    }

    function setupTimer()
    {
        clearTimer();
        _timerHandle = window.setTimeout(checkUserName, 500)
    }

    function clearTimer()
    {
        if (_timerHandle != null)
        {
            window.clearTimeout(_timerHandle);
            _timerHandle = null;
        }
    }

    function checkUserName()
    {
        if (_txtUserName.value.length > 2)
        {
            _divStatus.innerHTML = 'Checking...';
            _divStatus.style.color = 'black';
            PageMethods.CheckUserName(_txtUserName.value, OnCheckUserNameComplete, OnCheckUserNameError, _txtUserName.value);
        }
    }
    
    function OnCheckUserNameComplete(result, userContext)
    {
        if (result == true)
        {
            _divStatus.innerHTML = String.format('\'{0}\' is already taken', userContext);
            _divStatus.style.color = 'red';
        }
        else
        {
            _divStatus.innerHTML = String.format('\'{0}\' is available', userContext);
            _divStatus.style.color = 'green';
        }
    }

    function OnCheckUserNameError(e)
    {
        _divStatus.innerHTML = e.get_message();
        _divStatus.style.color = 'red';
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager  ID="theScriptManager" runat="server" EnablePageMethods="true">
            </asp:ScriptManager>
            <asp:CreateUserWizard ID="CreateUserWizard1" runat="server">
                <WizardSteps>
                    <asp:CreateUserWizardStep runat="server">
                        <ContentTemplate>
                            <table border="0">
                                <tr>
                                    <td align="center" colspan="2">Sign Up for Your New Account</td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="UserNameLabel" runat="server" AssociatedControlID="UserName">User Name:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="UserNameRequired" runat="server" ControlToValidate="UserName" ErrorMessage="User Name is required." ToolTip="User Name is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                        <div id="divStatus" runat="server"></div>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="PasswordLabel" runat="server" AssociatedControlID="Password">Password:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Password" runat="server" TextMode="Password"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password" ErrorMessage="Password is required." ToolTip="Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="ConfirmPasswordLabel" runat="server" AssociatedControlID="ConfirmPassword">Confirm Password:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="ConfirmPassword" runat="server" TextMode="Password"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="ConfirmPasswordRequired" runat="server" ControlToValidate="ConfirmPassword" ErrorMessage="Confirm Password is required." ToolTip="Confirm Password is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="EmailLabel" runat="server" AssociatedControlID="Email">E-mail:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Email" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="EmailRequired" runat="server" ControlToValidate="Email" ErrorMessage="E-mail is required." ToolTip="E-mail is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="QuestionLabel" runat="server" AssociatedControlID="Question">Security Question:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Question" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="QuestionRequired" runat="server" ControlToValidate="Question" ErrorMessage="Security question is required." ToolTip="Security question is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="right">
                                        <asp:Label ID="AnswerLabel" runat="server" AssociatedControlID="Answer">Security Answer:</asp:Label></td>
                                    <td>
                                        <asp:TextBox ID="Answer" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="AnswerRequired" runat="server" ControlToValidate="Answer" ErrorMessage="Security answer is required." ToolTip="Security answer is required." ValidationGroup="CreateUserWizard1">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2">
                                        <asp:CompareValidator ID="PasswordCompare" runat="server" ControlToCompare="Password" ControlToValidate="ConfirmPassword" Display="Dynamic" ErrorMessage="The Password and Confirmation Password must match." ValidationGroup="CreateUserWizard1"></asp:CompareValidator>
                                    </td>
                                </tr>
                                <tr>
                                    <td align="center" colspan="2" style="color: red">
                                        <asp:Literal ID="ErrorMessage" runat="server" EnableViewState="False"></asp:Literal>
                                    </td>
                                </tr>
                            </table>
                        </ContentTemplate>
                        <CustomNavigationTemplate>
                            <table border="0" cellspacing="5" style="width: 100%; height: 100%;">
                                <tr align="right">
                                    <td align="right" colspan="0">
                                        <asp:Button ID="StepNextButton" runat="server" CommandName="MoveNext" Text="Create User" ValidationGroup="CreateUserWizard1" />
                                    </td>
                                </tr>
                            </table>
                        </CustomNavigationTemplate>
                    </asp:CreateUserWizardStep>
                    <asp:CompleteWizardStep runat="server">
                    </asp:CompleteWizardStep>
                </WizardSteps>
            </asp:CreateUserWizard>
        </div>
    </form>
</body>
</html>

The steps are very simple:

Add a CreateUserWizard Control and then Convert the Steps to Custom Template.
Add a Div Tag right beside the User Name textbox.
Create a Static method which accepts UserName and checks the Membership Provider for the existence.
In the ClientSide hook the keydown event of the User name text box.
Create a Timer so that we do not have to invoke the Server Side method upon each key press.
Call the Server side method to check the whether the user name is available.

For the clarity i have created a single page example instead of creating Code behind file and Web service.

You can download it from this link: CreateUser.aspx