AJAX UpdatePanel and UpdateProgress to show please wait

     While refreshing the AJAX skill today I wrote a simple code to display please wait message while asynchronous postback. I added one Update Panel, one Update Progress panel and a button control and registered button  as Asynchronous Postback Trigger control. I assign my UpdatePanel’s id as AssociatedUpdatePanelID to UpdateProgress panel. I ran the code found that Progress panel is not displayed while async postback, strange !!!! Then I remember few basic points regarding Update Panel and Update Progress which is available on MSDN and found that If we set AssociatedUpdatePanelID to Update Progress panel then we must have to button as inside Update Panel if register button as Async Postback trigger then it will not work. Below is the points (that MSDN Suggests) needs to remember while using UpdateProgress,

The AssociatedUpdatePanelID property has the following effect on UpdateProgress control behavior,

When the AssociatedUpdatePanelID property is not set, the UpdateProgress control is displayed for the following postbacks:

• Postbacks that originate from inside any UpdatePanel control.
• Postbacks that originate from controls that are asynchronous triggers for any UpdatePanel control.

When the AssociatedUpdatePanelID property is set to an UpdatePanel control ID, the UpdateProgress control is displayed for postbacks that originate from inside the associated UpdatePanel control.

If the AssociatedUpdatePanelID property is set to a control that does not exist, the UpdateProgress control will never be shown.

You must provide client script to display an UpdateProgress control when a target UpdatePanel control is updated in the following circumstances

• When a postback from a control is registered as an asynchronous postback trigger for the panel, and there is an UpdateProgress control on the page. However, the AssociatedUpdatePanelID property is not set to the panel's ID.
• When postbacks from controls are registered as asynchronous postback controls by using the RegisterAsyncPostBackControl method of the ScriptManager control. 

Happy Programming!!!!

Context.RewritePath and Images

     I was reading articles on URL Rewriting in ASP.NET and I found the most common way suggested is to use Context.RewritePath either in global.asax file or in HttpHandler with Application_BeginRequest method. The most common found code is Context.RewritePath(NewURL). When you the application you find it works like a charm and yes it does so!!!!.

     However sometime Images and CSS are not displayed on page when we use Context.RewritePath. Let me be more specific if you have a hierarchy as shown below,

 

Fig - (1) Website structure

       Now if you have used images on Default2.aspx and also have css for controls. We have redirected user to Default2.aspx page using Context.RewritePath path when there is no specific file available physically. So here if we write the URL http://localhost:3030/Example1/Test.aspx then we are redirected to Default.aspx page and images will be displayed properly. However id you type URL http://localhost:3030/Example1/Products/Test.aspx then we are redirected to Default.aspx page however images will not be displayed.

       Even if you have assign ImageURL using “~/Images/Image1.jpg” you find that images will not be displayed. The image path will always taken as relative path with the URL mentioned in address bar. So in first case the virtual path of image becomes Example1/Images/Image1.jpg while in second case the virtual path of image becomes Example1/Products/Images/Image1.jpg. So in second case images and css will not displayed with Context.RewritePath.

      To solve this use second argument with Context.RewritePath so the function will be Context.RewritePath(NewURL,false) and everything will work fine. if second argument is true reset the virtual path else the virtual path will not be changed. As we want virtual path to be unchanged we have to pass false in second argument.

Pleas read this article for more detail.

Happy Programming !!!!

How to detect page is loaded

      Sometime we need to find when the page is loaded or page is completely loaded before specific java script function is called.  As we all know if try to access DOM element using document.getElementBtId() before page is loaded or page is completely loaded we get error. So to prevent the error we can user following java script to detect page is loaded?

   1: var body = document.getElementsByTagName('BODY')[0];

   2:  

   3: if (body && body.readyState == 'loaded') {

   4:     AfterLoad();

   5: } else {        

   6:     if (window.addEventListener) {

   7:         window.addEventListener('load', AfterLoad, false);

   8:     } else {

   9:     window.attachEvent('onload', AfterLoad);

  10:     }

  11: }

  12: function AfterLoad() {

  13:     alert("page loaded !!!");

  14: }

Fig (1) – Detect Page is loaded !!

Happy Programming !!!

How to set multiple default button in ASP.NET

        In my previous post I mentioned the one way to set default button in ASP.NET. There are few other methods also.  One of them is to use asp panel and set its DefaultButton property. When we need to set multiple default buttons on single page we can do it by using asp panels. Lets consider that you have login control and search control on same page.  User must be redirect to proper page while he press enter on search and login control. Lets look at following code,

<asp:Panel ID="pnlSearch" DefaultButton="btnSearch" runat="server">

    <table width="50%" cellpadding="0" cellspacing="0">

        <tr>

            <td>

                Search :

            </td>

            <td>

                <asp:TextBox ID="txtSerach" runat="server"></asp:TextBox>

            </td>

            <td colspan="2">

                <asp:Button  ID="btnSearch" runat="server" Text="Search" OnClick="btnSearch_Click" />

            </td>

        </tr>

    </table>

</asp:Panel>

Fig - (1) Default Button with asp panel in ASP.NET

        You can add multiple asp panel and set default button for each panel. I found this as the easiest way to set multiple default button in asp.net.

         Lets look at how default button works. First step is to observe the rendered HTML,

<div id="pnlSearch" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'btnSearch')">

    <table width="50%" cellpadding="0" cellspacing="0">

        <tr>

            <td>

                Search :

            </td>

            <td>

                <input name="txtSerach" type="text" id="txtSerach" />

            </td>

            <td colspan="2">

                <input type="submit" name="btnSearch" value="Search" id="btnSearch" />

            </td>

        </tr>

    </table>                        

</div>

Fig - (2) HTML code for Default Button with asp panel in ASP.NET

           ASP panel is rendered as DIV.  You may have observer that onkeypress event is added to DIV, onkeypress events calles WebForm_FireDefaultButton(event, 'btnSearch') function. ASP.NET automatically includes WebForm_FireDefaultButton function when default button property is set.   WebForm_FireDefaultButton takes button's ClientID as one of the argument and second argument is event. As Click is the default event of button, button click event will be fired on post back.

          Now take a look at WebForm_FireDefaultButton function,

function WebForm_FireDefaultButton(event, target) {

    if (event.keyCode == 13) {

        var src = event.srcElement || event.target;

        if (!src || (src.tagName.toLowerCase() != "textarea")) {

            var defaultButton;

            if (__nonMSDOMBrowser) {

               defaultButton = document.getElementById(target);

            }

            else {

                defaultButton = document.all[target];

            }

            if (defaultButton && typeof(defaultButton.click) != "undefined") {

                defaultButton.click();

                event.cancelBubble = true;

                if (event.stopPropagation) event.stopPropagation();

                return false;

            }

        }

    }

    return true;

}

Fig (3) - WebForm_FireDefaultButton function included with default button

        When user press the enter key while the focus is set to any control within DIV it calls WebForm_FireDefaultButton function.

Few interesting articles you may like to read,

http://scottonwriting.net/sowblog/posts/13698.aspx

http://weblogs.asp.net/rternier/archive/2007/10/17/updatepanel-firefox-and-the-defaultbutton.aspx

http://forums.asp.net/t/1409941.aspx 

Happy Programming !!!