Post
Ask Question

GET Method in Web API Using JavaScript

Introduction

This article explains the GET method in Web API 2. A web uses this method when we want to get something from the Web API. Here we use the Get method for reading the student details from the controller by the JavaScript and jQuery.

Now let's see the examples of the GET HTTP method.

Step 1

  • Start Visual Studio 2013.
  • From the Start Window select "New Project".
  • Select "Installed" -> "Templates" -> "Visual C#" -> "Web" and select "ASP.NET Web Application".

    Select Web Application

  • Click on the "OK" button.

    Select Web API

  • From the ASP.Net project window select "Web API".
  • Click on the "Create Project" button.

Step 2

Add a model class:

  • In the "Solution Explorer".
  • Right-click on the Model Folder.
  • Select "Add" -> "Class".
  • Select "Installed" -> "Visual C#" and select class.

    Add Model Class

  • Click on the "OK" button.

Add some code as in the following:

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. namespace GetMethodAPI.Models  
  6. {  
  7.     public class Student  
  8.     {  
  9.         public int ID { get; set; }  
  10.         public string Name { get; set; }  
  11.     }  
  12. }  

 

Step 3

  • In the "Solution Explorer".

  • Right-click on the "Controller" folder.

  • Select the "Controller" and from the controller window select "Common" -> "Web API".

    Select Web API2 Controller

  • Select the "Web API2 Empty Controller" and click on the "Add" button.

    Name of controller

  • Change the name and click on the "Add" button.

Add the following code:

 

  1. using GetMethodAPI.Models;  
  2. using System;  
  3. using System.Collections.Generic;  
  4. using System.Linq;  
  5. using System.Net;  
  6. using System.Net.Http;  
  7. using System.Web.Http;  
  8. namespace GetMethodAPI.Controllers  
  9. {  
  10. public class StudentsController : ApiController  
  11. {  
  12. Student[] student = new Student[]  
  13. {  
  14. new Student{ID=1,Name="Student1"},  
  15. new Student {ID=1,Name="Student2"},  
  16. };  
  17. // GET api/values  
  18. public IEnumerable<Student> GetAllStudents()  
  19. {  
  20. return student;  
  21. }  
  22. }  
  23. }  

 

Step 4

Now add an HTML page to write the code of the JavaScript.

  • In the "Solution Explorer".
  • Right-click on the "Project".
  • Select "Add" -> "New Item".
  • From the Installed window select "Visual C#" -> "Web".

    Add HTML Page

  • Then select "HTML" page and click on the "OK" button.

Add the following code:

  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title></title>  
  5. </head>  
  6. <body>  
  7. <div>  
  8. <h2>All Students</h2>  
  9. <ul id="students" />  
  10. </div>  
  11. <script src="Scripts/jquery-1.10.2.min.js"></script>  
  12. <script>  
  13. var uri = 'api/students';  
  14. $(document).ready(function () {  
  15. $.getJSON(uri)  
  16. .done(function (data) {  
  17. $.each(data, function (key, prds) {  
  18. $('<li>', { text: formatItem(prds) }).appendTo('#students');});  
  19. });  
  20. });  
  21. function formatItem(prds) {  
  22. return prds.Name;  
  23. }  
  24. </script>  
  25. </body>  
  26. </html>  

Step 5

Execute the application:

Get All Detail


Similar Articles