API is an Application Program Interface for either a web server or a web browser. ASP.NET Web API is a framework for building HTTP service for a wide range of devices. WEB API is very similar to ASP.NET MVC. It contains most of the MVC features like routing, controllers, action results, filter, model binders, etc.

Let us create a simple application using the WEB API 2.

Start Visual Studio and go to New Project, then click ASP.NET Web Application.

web

After selecting the option give a name to the web application and click OK. Another dialog box will appear. In that dialog box select Empty web page and check the WEB API option.

empty

Now the Empty web application is created in the project. Then add a class like the the following image.

add

Enter the following model code in the class file.

  1. public class StudentBasicDetails
  2. {
  3. public int stuID
  4. {
  5. get;
  6. set;
  7. }
  8. public string stuName
  9. {
  10. get;
  11. set;
  12. }
  13. public int stuAge
  14. {
  15. get;
  16. set;
  17. }
  18. }
In the above class it has the variable which acts like a data model to get and set the values for the variable.

Now add a new Scaffolded item in the created project.

project

After selectin an item it will open a dialog box which contains a list of Web API and MVC Entity Framework items. In that choose the WEB API 2 Controller - Empty. Here's the screenshot:

empty

Add the following methods in the Web Api 2 controller,
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  8. namespace ASPApi
  9. {
  10. public class StudentController: ApiController
  11. {
  12. StudentBasicDetails[] st = new StudentBasicDetails[]
  13. {
  14. new StudentBasicDetails
  15. {
  16. stuID = 1, stuName = "AAA", stuAge = 8
  17. },
  18. new StudentBasicDetails
  19. {
  20. stuID = 2, stuName = "BBB", stuAge = 9
  21. },
  22. new StudentBasicDetails
  23. {
  24. stuID = 3, stuName = "CCC", stuAge = 8
  25. },
  26. new StudentBasicDetails
  27. {
  28. stuID = 4, stuName = "DDD", stuAge = 8
  29. },
  30. new StudentBasicDetails
  31. {
  32. stuID = 5, stuName = "EEE", stuAge = 9
  33. },
  34. new StudentBasicDetails
  35. {
  36. stuID = 6, stuName = "FFF", stuAge = 8
  37. }
  38. };
  39. public IEnumerable < StudentBasicDetails > GetAll()
  40. {
  41. return st;
  42. }
  43. public IHttpActionResultGetStuID(intstuid)
  44. {
  45. var studet = st.FirstOrDefault((s) => s.stuID == stuid);
  46. if (studet == null)
  47. {
  48. return NotFound();
  49. }
  50. return Ok(studet);
  51. }
  52. }
  53. }
In the above controller I have added two methods; one is to return all the values and another one is to display on the specific value according to the input given by the user.

Now we will add a html page to call the API using AJAX. Ajax call can be made by using the jQuery. Go to the Solution Explorer window and right click the project to add new HTML Page like the following screenshot:

add

html

After adding the HTML page replace the HTML code with the following code.
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <title></title>
  6. <meta charset="utf-8" />
  7. </head>
  9. <body>
  10. <div>
  11. <h4>All Student List</h4>
  12. <ul id="AllStudent" />
  13. </div>
  14. <div>
  15. Student ID:<input id="GetId" type="text" /><input type="button" value="Search" onclick="GetStu();" />
  16. <p id="getStudent"></p>
  17. </div>
  18. <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
  19. <script>
  20. var link = 'api/Student';
  21. $(document)
  22. .ready(function()
  23. {
  24. $.get(link)
  25. .done(function(data)
  26. {
  27. $.each(data, function(i, val)
  28. {
  29. $("#AllStudent")
  30. .append("<li>Name: " + val.stuName + " Age: " + val.stuAge + "</li>")
  31. });
  32. });
  33. });
  34. function GetVal(studet)
  35. {
  36. return "Name: " + studet.stuName + " , Age: " + studet.stuAge
  37. }
  38. function GetStu()
  39. {
  40. varstuid = $("#GetId")
  41. .val();
  42. $.getJSON(link + '/' + stuid)
  43. .done(function(data)
  44. {
  45. $("#getStudent")
  46. .text(GetVal(data))
  47. })
  48. .fail(function()
  49. {
  50. alert("data not found");
  51. });
  52. }
  53. </script>
  54. </body>
  56. </html>

You can view the code from the GitHub link.

Final Output

output

Read more articles on ASP.NET: