Introduction

In this article, I will use Web API2. It explains how to create your Web API2 Application in Visual Studio 2013.

The Web API2 is the second version of the Web API. In the original Web API there were two ways to create a response, the first one is to return a specific object instance, then it was changed to an "HttpResponseMessage" by the Web API pipeline. The other was the response could be returned as a raw "HttpResponseMessage".

But the Web API2 includes a new way for creating the response, "IHttpActionResult".

Now let's see the example of creating the Web API2 application using Visual Studio 2013.

Step 1

Step 2

Create a Model Class.

Add the following code:

  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 WebApplication2.Models;
  8. namespace WebApplication2.Controllers
  9. {
  10. public class CustomersController : ApiController
  11. {
  12. Customer[] customers = new Customer[]
  13. {
  14. new Customer { ID = 1, Name = "Smith",Address = "Kanpur", contact = 7859 },
  15. new Customer { ID = 2, Name = "Jhon", Address = "Lucknow", contact = 2345 },
  16. new Customer { ID = 3, Name = "Tanya", Address = "Delhi", contact = 6748 }
  17. };
  18. public IEnumerable<Customer> GetAllCustomers()
  19. {
  20. return customers;
  21. }
  22. public IHttpActionResult GetCustomer(int id)
  23. {
  24. var customer = customers.FirstOrDefault((p) => p.ID == id);
  25. if (customer == null)
  26. {
  27. return NotFound();
  28. }
  29. return Ok(customer);
  30. }
  31. }
  32. }

In the code above we use the "IHttpActionResult" method in the Web API2. It is the new way for creating the response in the Web API2.

Step 3

Create a Controller:

Add the following code:

  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 WebApplication2.Models;
  8. namespace WebApplication2.Controllers
  9. {
  10. public class CustomersController : ApiController
  11. {
  12. Customer[] customers = new Customer[]
  13. {
  14. new Customer { ID = 1, Name = "Smith",Address = "Kanpur", contact = 7859 },
  15. new Customer { ID = 2, Name = "Jhon", Address = "Lucknow", contact = 2345 },
  16. new Customer { ID = 3, Name = "Tanya", Address = "Delhi", contact = 6748 }
  17. };
  18. public IEnumerable<Customer> GetAllCustomers()
  19. {
  20. return customers;
  21. }
  22. public IHttpActionResult GetCustomer(int id)
  23. {
  24. var customer = customers.FirstOrDefault((p) => p.ID == id);
  25. if (customer == null)
  26. {
  27. return NotFound();
  28. }
  29. return Ok(customer);
  30. }
  31. }
  32. }

Step 4

Add an HTML page to the project as in the following:

Add the following code:

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <title></title>
  5. </head>
  6. <body>
  7. <div>
  8. <h2>All Customers</h2>
  9. <ul id="customers" />
  10. </div>
  11. <div>
  12. <h2>Search by ID</h2>
  13. <input type="text" id="custId" size="5" />
  14. <input type="button" value="Search" onclick="find();" />
  15. <p id="customer" />
  16. </div>
  17. <script src="Scripts/jquery-2.0.3.min.js"></script>
  18. <script>
  19. var uri = 'api/customers';
  20. $(document).ready(function () {
  21. $.getJSON(uri)
  22. .done(function (data) {
  23. $.each(data, function (key, prds) {
  24. $('<li>', { text: formatItem(prds) }).appendTo('#customers');
  25. });
  26. });
  27. });
  28. function formatItem(prds) {
  29. return prds.Name +' '+ prds.contact;
  30. }
  31. function find() {
  32. var id = $('#custId').val();
  33. $.getJSON(uri + '/' + id)
  34. .done(function (data) {
  35. $('#customer').text(formatItem(data));
  36. })
  37. .fail(function (jqXHR, textStatus, err) {
  38. $('#customer').text('Error: ' + err);
  39. });
  40. }
  41. </script>
  42. </body>
  43. </html>

Step 5

Execute the application:

Get All Customers

Get the Customer by ID.

Customer Search By ID.jpg