Inside my controller there is JsonResult action which returns me a list of House object. I want onclick using ajax to retrieve these data and to display json data inside my view. Inside firebug I'm able to see proper Response and Json result but I dont know how to display inside my view.

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>

Inside firebug JSON tab when success:function(result) is empty I have following data:

Id  149

PropertyType    "Apartment"

StreetNumber    "202B"

CityName        "Sidney"

Title           "My test data"

Inside my controller there is JsonResult action which returns me a list of House object. I want onclick using ajax to retrieve these data and to display json data inside my view. Inside firebug I'm able to see proper Response and Json result but I dont know how to display inside my view.

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>

Inside firebug JSON tab when success:function(result) is empty I have following data:

Id  149

PropertyType    "Apartment"

StreetNumber    "202B"

CityName        "Sidney"

Title           "My test data"

• c#
• javascript
• ajax
• json
• asp-mvc-3

Share Improve this question Follow edited Jul 20, 2012 at 8:30 Grunf asked Jul 20, 2012 at 8:24 GrunfGrunf 47288 silver badges2121 bronze badges 4

• I guess this is a C#, .NET and ASP.NET MVC question (in addition to Javascript, JSON). Please add the corresponding tags. – Codo Commented Jul 20, 2012 at 8:28
• @Codo - No it's not. It's plain javascript question. – Mukesh Soni Commented Jul 20, 2012 at 8:29
• Some of the code in your question is neither Javascript nor HTML. What is it? – Codo Commented Jul 20, 2012 at 8:31
• cause you are already asked it is asp mvc3, but that's irrelevant to this question. – Grunf Commented Jul 20, 2012 at 8:33

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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

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

}

First of all, you can specify the dataType attribute in your ajax call to 'json' and then don't have to decode the json response again -

dataType: 'json'

Then, you don't need to use parseJSON. Simply use result.Title etc.

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

EDIT: As Mukesh said, you can have the ajax function return json without using any extra decoding.

The ajax call result is already an object. You can do whatever you want with it it inside the success function.

For example you could create a table of the information dynamically inside the function, or send the data to another function by calling the function inside that success function. Once you leave the success function, the data is not usable anymore.

Access the data object like any object (data.someProperty).