Rendering json data into a grid in asp.net mvc

Question

I am looking to populate my grid with JSON data. The data is in the below format:

[{
  "SiteId":"1",
  "SiteName":"University of Minessota",
  "SiteStatus":"Fully Operational"
},{
  "SiteId":"2",
  "SiteName":"MSP Airport-Humphrey",
  "SiteStatus":"Settlement Required"
},{
  "SiteId":"3",
  "SiteName":"City Of Minneapolis-Lot C",
  "SiteStatus":"Fully Operational"
},{
  "SiteId":"4",
  "SiteName":"TargetCenter",
  "SiteStatus":"Low Tickets"
},{
  "SiteId":"5",
  "SiteName":"Excel Energy Center",
  "SiteStatus":"Out Of Tickets"
}]

and i am passing this to the view using my controller method:

public JsonResult StatusReport()
{
    List<CenterStatus> status = MvcList.Models.CenterStatus.GetStatus();
    return this.Json(status, JsonRequestBehavior.AllowGet);
}

Now in my view I need to populate this JSON data into a grid:

$(document).ready(function () {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "CenterStatus/StatusReport.aspx",
        data: "{}",
        dataType: "json",
        success: function (data) {
            for (var i = 0; i < data.d.length; i++) {
                $("#GridView1").append("<tr><td>" + data.d[i].siteID + "</td><td>" + data.d[i].siteName + "</td><td>" + data.d[i].siteStatus + "</td></tr>");    
            }
    },
    error: function (result) {
        alert("Error");
    }
});

But I have no luck in achieving my goal so far. Any suggestions?

Inspect your response with one of the http tracing tools(Fidder, firebug etc.) and check your response. So you can tell us if it is a server side issue or a client side issue. — Efe Kaptan
– Efe Kaptan, Commented Jul 30, 2012 at 15:35
have you used jQuery Grid? stackoverflow.com/questions/11491459/… — Glenn Ferrie
– Glenn Ferrie, Commented Jul 31, 2012 at 3:10

Shyju · Accepted Answer · 2012-07-30 16:09:54Z

3

Do it like this. do not call append in a loop. Set it to a variable and call the html function only once.

success: function (data) {
                            var row=""
                            $.each(data,function(index,item){
                                row+="<tr><td>"+item.SiteName+"</td></tr>";
                            });
                            $("#GridView1").html(row);
                       },

Working sample : http://jsfiddle.net/x76LD/1/

answered Jul 30, 2012 at 16:09

Shyju

220k106 gold badges420 silver badges499 bronze badges

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

Comments

Danil Speransky · Accepted Answer · 2012-07-30 13:01:49Z

1

May be you should use just data instead of data.d in your success function.

answered Jul 30, 2012 at 13:01

Danil Speransky

30.5k6 gold badges70 silver badges78 bronze badges

1 Comment

Gromer Over a year ago

I agree. I've never had any issues using data (as opposed to data.d) with > ASP.Net MVC 1. Easy to do a console.log(data) in the Success to see the structure of the data.

Yngve B-Nilsen · Accepted Answer · 2012-07-30 13:00:36Z

0

I'm guessing the url: "CenterStatus/StatusReport.aspx", might have something to do with it. The correct url should probably be:

url: "/CenterStatus/StatusReport"

answered Jul 30, 2012 at 13:00

Yngve B-Nilsen

9,6762 gold badges38 silver badges51 bronze badges

Collectives™ on Stack Overflow

Rendering json data into a grid in asp.net mvc

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related