Timeout problem with AJAX... Solved

While working with ASP.Net applications, you might have got below mentioned runtime error.

Sys.WebForms.PageRequestManagerTimeoutException - The server request timed out – error

I recently came across the error. After hitting a button on my page, I was doing some heavy SQL operations on thousands of records and thus it was taking some time to render the output (around 2 minutes). But before I could get the result, I was getting this runtime error.

This timeout was different than the Page Request Timeout which was set to 10minutes (600 seconds). After some investigation I realized that this error was coming from AJAX Extension framework. Bingo.

When you are using AJAX on your page, there is a default timeout of 90 seconds for each Asynchronous postback request. And if your request is taking more than 90 seconds AJAX Extension callback framework will timeout. No wonder why my application was breaking.

So, how to get rid of this problem? Well its simple, just override the default timeout for AJAX request and you will be done. All you have to do is to set your desired timeout period for AsyncPostBackTimeOut property of ScriptManager as shown below.

<asp:ScriptManager ID="ScriptManager1" runat="server"

AsyncPostBackTimeOut="600" >

asp:ScriptManager>

As I mentioned earlier, the default value of the AsyncPostBackTimeOut property is 90 seconds.

So that’s it, now your application will work properly even if any AJAX request takes more than 90 seconds to complete.

Hope you find this post useful. Feel free to provide comments and feedbacks.

Register Client-Scripts Carefully

While working on AJAX or Javascript based applications it’s most likely that you will come across situation when you want to pass some information from server side to client side. And we all know that ScriptManager.RegisterStartupScript method is used to emit client side script to the page response. If you want to update any client side variables or call any client side methods from code behind we use this method.

Syntax for the function is as follows.

public static void RegisterStartupScript(

Page page,Type type,string key, string script,bool adddScriptTags

)

Simple enough right, now take one simple example

string strScriptBlock = "alert(‘This is Test’);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "TestKey”, strScriptBlock, true);

When executed, above script block will be added to the page and an alert will be shown.

Now let’s play with this

for (int i = 0; i < 3; i++)

{

string strScriptBlock = "alert(‘This is Test’);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "TestKey”, strScriptBlock, true);

}

What do you think will be the output for above code snippet? I know most of you might be thinking output as 3 javascript alerts. Buts that’s not correct. To my surprise initially I got only one alert box. I was wondering why this is so. Then I got into meat of this and found something interesting.

The key thing here is “key”. A client script is uniquely identified by its key and its type. Scripts with the same key and type are considered duplicates. And when the server side processing is completed it will only include original copy of the client script block and ignores other duplicates.

In our example above we have mentioned key "TestKey”, so while iterating through for loop even though 3 client scripts are registered there is only one unique script key. Thus at the end only one client script block is attached with the page response and other 2 are ignored. Most of developers don’t think much about giving proper key name, but it’s important to know its significance.

Below is code indicating how we can avoid such situation.

for (int i = 0; i < 3; i++)

