Using .NET’s Register Script methods with jQuery’s $(document).ready()

In ASP.NET web apps, most of the times we would need to call JavaScript functions in page_load event of code behind, for various valid reasons. In such scenarios, we simply use .NET’s Register Script methods for emitting JavaScript code, which is absolutely fine.

If you are using jQuery, you would write the logical flow of events to be executed in $(document).ready() function. However, if you are using Register script methods with jQuery, the output will not be as expected. I have faced this problem yesterday and want to share the reason and simple solution.

.NET framework provides two methods for emitting JavaScript to the client. They are:

  1. RegisterClientScriptBlock (Client-side script is emitted just after the <form runat=”server”> tag)
  2. RegisterStartupScript (Client-side script is emitted just before the </form> tag)

Note: These methods are now moved to ClientScriptManager class from Page class.

The below screenshot explains the difference clearly:


Okay. Now that the difference between the two is clear, let us go forward. Consider the below simple JS code:

function fnTestScript(msg) {
$(document).ready(function() {
    fnTestScript('This is from document.ready');

We am defining a method fnTestScript(parameter) and calling it in jQuery’s ready() function. Now, in page_load event of server, let us call this method using Register script methods.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
       'Using "RegisterClientScriptBlock" method to emit JS code.
       Dim strScript As New StringBuilder
       strScript.Append("<script language='javascript'>")
       strScript.Append("fnTestScript('This is from RegisterClientScriptBlock');")
       ClientScript.RegisterClientScriptBlock(Me.GetType(), "TestScript", strScript.ToString())
       'Using "RegisterStartupScript" method to emit JS code.
       Dim strScript2 As New StringBuilder
       strScript2.Append("<script language='javascript'>")
       strScript2.Append("fnTestScript('This is from RegisterStartupScript');")
       ClientScript.RegisterStartupScript(Me.GetType(), "TestScript", strScript2.ToString())
   End Sub

Can you guess what the output will be? Here it is:


The reason is simple. .NET is injecting the script inline, into the DOM. So its functions are called before $(document).ready(), which fires after DOM is loaded. This means, your logical sequence of JavaScript calls has gone for a toss!

The solution is even more simple. Just add $(document).ready() in your function definition:

function fnTestScript(msg) {
    $(document).ready(function() {

Now your sequence of JavaScript calls will be like this:


Q: Can you call $(document).ready() multiple times?
A: Yes!
This is another difference between this method and JavaScript’s window.onload, which is rarely mentioned in articles. The order of execution depends only on the order in the code.

Hope this article saves the time of others who face similar problem!

Filtering .NET 3.5 returned JSON with jQuery

In .NET 3.5, when a Web service class is decorated with “ScriptService” attribute, the web service returns data in JSON format [MSDN]. I have demonstrated this with a simple example in the article, Passing JSON objects in .NET 3.5.

Let us consider that our “person” class has several properties, of which only few are useful on the client side for data binding. We can filter this object in two ways:

1. On the server side:- Create a dictionary object [System.Collections.Generic.Dictionary(Of TKey, TValue)], add the desired properties to dictionary object and return it.

2. On the client side:- In cases where a quick filter has to be done without touching server side code, we can use jQuery’s each function to create a custom JSON object.

Suppose you want to filter only “country” and “code” out of the below JSON data,

var players = 
[{ "country": "India", "code": "Ind", "name": "Sachin" },
{ "country": "Sri Lanka", "code": "SL", "name": "Murali" },
{ "country": "Australia", "code": "Aus", "name": "Shane" },
{ "country": "West Indies", "code": "WI", "name": "Lara"}];

you can simply write the below jQuery code:

var newObject = {}; //Creating a new object
$.each(players, function() { //Looping through our players array using jQuery's each function
    newObject[] = this.code; //Creating our custom "name/value" pair

So, our newObject will contain new data(having only “country” and “code”). If you want to access country code, you can simply say “newObject.India”, which gives “Ind”.

This tip is particularly useful in cases like filling dropdown lists with JSON data. By default, the server’s JSON data contains several properties which are not required. In such cases, this client side filter comes as a handy tip :)