How do I pass a list from aspx to javascript?

Question

I have a list that I loop through to populate my table. I would like to pass a row of data to my javascript code at best. If not, I would like to pass the list and the id number to search for that row in the list. How can I do this?

<%foreach(var item in Model.NewList) { %>
<tr>
   <td><%=item.EntryDate.ToShortDateString() %></td>
   <td onmouseover="showDetailsHover(<%=item %>,<%=item.idNumber%>);" 
       onmouseout="hideDetailsHover();"><%=Html.ActionLink(item.idNumber,"SummaryRedirect/" + item.idNumber) %></td>
</tr>
<% } %> 

Answer 1

You can use Json serialization to pass this data http://json.codeplex.com/ - library for serialization

Answer 2

The concept of "passing a list from aspx to javascript" is a little hard to understand since your ASP.NET code runs on the server and javascript code runs in the browser. Because they exist in different domains, you can't simply "pass" a list from one domain to the other.

However, you have several options available:

• Expose a web service that you can access from javascript. The web service can be responsible for providing the row of data so that javascript can understand it.
• Put staticly formatted JSON data directly into your javascript function when your page loads. JSON is a format that javascript can understand. While technically this isn't "passing" a variable into a javascript function from ASP.NET, it is saying "Here's the data I want to run in my javascript function when/if it runs on the client."

Answer 3

create and populate the variable on asp. below your code put the javascript and print the variables where you want. At least on php/js it works for me...

Answer 4

The quickest way I can think of is this:

1. Use Json.Net to serialize your list as json string on your page.
2. Include jQuery and jQuery-json plugin.
3. Define a javascript list in a javascript function.

Something like this on your aspx page:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://jquery-json.googlecode.com/files/jquery.json-2.2.js"&gt;&lt;/script&gt;
<script type="text/javascript">
    function foo() {
        // This is where we use the Json.Net library
        var rawJsonString = '<%= Newtonsoft.Json.JsonConvert.SerializeObject(Model.NewList) %>';

        // This is where we use the jQuery and jQuery-json plugin
        var list = $.evalJSON(rawJsonString);

        // Do stuff with your list here
    }
</script>

Answer 5

THanks for the ideas. I eventually dug a little deeper with your suggestions and I used a for loop on the list I passed then add my data to the row based on the loop...

success: function(data) {
        var loopList = data.message.NewList;
        for (var i = 0; i < loopList.length; i++) {
            addRecentData(loopList[i]);
        }
    },
});
function addRecentData(data) {
    ....
}

THanks for the nudge!