Web API With AJAX: Return Various Data Types From Web API Service

You are in the "Web API with AJAX" article series. In our previous articles we have understood various concepts and the practical implementation of AJAX requests to the Web API. We have learned the concept of various HTTP verbs and the consumption of a Web API service using those verbs using the ajax() jQuery function. You can go through all of them by navigating to the following links.

In this article we will see the real beauty of the Web API, Ha..Ha.., Yes the Web API is quite beautiful without make-up (read configuration) than other services like WCF and a traditional WebService. That's nice, but the real power of the Web API is that it's content type negotiation. In other words, it can serve any type (Oh, not any type but in a different flavor) content to the client end depending on the demand of the client and that's the demand of various electronic gadgets. Now a days people are using various portable devices to browse web applications and their demanded content type is also different and the Web API is smart enough to fulfill their demands. How? Please continue your job (reading).

Return JSON data from Web API

In this example we will learn to return JSON data from the Web API. Nothing to learn here, by default the Web API returns JSON data if the client does not specify any demand type. Have a look a the Web API part, we will not configure anything (in another example also) and we will tune only the client part. Here is a sample example.

Implementation of Web API

This is the Web API implementation. From the Get() method we are returning a collection of person classes. Pretty simple to implement.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using TestWEB_API.Models;

namespace TestWEB_API.Controllers

{

public class person

{

public string name { get; set; }

public string surname { get; set; }

}

public class ValuesController : ApiController

{

// GET api/values

public List<person> Get()

{

List<person> List = new List<person>();

person p1 = new person();

p1.name = "Sourav";

p1.surname = "Kayal";

List.Add(p1);

person p2 = new person();

p2.name = "Sourav";

p2.surname = "Kayal";

List.Add(p2);

return List;

}

}

Implementation of client part

In the jQuery ajax() function we are not providing any content type or data type. So by default it will return JSON data as expected.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWEB_API.WebForm1" %>

<!DOCTYPE html>

$(document).ready(function () {

$("#click").click(function () {

$.ajax({

url: 'http://localhost:11129/api/values',

type: 'GET',

success: function (data, textStatus, xhr) {

console.log(data);

error: function (xhr, textStatus, errorThrown) {

console.log(textStatus);

}

}).done(function () {

});

</script>

</head>

<body>

</form>

</body>

</html>

Oh yes. It's returning JSON data from the Web API. The data is in the form of a JavaScript object.

Implementation of client part

Return XML data from Web API

Now in this example we will demand a XML representation of the data to the Web API. And again, for that we will not perform any extra make up for the Web API. Here is the code implementation.

The client part is here that will call the Web API. And we are seeing that we have specified the dataType is "xml" and the contentType is "application/rss+xml"; in other words it's demanding XML data to the service application.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWEB_API.WebForm1" %>

$(document).ready(function () {

$("#click").click(function () {

$.ajax({

url: 'http://localhost:11129/api/values',

type: 'GET',

dataType: 'xml',

ContentType:"application/rss+xml",

success: function (data, textStatus, xhr) {

console.log(data);

error: function (xhr, textStatus, errorThrown) {

console.log('a' + textStatus);

}

}).done(function () {

});

</script>

</head>

<body>

</form>

</body>

</html>

The Web API part is the same as the example above. We did not make any changes here.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using TestWEB_API.Models;

namespace TestWEB_API.Controllers

{

public class person

{

public string name { get; set; }

public string surname { get; set; }

}

public class ValuesController : ApiController

{

// GET api/values

public List<person> Get()

{

List<person> List = new List<person>();

person p1 = new person();

p1.name = "Sourav";

p1.surname = "Kayal";

List.Add(p1);

person p2 = new person();

p2.name = "Sourav";

p2.surname = "Kayal";

List.Add(p2);

return List;

}

}

Ok, in the output, we are getting data in the form of XML. Now it's the client application's duty to parse and process it.

Return XML data from Web API

Get data in plain text format

There might be some client that likes neither JOSN nor XML, it's taste is different and it's like plain text data. The Web API is also capable of fulfilling their demand. Here is the sample example of that.

The implementation of the client part is here, we are seeing that the dataType is "text", in other words the client application demands data in plain text format.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="TestWEB_API.WebForm1" %>

$(document).ready(function () {

$("#click").click(function () {

$.ajax({

url: 'http://localhost:11129/api/values',

type: 'GET',

dataType: 'text',

ContentType:"application/xml",

success: function (data, textStatus, xhr) {

console.log(data);

error: function (xhr, textStatus, errorThrown) {

console.log('a' + textStatus);

}

}).done(function () {

});

</script>

</head>

<body>

</form>

</body>

</html>

Still we did not change our API implementation.

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;

using TestWEB_API.Models;

namespace TestWEB_API.Controllers

{

public class person

{

public string name { get; set; }

public string surname { get; set; }

}

public class ValuesController : ApiController

{

// GET api/values

public List<person> Get()

{

List<person> List = new List<person>();

person p1 = new person();

p1.name = "Sourav";

p1.surname = "Kayal";

List.Add(p1);

person p2 = new person();

p2.name = "Sourav";

p2.surname = "Kayal";

List.Add(p2);

return List;

}

}

Ok, the data is coming in "text" format. Look, the style of the representation is the JSON format but it's type is plain text, not in the form of a JavaScript object.

Get data in plain text format

Conclusion

The more you demand, the more you get. The expectation from people is coming to the IT farm, expectation from the IT farm is coming to developer and the expectation from developers is coming to Service-based applications. Ha..Ha.. Be happy, Keep Happy.

12 Comments

Join the conversation! Your thoughts help the community grow.

hari om8y ago
As per my understanding By defualt web api returns xml data, and ajax return json type data type. for example if we do not consume web api with any client and run simple web api on browser as a application we can see get method by deafult returns xml data. and if we want to change datatype json than we can change and result will get in json.
Tasneem P11y ago
I want to know how to get post methods's return value to know succes or failure
Jaganathan Bantheswaran12y ago
Is there any update?
Jaganathan Bantheswaran12y ago
I may suggest you to split this article into two parts. 1. Web API With AJAX: Return Various Data Types From Web API Service[ return different types from Web API]. 2. Web API With AJAX: Handling Different Data Types in AJAX with Web API [handles the response [using dataType in ajax call] whatever returned from API].
Sourav Kayal12y ago
dear Jaganathan, can you suggest any relevant title, then it will help me to take farther step.
Jaganathan Bantheswaran12y ago
Is there any update or my comment is wrong?
Pramod Lawate12y ago
excellent ......superb.......article keep updating us .
Jaganathan Bantheswaran12y ago
yes Sourav, i read your content completely But your title & content is misleading the users. Conversion to specified data type like JSON, XML, HTML, TEXT, SCRIPT is done at CLIENT side NOT at Server Side [Web API] in your examlpe. So there is nothing with the WebAPI to data type conversion here in your content. Please change the Title as well as the content
- Vithal Wadje12y ago
  yes Jaganathan right..lots of misleading contents and tiltle not in this article but all articles why he was improving i dont know..but just leave it
Sourav Kayal12y ago
dear Jaganathan, from client part we are requesting data type, please read the full content.
Preet Singh12y ago
very nice article... :)
Jaganathan Bantheswaran12y ago
I am confused. Whether the Web API is returning the different types of data or jQuery ajax parses the result in different types as specified in dataType property of ajax call ?