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:

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:

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 { get; set; }
  10. public string name { get; set; }
  11. public string Address { get; set; }
  12. public double salary { get; set; }
  13. }
  14. }

Step 4

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

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:

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