Asp.net mvc 如何将Json对象从MVC控制器返回到视图

我正在做一个MVC应用程序，需要将json对象从控制器传递到视图

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

上面的代码是我在控制器中使用的，现在当我部署视图页面时，它会在浏览器中打开一个下载对话框，当打开文件时，它会按照我需要的格式为我提供json对象

---

现在我想返回我的视图页面，还想访问视图页面中的json对象。我该怎么做。

您可以使用AJAX调用此控制器操作。例如，如果您正在使用jQuery，则可以使用以下方法：

$.ajax({
url:'@url.Action（“NameOfYourAction”），
键入：“GET”，
cache:false，
成功：功能（结果）{
//您可以在这里使用result.values字典
}
});

当您返回Json（…）时，您特别告诉MVC不要使用视图，而是要提供序列化的Json数据。您的浏览器会打开一个下载对话框，因为它不知道如何处理这些数据

如果您想返回视图，只需像通常那样执行

返回视图（…）

：

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

然后在您的视图中，只需将数据编码为JSON并将其分配给JavaScript变量：

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

Models/FooBarModel.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);
    }
}

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

公共类模型
{
公共IEnumerable位置{get；set；}
}

Views/Foo/Bar.cshtml

@model MyApp.Models.FooBarModel

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

@model MyApp.Models.FooBarModel
var locations=@Html.Raw（Json.Encode（Model.locations））；

从错误消息的外观来看，您似乎混合了不兼容的类型（即

Ported_LI.Models.Locatio）‌​n

和

MyApp.Models.Location

）因此，为了重述，请确保从控制器操作端发送的类型与从视图接收的类型匹配。特别是对于此示例，控制器中的新FooBarModel与视图中的模型MyApp.Models.FooBarModel相匹配。

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/Home/AutocompleteID",
    data: data,
    success: function (data) {
        $('#search').html('');
        $('#search').append(data[0].Scheme_Code);
        $('#search').append(data[0].Scheme_Name);
    }
});

jQuery（函数（）{
var container=jQuery（“内容”）；
jQuery（容器）
肯多格里德先生({
可选：“单行”，
数据源：新建kendo.data.dataSource({
运输：{
阅读：{
url:“@url.Action（“GetMsgDetails”，“OutMessage”）”+“？msgId=“+msgId，
数据类型：“json”，
},
},
批次：对，
}),
可编辑：“弹出”，
栏目：[
{字段：“Id”，标题：“Id”，宽度：250，隐藏：true}，
{字段：“数据”，标题：“消息正文”，宽度：100}，
{字段：“手机”，标题：“手机号码”，宽度：100}，
]
});
});

---

嗨，daniel，当我使用上述代码时，我在查看页面中遇到了以下错误。“传递到字典中的模型项的类型为'f_AnonymousType3

1[System.Collections.Generic.List

1[Ported_LI.Models.Location]]”，但此字典需要'MyApp.Models.Location'类型的模型项。”。请进一步帮助。这正是我要找的。奇怪的是，正是视图进行了Json编码。我想控制器应该有这个功能。您的示例非常有用。@IAbstract如果您确实需要，可以将

Json.Encode

放入控制器中。我个人不会这么做，因为（1）你的控制器逻辑保持简单；（2） 规范表示为您提供了更大的灵活性。例如，您可以迭代集合，执行条件（例如，

if（Model.Locations.Any（））{…}

），等等）；如果在控制器中进行编码，则视图基本上被字符串卡住；（3）我认为控制器不应该对本质上的表示问题负责（即，在您看来，JSON的需求是由JavaScript决定的）。干杯。@DanielLiuzzi:很公平。我的观点并不纯粹；）。。。我承认并尊重公约。由于服务器实际上是将对象编码为json，并且视图可能会很快变得杂乱无章，因此我一直在考虑一个专用对象，在控制器本身之外将模型编码为json。但目前这还不在考虑之列。它可能是一个静态实用程序，以后会根据我们不断增长的需求而出现。干杯。在MVC 6（可能也是6）中，您需要使用

Json。序列化

而不是

Encode

。嗨，Darin，我已经尝试过您的方法，在访问查看页面时仍然提供下载对话。请说明您的代码的作用以及它如何回答问题。如果您得到一个代码片段作为答案，您可能不知道如何处理它。答案应该为OP和未来访客提供如何调试和修复问题的指导。指出代码背后的想法对理解问题、应用或修改解决方案有很大帮助。@Palec虽然我同意您的解释，并相信这会使代码片段成为更好的答案，但实际上，10K+和100K+回答者总是给出代码片段，这是毫无疑问可以接受的。因此，这个答案是合法的，因为网站目前的状况是合法的，除非管理理念有所改变。@demongolem我在VLQ审查队列中遇到了这个问题，发表了评论并进行了编辑；没有建议删除。事实上，代码片段的答案是正确的。我只是想就如何让它们变得更好提供指导。是我把它标记为“不是答案”，因为它令人困惑（代码片段中从任何地方复制/粘贴的代码都是无用的），没有解释，也可以很容易地作为一个评论，链接到

$.ajax

上的jQuery页面。我认为这不够有意义，不能成为一个实际的答案。我认为只有代码片段的答案在相关和自解释的情况下是可以的，但我认为这一个不适合这一要求。我尝试了附加（表中的行），但没有成功-suJson返回

$.ajax({
    dataType: "json",
    type: "POST",
    url: "/Home/AutocompleteID",
    data: data,
    success: function (data) {
        $('#search').html('');
        $('#search').append(data[0].Scheme_Code);
        $('#search').append(data[0].Scheme_Name);
    }
});

<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 },
         ]
     });
});