Click here to Skip to main content
Click here to Skip to main content
Go to top

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

, 8 Jul 2010
Rate this:
Please Sign up or sign in to vote.
This is a frequent requirement for an ASP.NET developer to pass a server side array to client side and access them through JavaScript. 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.

This is a frequent requirement for an ASP.NET developer to pass a server side array to client side and access them through JavaScript. 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, the first one is how to pass the array from server side to client side and the second one is 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 by using “RegisterArrayDeclaration”. RegisterArrayDeclaration method registers a JavaScript array with the System.Web.UI.Page object. As the array object is registered with the “Page" object, we can access it from JavaScript easily. RegisterArrayDeclaration takes array name and value of the array element as arguments.

In the below example, I have registered one array with the 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 does the above declaration do? This is nothing but a declaration of a JavaScript array like:

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

This “Skills” array is now only a JavaScript array which is easily accessible by client side code. Now let’s take a look at 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 binding 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 bind 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 placeholder for item of this “Select” element. So for every element, I have created an object for “option” element and added them into 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 questions regarding this, please post your question in the comments section or use contact us page to contact me.
Shout it


Filed under: ASP.NET, C#

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhijit Jana
Technical Lead
India India
.NET Consultant | Former Microsoft MVP - ASP.NET | CodeProject MVP, Mentor, Insiders| Technology Evangelist | Author | Speaker | Geek | Blogger | Husband
 
Blog : http://abhijitjana.net
Web Site : http://dailydotnettips.com
Twitter : @AbhijitJana
My Kinect Book : Kinect for Windows SDK Programming Guide
Follow on   Twitter

Comments and Discussions

 
QuestionGet ListView ul li items into a javascript array Pinmembermfisher815-May-13 6:35 
GeneralNeed to use C# array in a Javascript file PinmemberDevang26-Sep-10 18:33 
Hi Abhijit,
 
Nice post, I was searching to do something similar. But I have a problem with this one. I have a user control 'MyControl.ascx' which includes a javascipt file 'MyScript.js' which in turn is loaded into 'Default.aspx'. Now I want to access a string array 'myArray', populated in 'MyControl.ascx', in 'MyScript.js'. I tried your approach but when I tried to de-bug 'MyScript.js' in Firebug, it says myArray is undefined.
 
You help is really appreciated.
 
Thnx,
 
Devang.
Generalyes sir PinmemberYves22-Sep-10 4:22 
GeneralRe: yes sir PinmvpAbhijit Jana22-Sep-10 10:58 
GeneralMCP Certification Pinmemberhemant.gujarati12-Jul-10 22:37 
GeneralRe: MCP Certification PinmentorKunalChowdhury6-Sep-10 8:13 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web03 | 2.8.140926.1 | Last Updated 8 Jul 2010
Article Copyright 2010 by Abhijit Jana
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid