Post
Ask Question

Let's Start With the ASP.Net Web API2

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

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • Select "Installed" -> "Templates" -> "Visual C#" -> "Web" and select ASP.NET Web Application.

    Select ASP.NET Web Application
  • From the ASP.Net project window select "Empty" and select the "Web API" check box.

  • Click on the "Create Project" button.

Step 2

Create a Model Class.

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select 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:

  • In the "Solution Explorer".

  • Right-click on the "Controller" folder.

  • Select "Add" -> "Scaffold".

    Select Scaffold

  • From the window select "Web API2 Controller- Empty'.

    Select Web API2 Controller

  • Click on the "Add" button.

    Change Name of Controller

  • Now change the name of the Controller and click on the "Add" button.

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:

  • Right-click on the project.

  • Select "Add" -> "New Item".

  • Select "Installed" -> "Visual C#" -> "Web".

  • Select "HTML Page".

  • Click on the "Add" button.

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


Similar Articles