Call AJAX Method in MVC

Kailash Chandra Behera | Wednesday, May 25, 2016

Introduction

This blog demonstrates how to call AJAX method in mvc with example, it also explains about AJAX method and their various types.

Getting Started

AJAX functions or methods are used to get data from server, in MVC it is used to call actions of the controller. There are two types of methods commonly uses for a request-response between a client and server or you can say also for calling action of controller in MVC. These are like.

  • GET :- Get method is used to Request data from a specified resource but return cached data.
  • POST :- POST method is used to Submits data to be processed to a specified resource, the POST method NEVER caches data, and is often used to send data along with the request.

Many difference are available between GET and POST, I have discussed the measure differences available between GET and POST in the below table.


GET
POST

Security

It is less security, because the data we are sending with request is part of URL that means the data will be display to every one in the URL.
It is more security than get, because the data we are sending are not stored in browser history or in web server logs.

Data Type

Get method supports only ASCII characters.
There is no restriction of data type in post method, you can send binary data as well.

Data Length

AS the get method sending data with URL and maximum URL length is 2048 characters, there restriction in length of data while sending with request.
There is no restriction while sending and receiving data in post method.

Encoding Type

It support only on encoding that is application/x-www-form-urlencoded
It uses multiple encoding for binary data and it used application/x-www-form-urlencoded or multipart/form-data for remaining.

Cached

The GET method may return cached data.
The POST method NEVER caches data, and is often used to send data along with the request.

History

Parameters are saved in history in get method.
Parameters are not saved in history in post method.

Bookmarked

Get method supports bookmark,mean you can bookmark the request in get method.
Post method does not supports bookmark feature that mean request can not be bookmarked.

BACK button/Reload

It will be harmless, if you do reload of your web page

Each time data will be submitted to the server, when reload happens or back button presses.

Syntax

 $.ajax({  
     type:,  
     url:,  
     data:,  
     contentType:,  
     dataType:,  
     success: function(response){  
     }  
      error: function (xhr, error) {  
      }  
   });

In the above code syntax Type is used for define type of method you want to use. The URL contains the path of server means in the MVC it contains path of action of the controller. The data takes parameter or parameter what to send with request.

The ContentType and DataType is optional parameter, if you do not specify ajax method will apply default of the each. The Success function will execute when you request get success and the Error function will be executed when error occurs while request or response.

Example

 function getcustomerName(id) {  
       var val = $(String('#' + id)).is(":checked");  
       $.ajax({  
         type: "POST",  
         url: '/Customer/Index',  
         data: { cid: id},  
         success: function (data) {  
           alert('Customer Name:-' + data)  
         },  
         error: function (xhr, error) {  
           alert(xhr.responseText);  
         }  
       });

Above code calls Index action of Customer controller in MVC using ajax POST method and provides id of customer in parameter(cid), When request gets success it will display name of customer or if it gets error will display the error message.

Summary

In this blog, we discussed about ajax methods like Get and post and their differences, It also demonstrates how to use ajax method. Hope you have got the discussion clearly.

Thanks

By at