web-dev-qa-db-fra.com

Comment retourner un objet Json du contrôleur MVC pour l'afficher

Je suis en train de faire une application MVC où j'ai besoin de passer un objet json du contrôleur pour voir.

var dictionary = listLocation.ToDictionary(x => x.label, x => x.value);
return Json(new { values = listLocation}, JsonRequestBehavior.AllowGet);

Le code ci-dessus que j'utilise dans mon contrôleur, maintenant, lorsque je déploie la page d'affichage en ouvrant une boîte de dialogue de téléchargement dans mon navigateur, lors de l'ouverture du fichier, il me donne un objet json au format souhaité. 

Maintenant, je veux retourner ma page de vue aussi vouloir accéder à l'objet JSON dans la page de vue. Comment puis je faire ça.

asp.net-mvcjson
35
Purushoth

Lorsque vous exécutez return Json(...), vous indiquez spécifiquement à MVC de ne pas utiliser une vue et de servir des données JSON sérialisées. Votre navigateur ouvre une boîte de dialogue de téléchargement car il ne sait pas quoi faire avec ces données.

Si vous souhaitez plutôt retourner une vue, faites simplement return View(...) comme vous le feriez normalement:

var dictionary = listLocation.ToDictionary(x => x.label, x => x.value);
return View(new { Values = listLocation });

Ensuite, dans votre vue, encodez simplement vos données en JSON et affectez-les à une variable JavaScript:

<script>
    var values = @Html.Raw(Json.Encode(Model.Values));
</script>

MODIFIER

Voici un échantillon un peu plus complet. Comme je n'ai pas assez de contexte de votre part, cet exemple suppose un contrôleur Foo, une action Bar et un modèle de vue FooBarModel. En outre, la liste des emplacements est codée en dur:

Contrôleurs/FooController.cs 

public class FooController : Controller
{
    public ActionResult Bar()
    {
        var locations = new[]
        {
            new SelectListItem { Value = "US", Text = "United States" },
            new SelectListItem { Value = "CA", Text = "Canada" },
            new SelectListItem { Value = "MX", Text = "Mexico" },
        };

        var model = new FooBarModel
        {
            Locations = locations,
        };

        return View(model);
    }
}

Modèles/FooBarModel.cs 

public class FooBarModel
{
    public IEnumerable<SelectListItem> Locations { get; set; }
}

Vues/Foo/Bar.cshtml 

@model MyApp.Models.FooBarModel

<script>
    var locations = @Html.Raw(Json.Encode(Model.Locations));
</script>

Au vu de l'apparence de votre message d'erreur, il semble que vous mélangez des types incompatibles (à savoir Ported_LI.Models.Locatio‌​n et MyApp.Models.Location). Pour récapituler, assurez-vous que le type envoyé du côté action du contrôleur correspond à ce qui est reçu de la vue. Pour cet exemple en particulier, new FooBarModel dans le contrôleur correspond à @model MyApp.Models.FooBarModel dans la vue.

57
Daniel Liuzzi

Vous pouvez utiliser AJAX pour appeler cette action du contrôleur. Par exemple, si vous utilisez jQuery, vous pouvez utiliser la méthode $.ajax() :

<script type="text/javascript">
    $.ajax({
        url: '@Url.Action("NameOfYourAction")',
        type: 'GET',
        cache: false,
        success: function(result) {
            // you could use the result.values dictionary here
        }
    });
</script>
4
Darin Dimitrov
<script type="text/javascript">
jQuery(function () {
    var container = jQuery("\#content");
    jQuery(container)
     .kendoGrid({
         selectable: "single row",
         dataSource: new kendo.data.DataSource({
             transport: {
                 read: {
                     url: "@Url.Action("GetMsgDetails", "OutMessage")" + "?msgId=" + msgId,
                     dataType: "json",
                 },
             },
             batch: true,
         }),
         editable: "popup",
         columns: [
            { field: "Id", title: "Id", width: 250, hidden: true },
            { field: "Data", title: "Message Body", width: 100 },
           { field: "mobile", title: "Mobile Number", width: 100 },
         ]
     });
});

0
nirav savaliya