4

First off, I am fairly new to MVC and jQuery. I apologize if my question or terminology is incorrect.

I currently have a view in my MVC application that displays a list of addresses. On the same page, I also have a map where I wish to map these locations.

I am trying to find the 'proper' way of getting the list of address objects to the javascript in the view so that it may be iterated through and mapped.

I have seen some solutions which require a getJSON call to the controller from the javascript code. I wish to avoid this solution since it requires another trip to the database and webserver. All of the information that I need to render the addresses on the map is already being presented to the View via ViewData.

I have also seen a solution in which the javascript could access the data passed into the view via ViewModel.Data, however this example was working on a single object, as opposed to a list.

I would appreciate it if anyone had any tips or resources available.

Thanks

Improve this question

3 Answers 3

Reset to default
5

Just render the data into your javascript. Say you have a list of address objects like this:

public class Address
{
    public string Line1 { get; set; }
    public string City { get; set; }
}

// in your controller code
ViewData["Addresses"] = new List<Address>(new Address[] { new Address() { Line1="bla", City="somewhere"}, new Address() {Line1="foo", City="somewhereelse"}});

Render it into your javascript like this:

<script type="text/javascript">
var addresses = new Array(
<% for (int i = 0; i < ViewData["Addresses"].Count; i++) { %>
<%= i > 0 : "," : "" %>({line1:"<%= addr.Line1 %>", city:"<%= addr.City %>"})
<% } %>);
</script>

This basically creates a JSON formatted array with your address objects in javascript.

UPDATE: If you want to do this automatically using the framework code instead of writing your own code to serialize to JSON, take a look at the JavaScriptSerializer. Here's a howto from the great ScottGu on doing this: Tip/Trick: Building a ToJSON() Extension Method using .NET 3.5

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

1 Comment

That ToJSON method worked out perfectly. I realized/discovered that I had to eval() the object in javascript to turn the string back into objects. Thank you for your help!
2

Technically, ViewData is not render to output HTMl thus will not be sent to client browser. The only way you can access to ViewData is render it to an object in the HTML like array or something like:

var cityList = new Array();
function addCity(cityId, cityName) {
    var city = new Object();
    city.CityID = cityId;
    city.CityName = cityName

    cityList .push(city);
}
<% foreach (Something.DB.City item in ViewData["Cities"] as List<City>)
   { %>
   addCity(item.Id, item.Name);
<% } %>

This's the way I usually do when I need to render data for javascript

Improve this answer

1 Comment

This is incorrect terminology. "Not be sent to a client browser" may be confusing. "the only way you can access to ViewData" is also a bit confounding. ViewData is a dictionary of objects that is passed to a View. It may or may not contain an object which contains markup. It is unrecommended to include markup in controller logic. I believe what was intended by the commenter is that this dictionary can be used to create display content but provides no display markup by itself.
1

You could format the data in JSON on the server (as a string). Assign this to your your ViewData. In your View then, assign the ViewData to a javascript variable.

<script type="text/javascrpt">
   var objList = <%= ViewData["objectListJSON"]; %>;

   for (var obj in objList)
   {
     ...
   }
</script>
Improve this answer

4 Comments

Great - I will give this a try. Before doing so, does there happen to be a SomeList.toJSON method available in the framework?
I had some trouble with JsonResult. However, you're post got me started in the right direction. I ended up using the ToJSON() Extension method that Chris Hynes pointed to in his answer. Thank you for your help
The following: stackoverflow.com/questions/3331842/… explains why JsonResult cannot be used for this situation.
@leafdev - yeah, it should simply be serialized using the DataContractJsonSerializer or equivalent.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.