Wednesday, October 2, 2013

Custom Actions in WebApi


In previous few posts, we have seen how to call the default GET and POST actions. We need not to specify name to the action, just setting a request type would decide whether to call a GET action or a POST action. But often these defaults action cannot withstand complex demands. 
For instance, imagine we have two actions, one for creating Customer entries and other for Person. For that you have to create the POST actions as:

   1: // POST api/values
   2:  public string Post([FromBody]Customer value)
   3:  {
   4:      return value.Name;
   5:  }
   6:  
   7:  // POST api/values
   8:  public string Post([FromBody]Person value)
   9:  {
  10:      return value.Name;
  11:  }

As you can see, there are two overloaded POST actions. And believe me, making a POST request now, will ain’t call nothing. It is because of this, we need to create two different actions.


   1: // POST api/values
   2: public string CreateCustomer([FromBody]Customer value)
   3: {
   4:   return value.Name;
   5: }
   6:  
   7: // POST api/values
   8: public string CreatePerson([FromBody]Person value)
   9: {
  10:   return value.Name;
  11: }

Once our actions are ready we need to configure our WebApi’s configuration to let us call the custom actions too. For this, from the solution explorer, expand the App_start folder and open the WebApiConfig.cs file. Replace the function Register with exactly the same code below.


   1: public static void Register(HttpConfiguration config)
   2: {
   3:    config.Routes.MapHttpRoute(
   4:    name: "Action",
   5:    routeTemplate: "api/{controller}/{action}"
   6:     );
   7:  
   8:    config.Routes.MapHttpRoute(
   9:        name: "DefaultApi",
  10:        routeTemplate: "api/{controller}/{id}",
  11:        defaults: new { id = RouteParameter.Optional }
  12:    );
  13: }


This will allow us to call our custom functions too. Now last thing is to making call to the functions. It is very simple, here is the modified version of the code we have used in the previous posts.


   1: function Person() {
   2:     this.Name;
   3: }
   4:  
   5: function PostRequest() {
   6:     var person = new Person();
   7:     person .Name = "Neelma";
   8:     $.ajax({
   9:         url: 'http://localhost:42055/api/values/CreatePerson',
  10:         type: 'POST',
  11:         data: JSON.stringify(person),
  12:         contentType: "application/json",
  13:         success: function (data) {
  14:             var content = document.getElementById('contentApi');
  15:             var para = document.createElement("p");
  16:             var node = document.createTextNode(data);
  17:             para.appendChild(node);
  18:             content.appendChild(para);
  19:         }           
  20:     });
  21: }

Notice the modified URL and the Data in the ajax request. Which are now changed as per the actions they are pointing towards.

You can download the complete project from http://www.4shared.com/rar/2Cf3QUWV/HelloApi.html

Happy Coding!!!
Share this post

0 comments

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2013 Neelesh Vishwakarma
Posts RSS Comments RSS
Back to top