在视图内显示来自控制器的 json 数据答案

【问题标题】：display json data from controller inside view在视图内显示来自控制器的 json 数据
【发布时间】：2012-07-19 12:10:40
【问题描述】：

在我的控制器内部有一个 JsonResult 动作，它返回给我一个 House 对象的列表。我想使用 ajax onclick 来检索这些数据并在我的视图中显示 json 数据。在萤火虫内部，我能够看到正确的响应和 Json 结果，但我不知道如何在我的视图中显示。

function GetTabData(xdata) {
    $.ajax({
        url: ('/Home/GetTabData'),
        type: 'POST',
        contentType: 'application/json',
        data: JSON.stringify({ id: xdata }),

        success: function (result) {
           // tried with these but it doesnt work
           // result = jQuery.parseJSON(result);
           // alert(result.Title);
        },
        error: function () { alert("error"); }
    });
}

public JsonResult GetTabData()
{
   ...
   var temp = getMyData...
   return Json(temp, JsonRequestBehavior.AllowGet);   
}


  // View page
     <div id="showContent">
       // Json data should appear here
     </div>

success:function(result) 为空时在 firebug JSON 选项卡内我有以下数据：

Id  149

PropertyType    "Apartment"

StreetNumber    "202B"

CityName        "Sidney"

Title           "My test data"

【问题讨论】：

我猜这是一个 C#、.NET 和 ASP.NET MVC 问题（除了 Javascript、JSON）。请添加相应的标签。
@Codo - 不，不是。这是一个简单的 javascript 问题。
您问题中的某些代码既不是 Javascript 也不是 HTML。这是什么？
因为你已经被问到它是asp mvc3，但这与这个问题无关。

标签： c# javascript ajax json asp.net-mvc-3

【解决方案1】：

success: function (json) {
  var data = null;

  $.each(json.items,function(item,i){
    data = '<div>'+item.Id+ ' ' + item.CityName +'</div>';    
    $("#showContent").append(data);
 });

}

【讨论】：

【解决方案2】：

首先，您可以在 ajax 调用中指定 dataType 属性，然后不必再次解码 json 响应 -

dataType: 'json'

然后，您不需要使用 parseJSON。只需使用 result.Title 等。

 success: function (result) {
           alert(result.Title);
           var showContent = $('#showContent');
           showContent.html(result.Id+','+result.Title);
        },

【讨论】：

【解决方案3】：

编辑：正如 Mukesh 所说，您可以让 ajax 函数返回 json 而无需使用任何额外的解码。

ajax 调用结果已经是一个对象。你可以用它在成功函数中做任何你想做的事情。

例如，您可以在函数内部动态创建信息表，或者通过调用成功函数内部的函数将数据发送到另一个函数。一旦你离开了成功函数，数据就不再可用了。

像访问任何对象 (data.someProperty) 一样访问数据对象。

【讨论】：