display json data from controller inside view

Question

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"

I guess this is a C#, .NET and ASP.NET MVC question (in addition to Javascript, JSON). Please add the corresponding tags. — Codo
– Codo, Commented Jul 20, 2012 at 8:28
Some of the code in your question is neither Javascript nor HTML. What is it? — Codo
– 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
– Grunf, Commented Jul 20, 2012 at 8:33

voodoo417 · Accepted Answer · 2014-01-18 23:32:56Z

3

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

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

}

edited Jan 18, 2014 at 23:32

answered Jul 20, 2012 at 8:43

voodoo417

12.2k3 gold badges39 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mukesh Soni · Accepted Answer · 2012-07-20 08:36:07Z

2

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

answered Jul 20, 2012 at 8:36

Mukesh Soni

6,6683 gold badges34 silver badges38 bronze badges

Comments

Klemola · Accepted Answer · 2012-07-20 08:36:36Z

2

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).

answered Jul 20, 2012 at 8:36

Klemola

919 bronze badges

Collectives™ on Stack Overflow

display json data from controller inside view

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related