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.

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