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 { get; set; }
  4. public string UserName { get; set; }
  5. public string UserAddress { get; set; }
  6. public string UserMobile { get; set; }
  7. public string UserCountry { get; set; }
  8. }

Here is my controller code:

  1. using CreateSonsumeWebAPIInMVC.Models;
  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. }
  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.