Pass IEnumerable List to javascript

Question

I was wondering if I could pass a IEnumerable Collection into a Javascript method on the page load. So something like this...

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<MyAppMVC.Models.ViewModels.News.NewsIndexViewData>" %>

<div id="container">

    <%= String.Format("<script type='text/javascript'>testMethod({0})</script>", Model.NewsList)  %>

</div>

I realize JS is client side, just didn't know if there was any way possible to do that? Thanks!

Answer 1

You can register the javascript in the code behind in the Page_Load with the following code (Note I am assuming that Model.NewsList is a string enumeration or array):

StringBuilder sb = new StringBuilder();
bool isFirst = true;
//build a comma seperated list.
foreach (string s in Model.NewsList)
{
    if (isFirst)
        isFirst = false;
    else
        sb.Append(", ");
    sb.Append("'").Append(s.Replace("'", "''")).Append("'");
}
//create the javascript array
string javascript = String.Format(@"var news = [{0}];", sb);
//put the array in the generated page.
Page.ClientScript.RegisterClientScriptBlock(GetType(), "newsList", javascript);

This will put the javascript on the page accessible from other javascript functions.

Answer 2

No, you cannot. For several reasons.

1) There is no IEnumerable in JavaScript, as you use it in .NET. There is something similar, but it is implemented completely differently. In .NET, IEnumerable just means the class provides a method, GetEnumerator(), which returns an IEnumerator (which itself only contains Current, MoveNExt, and Reset methods). In JavaScript, when you do a for iteration on an item, you are iterating over the names of its properties.

var myObj = { 'a' = 1, 'b' = 2 };

for (var name in myObj) { alert(name); } // will alert 'a', and 'b'

Even when working with JavaScript arrays, the above loop returns the index of the array element, not the actual member at that index.

2) By doing a String.Format() on your list, you wouldn't have been passing the list as an object to your JavaScript but just the ToString() result of your list. Which probably just returns "System.Collections.Generic.List`1[System.String]"

3) Unless your developing environment explicitly allows it, you can assume that passing arguments from one language into another is not going to work. Much like you can't write JavaScript inside your .NET code, you can't write .NET code in your JavaScript. These languages have different feature sets, different syntax, and are executed with completely different mechanisms - .NET is compiled, and JavaScript (generally, speaking) is interpreted (Compiled vs. Interpreted languages).

What you have to do is transform your data into a format that can be used by JavaScript. Most likely this means converting it into something called JSON. You didn't provide a lot of details as to what exactly Model.NewList is, or what your testMethod() expects as an argument. But for the sake of an example lets assume NewList is a list of strings. In that case, your JSON would look something like this:

{ 'NewList' : ['string1', 'string2', 'string3'] }

The easiest way to convert your .NET data into JSON is to use built-in libraries, such as JavaScriptSerializer:

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
string json = serializer.Serialize(Mdoel.NewList);