How to pass ASP.NET server side array to client side and binding them with Html element?

This is a very often requirement for an ASP.NET Developer to pass a sever side array to client side and access them through java Script. There are several ways to do that. But here I am describing one of the simplest steps to pass server side array to client side. In this blog post you will get to know two things, first one is the how to pass the array from server side to client side and second one is the how to bind that array to an empty “html dropdown” list.

Well, the easiest way to pass the server side array to a client side is  using  “RegisterArrayDeclaration” . RegisterArrayDeclaration method registers a javascript array with the System.Web.UI.Page Object. As the array object registered with the “Page” object so we can access it from javascript easily. RegisterArrayDeclaration takes array name and value of the array element as argument.

In below example, I have registered one array with name of “Skills”.

  protected void Page_Load(object sender, EventArgs e)
    {
       // Register List of Languages
        Page.ClientScript.RegisterArrayDeclaration("Skills", "'C#'");
        Page.ClientScript.RegisterArrayDeclaration("Skills", "'VB.NET'");
        Page.ClientScript.RegisterArrayDeclaration("Skills", "'C'");
        Page.ClientScript.RegisterArrayDeclaration("Skills", "'C++'");
    }

Now, what above declaration does?  This is nothing but a declaration of a java script array like,

Var Skills = new Array('C#', 'VB.NET','C','C++');

These “Skills” array is now only a JavaScript array which is easily accessible by client side code. Now Let’s have a look how to access them and how to bind them in a dropdown list.
In my form, I have an Html select element and one Html Button. I want my Server side ( Which is now a client side ) array to bind in the dropdown list.

  <select id="ddlNames" name="D1">
    </select><input id="BtnNameLoad" type="button" value="Load Name" onclick="return BtnNameLoad_onclick()" />


Below is the code snippet for bind the array to html control.

function BtnNameLoad_onclick() {

            //Get The Control ID for the dropdown
            var listID = document.getElementById("ddlNames");
            //Check if the object is not null
            if (listID != null) {
                for (var i = 0; i < Skills.length; i++) {
                   // Create and Element Object of type "option"
                    var opt = document.createElement("option");
                    //Add the option element to the select item
                    listID.options.add(opt);
                    //Reading Element From Array
                    opt.text = Skills[i];
                }
            }
        }

In the above code snippet, I have read the skills name using Skills[i] . which was actually registered from server side.   Another interesting thing is to bindng the array elements in “Select” item. As we all know, “Option” tag element is the placeholder for the select content. So I have created one “Option” element using “createElement

    var opt = document.createElement("option");

This opt object is nothing but the place holder for item of the this “Select” element. So for every element I have created an object for “option” element and added them in to the actual list by reading the value from array.

You can also check the array elements that are registred through debugging

Below is the sample output:

If you have any question regarding this please post your question at comments section or use contact us page to contact me.
Shout it

11 thoughts on “How to pass ASP.NET server side array to client side and binding them with Html element?

  1. How to pass ASP.NET server side array to client side and binding them with Html element? « Abhijit’s World of .NET…

    Thank you for submitting this cool story – Trackback from DotNetShoutout…

  2. Abhijit, recent days I following your articles when I read your posts for code project and felt to read more of yours. Just keep it up and continue writing more.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s