Getting the Result of ASP.NET Web API in XML Format

Introduction

In this article, we will define the process of displaying the Web API output in Notepad in XML form.

Now we will define the procedure for displaying the output in XML form.

Step 1

First we create the project:

  • Open the Visual Studio 2012 click on "File" -> "New" -> "Project..."
  • In the template Window select "Visual C#" -> "Web"
  • Select ASP. NET MVC4 Application
  • And then change the name of the application to "hello" and click on the "OK" button
hel.jpg

From the next ("New ASP. NET MVC 4 Project") window select "Web API" and then click on the "OK" button.

hel1.jpg

Step 2

In the second step we add the model class to our project using the following:

  • In the Solution Explorer
  • Right-click on the Model Folder then click on  "Add"
  • Select the class
  • Change the name of the class to Detail and click on the "OK" button
clas.jpg

clas1.jpg

Step 3

Write this code in the "Detail.cs" class:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace hello.Models  
  6. {  
  7.     public class Detail  
  8.     {  
  9.         public int id { getset; }  
  10.         public string name { getset; }  
  11.         public string Address { getset; }  
  12.         public double salary { getset; }  
  13.     }  
  14. }   

Step 4

Now we add the controller to our project using the following:

  • On the Solution Explorer
  • Right-click on the Controller folder then select "Add"
  • Click on "Controller"
  • Change the name of controller to "DetailController"
  • And in the Template select "Empty API Controller" and click on the "OK" button.
control.jpg

control1.jpg

Step 5

Now add this code to the DetailController.cs Class:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Net;  
  5. using System.Net.Http;  
  6. using System.Web.Http;  
  7. using hello.Models;  
  8. namespace hello.Controllers  
  9. {  
  10.     public class DetailController : ApiController  
  11.     {  
  12.         Detail[] details = new Detail[]  
  13.         {  
  14.             new Detail{id = 1,name="smith", Address="Delhi", salary=50000},  
  15.             new Detail{id = 2,name="John",Address="Kanpur",salary= 40000},  
  16.         new Detail {id = 3,name="Manya",Address="Lucknow",salary=480000}  
  17.         };  
  18.         public IEnumerable<Detail> GetAllDetails()  
  19.         {  
  20.             return details;  
  21.         }  
  22.         public Detail GetDetailById(int Id)  
  23.         {  
  24.             var detail = details.FirstOrDefault((I) => I.id == Id);  
  25.             if (detail == null)  
  26.             {  
  27.                 throw new HttpResponseException(HttpStatusCode.NotFound);  
  28.             }  
  29.             return detail;  
  30.         }  
  31.         public IEnumerable<Detail> GetItemsByAddress(string add)  
  32.         {  
  33.             return details.Where(  
  34.                 (I) => string.Equals(I.Address, add,  
  35.                     StringComparison.OrdinalIgnoreCase));  
  36.         }  
  37.     }  
  38. } 

Step 6

Select the Index.cshtml file using the following:

  • On the Solution Explorer
  • Click on "Home" folder; there is an Index.cshtml file.
  • Double-click on this file.
index.jpg

Now add the following code to this file:

  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.     <title>ASP.NET Web API</title>  
  5.     <link href="../../Content/Site.css" rel="stylesheet" />  
  6.     <script src="~/Scripts/jquery-1.7.1.min.js"></script>  
  7.         <script type="text/javascript">  
  8.             $(document).ready(function () {  
  9.                 $.getJSON("api/detail/",  
  10.                 function (data) {  
  11.                     $.each(data, function (key, val) {  
  12.                         var str = val.name + ': $' + val.salary;  
  13.                         $('<li/>', { text: str })  
  14.                         .appendTo($('#detail'));  
  15.                     });  
  16.                 });  
  17.             });  
  18.             function find() {  
  19.                 var id = $('#detId').val();  
  20.                 $.getJSON("api/detail/" + id,  
  21.                     function (data) {  
  22.                         var str = data.name + ': $' + data.salary;  
  23.                         $('#detail').text(str);  
  24.                     })  
  25.                 .fail(  
  26.                     function (jqXHR, textStatus, err) {  
  27.                         $('#detail').text('Error: ' + err);  
  28.                     });  
  29.             }  
  30.         </script>  
  31. </head>  
  32. <body id="body" >  
  33.     <div class="main-content">  
  34.         <div>  
  35.             <h1>Showing All Items</h1>  
  36.             <ul id="details"/>  
  37.         </div>  
  38.         <div>  
  39.             <label for="detId">ID:</label>  
  40.             <input type="text" id="detId" size="5"/>  
  41.             <input type="button" value="Search" onclick="find();" />  
  42.             <p id="detail" />  
  43.         </div>  
  44.     </div>  
  45. </body>  
  46. </html> 

Step 7

Debug the Application and in the URL write the http://localhost:32266/api/detail.

Then it shows the result on browser in XML form.

 result.jpg