Passer la liste de MVC ViewBag à JavaScript

J'ai une liste d'utilisateurs qui je passe de mon contrôleur de mon point de vue à l'aide de la vue sac. Maintenant, j'ai besoin d'être en mesure de passer la même liste pour le javascript sur la page. J'ai pu reconstituer la liste à l'aide d'une boucle foreach:

    @foreach (var item in ViewBag.userList) //Gets list of users passed from controller and adds markers to the map
{
    var userLat = item.LastLatitude;
    var userLon = item.LastLongitude;
    var _userId = item.Id;

    <script>array.push({"userId":"'@_userId'","userLat":"'@userLat'","userLon":"'@userLon'"});</script>
}

Toutefois, cela semble un malpropre approche et a exigé beaucoup de travail, si une modification est faite. Je sais qu'il y a des postes similaires sur Stack overflow, mais beaucoup d'entre eux utilisent la version précédente de la MVC et la même syntaxe ne semble pas s'appliquer. Des idées?

source d'informationauteur Matt

  1. 21

    Vous pouvez le faire en un seul et coffre-fort de la ligne de code à l'aide d'un parser JSON. Vous devez absolument jamais créer manuellement JSON avec une chaîne de caractères des enchaînements et des trucs que vous avez essayé de faire dans votre exemple. Pas besoin d'écrire des boucles.

    Voici la bonne façon de le faire:

    <script type="text/javascript">
    var array = @Html.Raw(
        Json.Encode(
            ((IEnumerable<UserModel>)ViewBag.userList).Select(user => new 
            { 
                userId = user.Id, 
                userLat = user.LastLatitude, 
                userLon = user.LastLongitude 
            })
        )
    );

    alert(array[0].userId);
</script>

    Le code HTML généré va ressembler exactement comme vous le souhaitez:

    <script type="text/javascript">
    var array = [{"userId":1,"userLat":10,"userLon":15}, {"userId":2,"userLat":20,"userLon":30}, ...];
    alert(array[0].userId);
</script>

    Bien sûr, le prochain niveau de l'amélioration de ce code est de se débarrasser de la ViewCrap et utiliser un fortement typé modèle de vue.

  2. 2

    Une autre option pourrait être de créer une nouvelle action à votre contrôleur de retour d'un JsonResult. Ce résultat json pourrait revenir à votre liste. Dans votre page, vous pouvez appeler l'action avec jquery et de l'utiliser à partir de là.

    public ActionResult GetMyList()
{
    var list = GetMyUserList();

    return Json(new { userlist = list }, JsonRequestBehaviour.AllowGet);
}
  3. 1

    @Darin Dimitrov réponse est sur place. Je voudrais juste ajouter que si quelqu'un est en train de passer d'un modèle et non une viewbag. 

    <script type="text/javascript">
 var array = @Html.Raw(Json.Encode(
            Model.YourModel.Select(_ => new {
              id = _.Id,
              text = _.Name
            })
          ))

    Mon cas d'utilisation est spécifique à select2 . On peut alors simplement passer le tableau de données: l'attribut

     $("#storeSelect").select2({
        data: array,
        placeholder: "Select something"
 });
</script>

    viewmodel

    public class YourViewModel
  {
    public IEnumarable<YourPoco> YourPocos { get; set; }
  }

    Contrôleur

    public class YourController : Controller
{
    public ActionResult Index()
    {
        YourViewModel vm = new YourViewModel{
            //Using Dependancy injection
            YourPocos = yourRepo.GetYourPocos();
        };
        return View("Index", "_Layout",vm);
    }
}

    Je me rends compte que cette réponse est peut-être redondant, mais c'est la première fois que je suis en utilisant Json.Encoder et transmettant les valeurs de modèle à une extension jquery. Ce qui pour moi est trop cool. Il n'est jusqu'à un certain degré de créer des extensibilité de ce qui serait autrement un @htmlhelper