Wednesday, October 19, 2011

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.

Tuesday, October 4, 2011

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..;-)