FAQ in ASP.NET AJAX Discussion and Suggestions

Raymond Wen - MSFT — Wed, 26 Dec 2007 02:12:06 GMT

1. How to configure AJAX on production server? [top]

Here are some actions we need to perform on the production server to host an AJAX-enabled web site on it.

1. Install AJAX Extension on the server
2. The virtual directory is configured as an application in IIS
3. The ASP.NET version of the application is configured to 2.0
4. Add some entries in web.config to register necessary assemblies, HttpHandlers, etc.

The easiest way is to create a website using the ASP.NET AJAX-Enabled Web Site template. If you need to update an existing site, please edit the web.config file manually. This document (http://asp.net/AJAX/Documentation/Live/ConfiguringASPNETAJAX.aspx) and the two tutorial videos (How Do I: ASP.NET AJAX Enable an Existing Web Service?, How Do I: Add ASP.NET AJAX Features to an Existing Web Application? ) explain what is necessary and why.

2. How to handle error 500? [top]

An error with status code 500 indicates that there is a problem when the server tries to process the request. There can be variant causes. The problem is how to find out the real cause of the error.
Here are two ways to find it out:

1. Set a breakpoint in the code that is responsible for processing the request, then debug through it to find out the exception being thrown;
2. The real error message is usually returned in the response. We can use an HTTP Sniffer (e.g., Fiddler) to peek into the traffic between the client and server to find out the error message.

3. How to perform an action at a specific stage of partial PostBack? [top]

In Microsoft AJAX Library, there is a client side lifecycle model similar to the page lifecycle on server side. Developers can add different event handlers to perform specific actions at a specific state. For example, disable a button just before the page is going to be posted in beginRequest event handler, then enable it again in endRequest event handler.
This document (AJAX Client Life-Cycle Events) contains a full description of the order of those events, and how to use them.

Related threads:
http://forums.asp.net/t/1109705.aspx

4. Why do I get PageRequestManagerParserErrorException? [top]

This exception may occur when we are working with UpdatePanel. Upon a partial PostBack, the request is exactly the same as a normal PostBack’s. The difference is that the request is sent with the XmlHttpRequest. Another notable difference is that the response for the request is in a particular format.
Typically, the response only contains the content of the UpdatePanels to be updated, and it must follow a specified format so that it can be parsed by the client library to update the page.
If you try to output something additional with Response.Write, Server Trace, or modify the output with an HttpModule, the response won’t comply with the format any more. As a result, the client library is not able to parse it. So the exception occurs.
In order to get rid of this, we should not use the above features when there is an UpdatePanel on the page.

Related threads:
http://forums.asp.net/p/1140794/1844602.aspx

5. How to register event of a control in the UserControl as the trigger of an UpdatePanel? [top]

The best solution is to bubble up the event of the control as a custom event of the user control. Then register the custom event of the UserControl as the trigger of the UpdatePanel.

1. Define a custom delegate and event on the UserControl
2. Fire the custom event in the event to be bubbled up
3. Register the custom event of the UserControl as the trigger of the UpdatePanel just like a normal control

Here is a sample:

<%@ Control Language="C#" ClassName="TestUc" %>
<script runat="server">
    public delegate void ClickEventHandler(object sender, CommandEventArgs e);
    public event ClickEventHandler TestCustomEvent;
    protected void lb_Command(object sender, CommandEventArgs e)
    {   // bubble up the command event as TestCustomEvent
        if (TestCustomEvent != null) TestCustomEvent(this, e);
    }
</script>
<asp:LinkButton ID="LinkButton1" runat="server" CommandArgument="LinkButton1" OnCommand="lb_Command">LinkButton1</asp:LinkButton>
<asp:LinkButton ID="LinkButton2" runat="server" CommandArgument="LinkButton2" OnCommand="lb_Command">LinkButton2</asp:LinkButton>

<%@ Page Language="C#" %>
<%@ Register src="TestUc.ascx" TagName="TestUc" TagPrefix="uc1" %>
<!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 TestUc1_TestCustomEvent(object sender, CommandEventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Trigger UpdatePanel</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <uc1:TestUc id="TestUc1" runat="server" OnTestCustomEvent="TestUc1_TestCustomEvent">
            </uc1:TestUc>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="TestUc1" EventName="TestCustomEvent" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>

Related threads:
http://forums.asp.net/t/1138191.aspx
http://forums.asp.net/t/1123812.aspx
http://forums.asp.net/t/1141328.aspx
http://forums.asp.net/t/1175921.aspx

6. How to register event of a control in a UserControl as the trigger of the UpdatePanel in another UserControl? [top]

In order to do that, we can first define a custom property to expose the client ID of a hidden trigger control of the UpdatePanel on the UserControl (say "UserControlA"). On the other UserControl (say "UserControlB"), we will be able to fire the click event of the hidden trigger control.
Here are the specific steps:

1. Define a custom property to store the client ID of a hidden trigger control of the Update Panel(Button1clientID property of Gallery User Control):

<%@ Control Language="C#" ClassName="Gallery" %>
<script runat="server">
    protected void Button1_Click(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToString();
    }
    public string Button1clientID
    {
        get
        {
            return Button1.ClientID;
        }
    }
</script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <div style="visibility: hidden">
            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" UseSubmitBehavior="false" Text="Button" /></div>
    </ContentTemplate>
</asp:UpdatePanel>

2. Define a custom property in the other User Control(Button1clientID property of Upload User Control):

<%@ Control Language="C#" ClassName="Upload" %>
<script runat="server">
    private string buttonclientID = "";
    public string Button1clientID
    {
        set
        {
            buttonclientID = value;
        }
    }
</script>

3. Set Upload1.Button1clientID = Gallery1.Button1clientID in the page_Load:

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Upload1.Button1clientID = Gallery1.Button1clientID;
    }
</script>

4. Fire the click event of the hidden trigger control manually:

<script type="text/javascript">
     function submitForm()
     {
         document.getElementById("<%=buttonclientID %>").click();
     }
</script>

<button onclick="javascript:submitForm();">Upload</button>

Here is the full sample code:
http://forums.asp.net/p/1117746/1739422.aspx#1739422

Related threads:
http://forums.asp.net/t/1117746.aspx
http://forums.asp.net/t/1136932.aspx

7. How to add ScriptManager and UpdatePanel to MasterPage from ContentPage dynamically? [top]

The ScriptManager must be added before the initialization stage of a page that requires it. Otherwise, an InvalidOperationException will be thrown (it complains about the lack of ScriptManager on the page). It's better to add it in Page_PreInit which fires before initialization.
For example:

protected void Page_PreInit(object sender, EventArgs e)
{
        HtmlForm form1 = (HtmlForm)Master.FindControl("form1");
        ScriptManager sm = new ScriptManager();
        sm.ID = "ScriptManager1";
        form1.Controls.AddAt(0, sm);

        // add a UpdatePanel and moves an existing control into it
        UpdatePanel panel = new UpdatePanel();
        panel.ID = "upMaster";
        Control ctrl = ((Control)Master.FindControl("TextBox1"));
        panel.ContentTemplateContainer.Controls.Add(uc);
        form1.Controls.Add(panel);
}

Related threads:
http://forums.asp.net/t/1165939.aspx
http://forums.asp.net/t/1160425.aspx
http://forums.asp.net/t/1163971.aspx

8. Can HyperLink be the trigger of UpdatePanel? [top]

No. Please refer to this document: http://www.asp.net/AJAX/documentation/live/mref/P_System_Web_UI_UpdatePanelControlTrigger_ControlID.aspx. The trigger must implement the INamingContainer, IPostBackDataHandler, or IPostBackEventHandler interface. HyperLink doesn't implement any of them.
Also See:

1. INamingContainer
2. IPostBackDataHandler
3. IPostBackEventHandler

Related threads:
http://forums.asp.net/t/1138804.aspx
http://forums.asp.net/t/1099204.aspx
http://forums.asp.net/t/1170105.aspx

9. How to trigger partial PostBack from a different window? [top]

There are cases when we need to trigger partial PostBack from a different window. For example: trigger partial PostBack in parent window from IFrame, trigger partial PostBack in opener from a popup window.
We can add an invisible button (say Button1) on pageA, and set it to be the trigger of the UpdatePanel, and then we need to get a reference to this button from pageB and fire click on it to trigger a partial PostBack. It's achievable with the following javascript.
"window.parent.document.getElementById('Button1').click()"
"window.opener.document.getElementById('Button1').click()"
Here is the full sample code:
http://forums.asp.net/p/1162285/1927000.aspx#1927000

Related threads:
http://forums.asp.net/t/1162285.aspx
http://forums.asp.net/t/1117770.aspx
http://forums.asp.net/t/1169365.aspx

10. How to manipulate AJAX Timer control on client side? [top]

To manage the Timer control on client side, we need to get a reference to the client side component with $find method like this:

var timer = $find("Timer1");

Then, we can call set_interval method to set the interval of the Timer control, _stopTimer method to stop it and _startTimer method to start it.
Here is a sample:

<asp:Timer ID="Timer1" runat="server" Interval="3000">
</asp:Timer>
<input id="Button1" type="button" value="ChangeInterval" onclick="setTimer();"/>
<input id="Button2" type="button" value="Start" onclick="startTimer();"/>
<input id="Button3" type="button" value="Stop" onclick="stopTimer();"/>
<script type="text/javascript">
    function setTimer()
    {
        var timer = $find("Timer1");
        timer.set_interval(100);
    }
    
    function startTimer()
    {
        var timer = $find("Timer1");
        timer._startTimer();
    }
    
    function stopTimer()
    {
        var timer = $find("Timer1");
        timer._stopTimer();
    }
</script>

Related threads:
http://forums.asp.net/t/1159648.aspx
http://forums.asp.net/t/1163431.aspx

11. Useful Links [top]

Official website of AJAX Extension
http://www.asp.net/AJAX/

Documents about AJAX Extension
http://www.asp.net/AJAX/documentation/

Video tutorials for AJAX
http://www.asp.net/learn/AJAX-videos/

AJAX Control Toolkit Project Page
http://www.codeplex.com/Wiki/View.aspx?ProjectName=AtlasControlToolkit

AJAX Control Toolkit online sample
http://www.asp.net/AJAX/AJAXcontroltoolkit/samples/

How to play an Animation?
http://blogs.msdn.com/phaniraj/archive/2007/04/13/animations-how-many-ways-do-i-call-thee.aspx

How to: Re-use Animation Extenders in a page
http://blogs.msdn.com/phaniraj/archive/2007/08/15/how-to-re-use-animation-extenders-in-a-page.aspx

How to: Perform Operations on all instances of a AJAX Control Extender on a page
http://blogs.msdn.com/phaniraj/archive/2007/08/15/how-to-re-use-animation-extenders-in-a-page.aspx

How to: Use a Key Value Pair in your AutoCompleteExtender
http://blogs.msdn.com/phaniraj/archive/2007/06/19/how-to-use-a-key-value-pair-in-your-autocompleteextender.aspx

Scripting Animations from the Ms AJAX AnimationExtender
http://blogs.msdn.com/phaniraj/archive/2007/05/31/scripting-animations-from-the-ms-AJAX-animationextender.aspx

HowTo : Change Visible Tab Using JavaScript in the MS AJAX TabControl
http://blogs.msdn.com/phaniraj/archive/2007/04/16/howto-change-visible-tab-using-javascript-in-the-ms-AJAX-tabcontrol.aspx

Show and Hide ModalPopupExtender from JavaScript
http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Change ServiceMethods and Web Service for the AutoCompleteExtender From Client Side
http://blogs.msdn.com/phaniraj/archive/2007/02/16/change-servicemethods-and-web-service-for-the-autocompleteextender-from-client-side.aspx