Using Web Api in MVC 4

Introduction

The Web API (Application Programming Interface) feature is based on a special kind of controller to an MVC framework application, it's normally as we do in MVC :). An API controller distinguishes itself from the normal controllers by the following:

Action methods return a model rather than an ActionResult in MVC, objects.

Action methods are selected based on the HTTP method used in the request. (We will elaborate on this a bit ahead as we go. :))

The model objects that are returned from an API controller action method are encoded as JSON/XML based on the browsers used and then sent to the client.

Background

We work using the normal MVC4 framework, choosing an empty template. There is also a Web API template but we cannot get to understand the procedure using that. Let's get deeper into the following procedure in the Code section.

Using the code

A Web API application is just a regular MVC framework app with the addition of a special kind of controller. Let's start with a small Demo for a better understanding. Let's go step-by-step.

Creating the Model and Repository

public interface IReservationRepository{
   IEnumerable<Reservation> GetAll();
   Reservation Get(int Id);
   Reservation Add(Reservation item);
   void Delete(int id);
   bool Update(Reservation item);
}

The GetAll() method is of Enumerable type of Reservation since it expects a list of items as output. The Get(Id) method is of type Reservation and expects an item that matches the Id ed/specified. The Add(item) method is also a Reservation type since it adds a new item to the properties of the Reservation entity. The Delete method simply deletes/removes the item with Id ed. The Update method is a boolean type as if the model state is valid and if the update is successful it returns true.

public class ReservationRepository : IReservationRepository {
   private List<Reservation> data = new List<reservation> {
      new Reservation {ReservationId = 1, Name = "ABC", Location = "London"},
      new Reservation {ReservationId = 2, Name = "XYZ", Location = "US"},
      new Reservation {ReservationId = 3, Name = "MNC", Location = "Paris"}
   };

   private static ReservationRepository repo = new ReservationRepository();
   public static IReservationRepository getRepository(){
      return repo;
   }
   public IEnumerable GetAll(){
      return data;
   }
   public Reservation Get(int Id){
      var matchedItem = data.where(x => x.ReservationId == Id);
      return matchedItem.FirstOrDefault();
   }

   public Reservation Add(Reservation item){
      item.ReservationId = data.Count() + 1;
      data.Add(item);
      return item;
   }

   public void Delete(int is){
      Reservation item = Get(id);
      if(item != null){
      data.Delete(item);
      }
   }

   public bool Update (Reservation item){
      Reservation Item = Get(item.ReservationId);
      if(Item != null){
         Item.Name = item.Name;
         Item.Location = item.Location;
         return true;
      }
      else{
         return false;
      }
   }
}

public class ReservationController:ApiController{
   IReservationRepository repo = ReservationRepository.getRepository();
   public IEnumerable<Reservation> GetAllReservation()
   {
      return repo.GetAll();
   }
   public Reservation GetReservation(int id)
   {
      return repo.Get(id);
   }
   public Reservation PostReservation(Reservation item)
   {
      return repo.Add(item);
   }

   public bool PutReservation(Reservation item)
   {
      return repo.Update(item);
   }
   public void deleteReservation(int id)
   {
      reo.Delete(id);
   }
}

Let's start creating an Empty template MVC application and name it ReservationDemo. Since we have an empty MVC project then we only get Models, Controllers and Views as an empty folder :)

We add a model class as Reservation.cs into the Models folder. The Code snippet is as in the following:

public class Reservation
{
   //Added the properties to the Reservation entity
   public int ReservationId {get; set;} // Uniquely identifies each model object.
   public string Name {get; set;}
   public string Location {get; set;}
}

Now we add an interface IReservationRepository.cs into the models folder again. The code snippet is as in the following.

Now let's add a Repository class to the Models itself that implements the interface IReservationRepository. The code snippet is as in the following. (Remember we are adding here into the models folder.)

The Home Controller is a normal controller created to return the main view page to our app. We just add a view to its Index()ActionResult method.

Creating API Controller

Add a controller, right-click on the controllers folder in the SolutionExplorer and select Add Controller from the popup menu. Change the controller name to ReservationController and select Empty API Controller from the Template drop-down menu. The Code snippet is as in the following.

The game after this is with the jQuery where the data results are bound on the AJAX calls.

Points of Interest

This is an interesting concept, using API that returns JSON results that can be used to bind data in the viewpage easily, using knockoutJs, BackboneJs.

History

I will soon post the data-bind using Knockout/Backbone Js. I hope this helps beginners like me.