GET method to call Web-API using jQuery ajax

Sourav.Kayal
Posted by in ASP.NET MVC category on for Beginner level | Points: 250 | Views : 31611 red flag

In this article, we will learn how to call Web-API service using jQuery AJAX method.

GET method to call Web-API using JQuery AJAX

In this article we will understand how to call Web-API using JQuery AJAX function. We know that Web-API is new version of Microsoft’s service oriented application. It comes associated with MVC-4 template. Web-API has built on top of MVC architecture, so we can think that it is sub set of MVC architecture. It’s fully RESTful service which can consume by HTTP verb. If you are not aware about HTTP verb then this small discussion is for you.

  • GET:- when we click one any link generally we make GET request to server. To get GET any resource we have to make GET request.
  • POST:- When we want to POST data to server we have to make POST request.
  • PUT:- This request is needed when we want to make update operation to server.
  • DELETE:- We can perform delete operation  when we want to delete any resource.

As we have now understood the basic idea about RESTful service now we will understand how to make AJAX call with Web-API.

 

Create client application to AJAX call

In this example we will create JQuery ajax() function to call Web-API. We know that to make AJAX call we have to include JQuery library and in this example we have loaded this library from our local system. Here is code implementation of ajax() function.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JSON.aspx.cs" Inherits="MvcApplication1.JSON" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <script src="Scripts/jquery-1.7.1.js"></script>
 
    <script>
        $(document).ready(function () {
            $.ajax({
                url: 'http://localhost:3002/api/values',
                type: 'GET',
                dataType: 'json',
                success: function (data, textStatus, xhr) {
                    console.log(data);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log('Error in Database');
                }
            });
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
    </div>
    </form>
</body>
</html>

 In URL parameter we have specified the actual URL of RESTful service and we are making GET call to API. The data type is specified as “JSON” means when data will send from server, it will send as JSON format. We have specified two callback functions into ajax method. The success callback will get fire if the call completes successfully otherwise error function will get execute.

 Create Web-API in MVC

Now we will create Web-API in MVC project template. So, open one MVC-4 web application and choose Web-API template from that. We will find that the few default dummy controllers are present in application. In this example we have modified the Values controller and kept GET method into it.

The GET method will return array of string in JSON format.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
 
namespace MvcApplication1.Controllers
{
    public class ValuesController : ApiController
    {
        // GET api/values
        public IEnumerable<string> Get()
        {
            return new string[] { "value1", "value2" };
        }
 
      
    }
}

Point to be noted in Web-API is that it serializes data automatically no explicit serialization is needed to send data through HTTP response. Web-API returns message in JSON format so that the return data is very less. But in case of SOAP based service there is lot of data overhead in message.

Here is output of above example.


Conclusion:-

In this article we have learned to call Web-API using GET method. Hope you have understood the concept of both ajax() function and Web-API. In coming article we will explore more about Web-API and AJAX call. 


Page copy protected against web site content infringement by Copyscape

About the Author

Sourav.Kayal
Full Name: Sourav Kayal
Member Level: Silver
Member Status: Member,MVP
Member Since: 6/20/2013 2:09:01 AM
Country: India
Read my blog here http://ctrlcvprogrammer.blogspot.in/
http://www.dotnetfunda.com
I am .NET developer working for HelixDNA Technologies,Bangalore in healthcare domain. Like to learn new technology and programming language. Currently working in ASP.NET ,C# and other microsoft technologies.

Login to vote for this post.

Comments or Responses

Posted by: Anke99 on: 10/9/2018 | Points: 25
For this most important tool bar works http://solitairetimes.com which is at the top of the website and easy to implement it into our work. And no other files are required for this website and never wants any permission for allow your work.

Login to post response

Comment using Facebook(Author doesn't get notification)