{

string strScriptBlock = "alert(‘This is Test’);";

ScriptManager.RegisterStartupScript(Page, Page.GetType(), "TestKey”+i.ToString(), strScriptBlock, true);

}

In here, I am giving key name dynamically by appending the indexer with the key name and it’s guaranteed to be different for each iteration of for loop. Thus three different client scripts will be registered with different keys. And in the output you will see 3 alert boxes. I recommend to try this out yourself to see how exactly things are happening.

Above concept equally applies to other client script registering methods such as Page.RegisterStartupScript or ClientScript.RegisterClientScriptBlock.

Hope you find this post useful, comments and feedbacks are welcome.

AJAX using ASP.Net PageMethods

Most of developers are quite familiar with update panels but not so familiar with page methods concept. So what are Page methods?

Page methods are nothing but web methods (web service) that resides inside the code behind of ASP.NET page. And using AJAX you can call these page methods from JavaScript.

Let’s take one example and you will be clear on how we can implement AJAX using Page Methods.

Place one label and a button on page. And task is to increment the value in label every time button is clicked. Your ASPX page looks as shown below…

<asp:ScriptManager ID="ScriptManager1" runat="server"

EnablePageMethods="true" />

<script language="javascript">

function UpdateCounter() {

PageMethods.GetUpdatedCounter(OnSucceeded, OnFailed);

}

function OnSucceeded(result) {

$get('Label1').innerHTML = result;

}

function OnFailed(error) {

$get('Label1').innerHTML = "0";

}

script>

<asp:Label runat="server" ID="Label1" Text="100" /><br />

<input type="button" id="Button2" value="Click Me"

onclick="UpdateCounter();" />

See carefully scriptmanager tag above. It’s using EnablePageMethods property which instructs scriptmanager to look for page methods in code behind.

Also while calling page method PageMethods.GetUpdatedCounter there are two parameters passed to it OnSucceeded & OnFailed. These parameters are nothing but javascript functions. First parameter/function will be called when page method call succeeds and second parameter indicates method which needs to be invoked when page method call fails for some reason. These functions are called as Call Back Methods. There is no naming standard across these call back methods, and you can give any name for these methods.

There is one parameter to OnScceeded method, which is “result”. This is nothing but any return value from page method. In this case, our page method will be returning an incremented number and it will be passed to OnScceeded automatically. Rest of code above is simple Html and Javascript.

Now we have to write one function in code behind which will actually do the incremental mathematics for us.

[WebMethod]

public static int GetUpdatedCounter()

{

return int(Label1.Text)++;

}

Notice here two important things to note. First the function is decorated with WebMethod attribute. Needless to say it makes function a web method. Second is static keyword in the method declaration. Page methods are Static because they are independent of the page instance. They are simply independent web methods which are hosted inside code behind instead of a separate webservice.

That’s it, compile the code and run it and you will be amazed to see how quickly you get the response. I recommend you to do this example on your own and you will be clear on the how things are happening. Same thing can be implemented using Update Panels but Page Method approach is faster and efficient than Update Panels.

In coming post i will why PageMethods are better than UpdatePanels. Till then enjoy coding..;-)

Execute Methods after a delay in Javascript

In rare situations you might want to call methods after some time delay. In server side code(C#.NET) you can achieve this by making thread sleep for some time. But remember in this case the overall execution of the server side code stops and resumes after the specified sleep time span is over. This results in delay in overall response time to the user.

Ever wondered how you can achieve the same thing on Client Side (in javascript). Javascript provides you a very handy built-in function “setTimeout”. Using this function you can call any method with after a specified period of time.

Let’s take one example and I will show you how to make use of this function. Assume I have one method “UpdateTotals(LocationID)” in my javascript and I want to call this method after a delay of say 4 seconds.

To accomplish this I need to call the method as shown below.

setTimeout("UpdateTotal(LocationID)", 4000);

You can try out this simple example by yourself. And for more examples you can refer this useful post.

One important thing to remember here is, this delay is asynchronous. Meaning it will only delay the execution of that particular method and it will continue with execution of other javascript code. And this is what crucial in AJAX based application where you don’t want any delay in overall execution.

Real AJAX and Javascript

As requirement for my current project I was asked to enhance the application performance by using AJAX. For most of the developers (especially .Net developers), AJAX implementation is nothing but to use some update panels, collapsible panels and modal popups. But when I understood the requirements from my client, I was sure that we need to deliver something more than Microsoft AJAX and there is a need to dive into Real AJAX Sea.

Now a days I am spending most of my time sharpening my Javascript skills which are mandate when you want to build real AJAX applications (not merely by using UpdatePanels).

In coming days I will try to post some cool stuff from Javascript and AJAX which I come across. And I am hopeful that these post will be useful for some of the audience out there to understand and realize effectiveness of Real AJAX.

cheers,

Mirza Ateeq