Comment parcourir des objets dans ViewData via javascript sur la page/vue?

Question

Tout d'abord, je suis assez nouveau pour MVC et jQuery. Je m'excuse si ma question ou ma terminologie est incorrecte.

J'ai actuellement une vue dans mon application MVC qui affiche une liste d'adresses. Sur la même page, j'ai aussi une carte où je souhaite cartographier ces lieux. J'essaye de trouver la manière «appropriée» d'obtenir la liste d'objets d'adresse au javascript dans la vue de sorte qu'elle puisse itérer et être mappée.

J'ai vu certaines solutions qui nécessitent un appel getJSON à l'automate à partir du code javascript. Je souhaite éviter cette solution car elle nécessite un autre trajet vers la base de données et le serveur web. Toutes les informations dont j'ai besoin pour rendre les adresses sur la carte sont déjà présentées à la vue via ViewData.

J'ai également vu une solution dans laquelle le javascript pouvait accéder aux données transmises dans la vue via ViewModel.Data, cependant cet exemple travaillait sur un seul objet, par opposition à une liste.

Je vous serais reconnaissant si quelqu'un avait des conseils ou des ressources disponibles.

Merci

Answer 1

Il suffit de rendre les données dans votre javascript. Disons que vous avez une liste d'objets d'adresses comme ceci:

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 dans votre javascript comme ceci:

<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> 

Cela crée essentiellement un tableau au format JSON avec vos objets d'adresse en javascript.

MISE À JOUR: Si vous voulez faire cela automatiquement en utilisant le code du framework au lieu d'écrire votre propre code pour sérialiser en JSON, jetez un oeil à JavaScriptSerializer. Voici un howto du grand ScottGu en faisant ceci: Tip/Trick: Building a ToJSON() Extension Method using .NET 3.5

Answer 2

Vous pouvez formater les données en JSON sur le serveur (sous forme de chaîne). Attribuez-le à votre ViewData. Dans votre vue, affectez le ViewData à une variable javascript.

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

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

Answer 3

Techniquement, ViewData n'est pas rendu pour sortir HTMl donc ne sera pas envoyé au navigateur client. La seule façon que vous pouvez accéder à ViewData est rendu à un objet dans le code HTML comme tableau ou quelque chose comme:

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); 
<% } %> 

C'est la façon dont je fais habituellement quand je dois rendre des données pour le javascript