Pass List<int> from code behind to use in Javascript function

Question

Currently I have a Javascript function that uses I can hard code values in like -

data: [1,4,7,9]

However I wish to pass in an integer list to set the values from the code behind something like -

C# Code Behind

public List<int> listOfInts = new List<int>();

protected void Button1_Click(object sender, EventArgs e)
    {
        listOfInts.Add(1);
        listOfInts.Add(4);
        listOfInts.Add(7);
        listOfInts.Add(9);

        ScriptManager.RegisterStartupScript(this, GetType(), "blah", "JSfunction()", true);
    }

Aspx

data: <% = listOfInts %>

However this breaks with the error -

0x800a1391 - Microsoft JScript runtime error: 'JSfunction' is undefined

If I remove the aforementioned line and do it like this in the function (not passing anything from the code behind like I need to) -

var listOfInts = new Array(); 
listOfInts[0] = 1;
listOfInts[1] = 2; 
listOfInts[2] = 3; 
listOfInts[3] = 4;

and then set -

data: [listOfInts[0],listOfInts[1],listOfInts[2],listOfInts[3]]

This works fine. How can I pass the values from the code behind to populate the values in the Javascript function?

Try converting it to JSON instead of just sending javascript your .Net object. — Kevin
– Kevin, Commented Oct 25, 2013 at 15:28
I didn't have time to throw the code together earlier... but take a look at my answer below the accepted answer. — Kevin
– Kevin, Commented Oct 25, 2013 at 16:27

Lee Bailey · Accepted Answer · 2013-10-25 15:30:05Z

3

You need to format listOfInts as a javascript array. Try adding a property in your code-behind like this:

protected string IntsAsJSArray
{   
    get 
    {
        return string.Format("[{0}]", string.Join(",", listOfInts));
    }
}

Then in your ASPX page

data: <%= IntsAsJSArray %>

answered Oct 25, 2013 at 15:30

Lee Bailey

3,6142 gold badges20 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kevin · Accepted Answer · 2014-02-05 22:42:57Z

A more generic method to do this... and significantly better in my opinion would be to write something that works for any object you needed to do this for. Consider the following extension methods...

    public static T FromJson<T>(this string jsonData, Encoding encoding = null) 
        where T : class
    {
        encoding = encoding ?? Encoding.Default;
        var deserializer = new DataContractJsonSerializer(typeof(T));
        var buffer = encoding.GetBytes(jsonData);
        using (var stream = new MemoryStream(buffer))
        {
            return deserializer.ReadObject(stream) as T;
        }
    }

    public static string ToJson<T>(this T obj, Encoding encoding = null) 
        where T : class
    {
        encoding = encoding ?? Encoding.Default;
        var serializer = new DataContractJsonSerializer(typeof(T));
        using (var stream = new MemoryStream())
        {
            serializer.WriteObject(stream, obj);
            return encoding.GetString(stream.ToArray());
        }
    }

Usage then looks like this in your case...

data: <% = listOfInts.ToJson() %>

This works whether you have a List, Int[], or any other object for that matter on your asp.net side. Also don't forget to consider what encoding your JSON text is in.

Collectives™ on Stack Overflow

Pass List<int> from code behind to use in Javascript function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related