RESTful Service Using MVC WEB API

In this blog you will learn about RESTful Service using MVC WEB API.

Introduction

In this article, I am going to explain how to create RESTful Service, using ASP.NET Web API.

What is REST?

REST stands for Representational State Transfer. It is a software design pattern, introduced as an alternative to SOAP-based data exchange, and is a way for programs to talk over the web.

What is Web API?

In its simplest form, a Web API is an API over the web (HTTP) and ASP.NET Web API is a framework that allows you to build Web APIs, i.e. HTTP-based services on top of the .NET Framework.

It contains only the following 4 methods to do the operations.

• GET
• POST – insert
• PUT – update
• DELETE

Steps to Create Application

1. Create Web API Application.
   
   
   
   
   
   
2. Add a class and its properties for creating in-memory object.
   
   
   
   
   

   namespace WebApiRestfulService.Models
   {
       public class CustomerCore
       {
           public int Id { get; set; }
           public string Name { get; set; }
           public string Address { get; set; }
       }
   }

3. Create Controller with API read/write action template. Note that here, we are adding API Controller so it's extending the ApiController.
   
   
   
   
   
   
   
   
4. Create some new customer records using Controller constructor class.
   

   CustomerCore[] customers = new CustomerCore[]
   {
       new CustomerCore{Id=1001, Name="Ramakrishna Basagalla", Address="Hyderabad"},
       new CustomerCore{Id=1002, Name="Praveenkumar", Address="Hyderabad"},
       new CustomerCore{Id=2001, Name="Rakesh", Address="Bangalore"},
       new CustomerCore{Id=2002, Name="Puneeth", Address="Bangalore"},
       new CustomerCore{Id=1003, Name="Prashanth", Address="Hyderabad"},
       new CustomerCore{Id=1004, Name="Shiva",Address="Hyderabad"}
   };

5. Update the below code to get the customer values.
   

   // GET api/customer
   public IEnumerable<CustomerCore> GetCustomers()
   {
       return customers;
   }
   
   // GET api/customer/5
   public CustomerCore GetCustomerById(int id)
   {
       var customer = customers.FirstOrDefault((c) => c.Id == id);
       if (customer == null)
       {
           throw new HttpResponseException(HttpStatusCode.NotFound);
       }
       return customer;
   }

6. Execute the project. The Web API Service will return the values in form of JSON. We can see the values based on its id. It uses the second method to return these values.
   
   Note: If you browse the same URL using Chrome browser, you can see that in .xml format.
   
   
   
   
   
   http://localhost:64072/api/customer/1001
   
   
   
   
   
   
   
7. Create an HTML page to access the service data.
   
   
   

   <table>
       <tr>
           <td>
               <div>
                   <h2>All Customers</h2>
                   <div id="myDiv"></div>
               </div>
           </td>
           <td>
               <div>
                   <h2>Search Customer By Id</h2>
                   <input type="text" id="txtCustId" />
                   <input type="button" id="btnSearch" value="Search" onclick="FindCustomer();" />
                   <p id="pCustomer"></p>
               </div>
           </td>
       </tr>
   </table>

8. Here, on page load, I am retrieving the customer details using AJAX call.
   
   Here, we are passing the URL (api/customer/) to get the data. After success, we are generating it into list.
   

   <script type="text/javascript">
   $(document).ready(function () {
       // Get all customers
       $.getJSON("api/customer/",
           function (data) {
               $.each(data, function (key, val) {
                   $('#myDiv').append("<ul id='ul" + val.Id + "'>" + val.Name + "</ul>");
                   $("#ul" + val.Id).append("<li>" + val.Id + "</li>");
                   $("#ul" + val.Id).append("<li>" + val.Address + "</li>");
   
               });
           });
   });
   
   // Get Customer by Id
   function FindCustomer() {
       var id = $("#txtCustId").val();
       $.getJSON("api/customer/" + id,
           function (data) {
               $('#pCustomer').empty();
               $('#pCustomer').append("<ul id='pul" + data.Id + "'>" + data.Name + "</ul>");
               $("#pul" + data.Id).append("<li>" + data.Id + "</li>");
               $("#pul" + data.Id).append("<li>" + data.Address + "</li>");
           });
   }
   </script>

Hope this article helps you in understanding the Web API concepts.