Return JSON data from WebAPI Controller

Question

I want to return some JSON data from my WebAPI controller and I want the returned data to be like this.

{"rows":[{"id":1,"cell":["1","amila","amila","False"]},{"id":2,"cell":["2","rakhitha","rakhitha","False"]},{"id":3,"cell":["3","Chathura","Chathura","False"]},{"id":4,"cell":["4","Geethaga","Geethaga","False"]}]}

But when I use the below code,

return new System.Web.Mvc.JsonResult()
        {
            Data = jsonData,
            JsonRequestBehavior = System.Web.Mvc.JsonRequestBehavior.AllowGet
        };

the data is returned like this.

{"Data":{"rows":[{"id":1,"cell":["1","amila","amila","False"]},{"id":2,"cell":["2","rakhitha","rakhitha","False"]},{"id":3,"cell":["3","Chathura","Chathura","False"]},{"id":4,"cell":["4","Geethaga","Geethaga","False"]}]},"JsonRequestBehavior":0}

There is an additional JSON key as "Data". I dont want that parameter and as my implementation I cant remove this "Data" part after getting it to the client side. Because the data received from the server is directly used to fill a jqGrid. The code is below.

$("#Grid1").jqGrid({
            url: 'api/matchingservicewebapi/GetUser',
            datatype: 'json',
            mtype: 'GET',
            colNames: ['', 'Name', 'FullName', 'IsActive'],
            colModel: [
                { name: 'Id', index: 'Id', width: 200 },
                { name: 'Name', index: 'Name', width: 300 },
                { name: 'FullName', index: 'FullName', width: 300 },
                { name: 'IsActive', index: 'IsActive', width: 300 }
            ],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: '#pager',
            sortname: 'Id',
            viewrecoreds: true,
            sortorder: "desc",
            imgpath: 'Themes/images'
    }).navGrid(pager, { edit: true, add: true, del: true, refresh: true, search: true });

How do I remove this "Data" part? Because when you have this "Data" key in the returned JSON, jqGrid is not capable of filling that data to the grid.

I am using WebAPI Controller to return this data. But I tried using MVC3 controller, then this "Data" key was not in the returned JSON and data filled to the grid successfully. But I want to use WebAPI Controller. Please help to solve this.

Thank you in advance.

Mike Wasson · Accepted Answer · 2012-07-13 05:03:08Z

13

JsonResult is an MVC concept. For Web API, your controller can simply return a CLR object and it will be serialized into JSON (assuming the client asks for JSON).

The result you're seeing is because the entire JsonResult object is getting serialized into JSON.

To get started with Web API, see: http://www.asp.net/web-api/overview/getting-started-with-aspnet-web-api/tutorial-your-first-web-api

(Or you could continue to use an MVC controller ... is there a particular reason that you wanted to use a Web API controller?)

answered Jul 13, 2012 at 5:03

Mike Wasson

6,6322 gold badges26 silver badges20 bronze badges

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

Comments

bsentosa · Accepted Answer · 2013-01-11 14:22:21Z

4

Json.NET works well for me. Just return the JObject in the Web API

http://james.newtonking.com/projects/json/help/html/CreatingLINQtoJSON.htm

JObject o = JObject.FromObject(new
{
  channel = new
 {
   title = "James Newton-King",
   link = "http://james.newtonking.com",
   description = "James Newton-King's blog.",
   item =
       from p in posts
       orderby p.Title
       select new
       {
         title = p.Title,
         description = p.Description,
         link = p.Link,
         category = p.Categories
    }

} })

answered Jan 11, 2013 at 14:22

bsentosa

1761 silver badge3 bronze badges

Comments

Bharath · Accepted Answer · 2012-07-13 04:58:15Z

2

set jsonreader option in jqGrid. like

jQuery("#gridid").jqGrid({
...
   jsonReader : {root:"Data"},
...
});

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data#json_string

answered Jul 13, 2012 at 4:58

Bharath

8077 silver badges14 bronze badges

1 Comment

Thilok Gunawardena Over a year ago

Thanks a lot. It works for me. But is there a way to define if I do not have a root element. I mean like, jsonReader : {root:""}

Ashwin Singh · Accepted Answer · 2012-07-13 04:37:32Z

1

Use data.d instead of data in your code.

 success: function(data){
               //create jquery object from the response html
               var response=$(data.d);
               //Your binding logic here
          }

answered Jul 13, 2012 at 4:37

Ashwin Singh

7,3855 gold badges38 silver badges55 bronze badges

Comments

John · Accepted Answer · 2012-08-31 02:24:27Z

1

You can return the data in jqgrid required format. If you don't want to create a separate class for this, use dynamic return type in apicontroller. See working example here.

answered Aug 31, 2012 at 2:24

John

861 silver badge5 bronze badges

Collectives™ on Stack Overflow

Return JSON data from WebAPI Controller

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related