Create and Consume Web API in MVC 4

In this article, you will learn how to create a MVC Web API and how to consume using JSON.

Why User Web API

Web API is a framework that makes it easy to build HTTP services that reach a broad range of clients, including browsers and mobile devices. The ASP.NET Web API is an ideal platform for building REST applications on the .NET Framework.

Getting Started

Create a new project in Visual Studio 2012 and select ASP.NET MVC 4 Web Application and select Web API template and click OK.

Here is my UserModel Class:

  1. public class UserModel  
  2. {  
  3.     public int UserId { getset; }  
  4.     public string UserName { getset; }  
  5.     public string UserAddress { getset; }  
  6.     public string UserMobile { getset; }  
  7.     public string UserCountry { getset; }  
  8. }  

Here is my controller code:

  1. using CreateSonsumeWebAPIInMVC.Models;  
  2.   
  3. public class ValuesController : ApiController  
  4. {  
  5.         // GET api/values  
  6.         public IEnumerable<UserModel> Get()  
  7.         {  
  8.             return new UserModel[]  
  9.             {  
  10.                 new UserModel()  
  11.                 {  
  12.                     UserId= 1,  
  13.                     UserName = "Raj Kumar",  
  14.                     UserAddress = "New Delhi",  
  15.                     UserMobile = "9899461650",  
  16.                     UserCountry = "India"  
  17.                 },  
  18.                 new UserModel()  
  19.                 {  
  20.                     UserId= 2,  
  21.                     UserName = "Mahesh Chand",  
  22.                     UserAddress = "Philadelphia",  
  23.                     UserMobile = "610-484-5670",  
  24.                     UserCountry = "USA"  
  25.                 },  
  26.                 new UserModel()  
  27.                 {  
  28.                     UserId= 3,  
  29.                     UserName = "Stephen Hoffman",  
  30.                     UserAddress = "New York",  
  31.                     UserMobile = "610-484-5680",  
  32.                     UserCountry = "USA"  
  33.                 },  
  34.                 new UserModel()  
  35.                 {  
  36.                     UserId= 4,  
  37.                     UserName = "Deepak Malhotra",  
  38.                     UserAddress = "Brisbane",  
  39.                     UserMobile = "610-487-5680",  
  40.                     UserCountry = "Australia"  
  41.                 },  
  42.                 new UserModel()  
  43.                 {  
  44.                     UserId= 5,  
  45.                     UserName = "John Lehman",  
  46.                     UserAddress = "Johansburg",  
  47.                     UserMobile = "610-187-5680",  
  48.                     UserCountry = "South Africa"  
  49.                 }  
  50.             };  
  51.         }  
  52.    
  53.         // GET api/values/5  
  54.         public UserModel Get(int id)  
  55.         {  
  56.             return new UserModel()  
  57.             {  
  58.                 UserId = id,  
  59.                 UserName = "Raj Kumar",  
  60.                 UserAddress = "New Delhi",  
  61.                 UserMobile = "9899461650"  
  62.             };  
  63. }  
If you want to see the output, then you need to type the URL like this:

http://localhost:49012/api/values

The result in XML format looks like this:

img1.jpg

Image 1.

http://localhost:49012/api/values/1

img2.jpg

Image 2.

Now let's consume this on a view using JSON.

  1. @section scripts{  
  2.     <script type="text/javascript">  
  3.         $(document).ready(function () {  
  4.             $('#Search').click(function () {  
  5.                 $('#users').empty();  
  6.                 $.getJSON("/api/values"function (data) {  
  7.                     $.each(data, function (i, user) {  
  8.                         alert(i);  
  9.                         //alert(user.UserName);  
  10.                         var content = user.UserId + ' ' + user.UserName;  
  11.                         content = content + ' ' + user.UserAddress + ' ' + user.UserMobile + ' ' + user.UserCountry;  
  12.                         alert(content);  
  13.                         $('#users').append($('<li>', { text: content }, '</li>'));  
  14.                     });  
  15.                 });  
  16.             });  
  17.         });  
  18.     </script>  
  19. }  
  20. <div>  
  21.     <div>  
  22.         <h1>User Listing</h1>  
  23.         <input id="Search" type="button" value="Get Users" />  
  24.     </div>  
  25.     <div>  
  26.         <ul id="users"></ul>  
  27.     </div>  
  28. </div> 

Now run the application to see the output:
img3.jpg

Image 3.