AJAX or Asynchronous Javascript and XML is used for communication between the client and the server.Using AJAX the parts of a web page can be updated without a full page refresh.This not only results in less data transfer but also results in a better experience for the end user.
AJAX is very common on the web pages today.As users are constantly demanding better experience from the web applications.So by implementing AJAX in our MVC views we can provide experience similar to a desktop application.
jQuery provides different methods for using ajax.We can use the following Jquery methods for data exchange between the client and the server
- get() Fetches the data from the server using HTTP Get method.
- post() Fetches the data from the server using HTTP Post method.
- ajax() Fetches the data from the server using HTTP Get method or HTTP Post method.
- load() Fetches the data from the server and displays in an element.
As you can see above get() and post() method corresponds to GET and POST HTTP requests.While ajax() method can be used for either GET or POST HTTP request.
get() and post() methods are called the shorthand methods since they actually use the Jquery ajax() method behind the scenes.We will see how to use the ajax() method in a later post.
By using these methods we can easily make the asynchronous calls to our action methods ,pass and fetch the data from action methods.
jQuery get and post ajax methods in MVC
We can use jQuery get and post ajax methods in MVC application to call action methods.It is a convenient way to implement ajax functionality in MVC applications.
Calling action method using get()
To use these methods we need to include the jquery library in our view.It’s better to include it in the shared _Layout view if we are going to use it in many different views. We can include the library using the cdn as below
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js”></script>
We define the action method which we will be calling using the jquery get method.We are returning a string from our action method which we will display in our view.
[HttpGet]
public string GetMessage()
{
return "Hello ";
}
We can call the GetMessage action method in the Home controller as
$(document).ready(function () {
$("#btnSubmit").click(function () {
var url = "Home/GetMessage";
$.get(url, function (data) {
$("#result").html(data);
});
});
});
The first parameter in the get() method is the url of the action method ,the second is the callback function which is called when the data is returned from the server.
We will be calling the action method on the click of a button and will display the results in a span element.
Next we add the span and the button.
On the click of the button the action method is called and returns the data which we display in the span.
In the above get() method we are not passing any data to the action method.We can pass data to the action method as:-
$.get(url, { name: "ashish" }, function (data) {
$("#result").html(data);
});
The important thing is that the name of the property in the javascript object ,passed to the get method, should match the name of the model properties.This is required to populate the action method parameter object with corresponding values from the javascript object .The callback method receives a parameter which contains the returned value.
We get the following data when we call the action method using the $.get() method.The “Hello” string is returned by our action method which we display in a span.
Calling action method using post()
We can call the action method using the jquery post method on the button click as
$("#btnSubmit").click(function () {
var url = "Home/GetMessage";
$.post(url, function (data) {
$("#result").html(data);
});
Similar to the get() method we are passing the callback function as an argument to the post method which will get the returned value in a parameter.
As now we are calling the action method using the jquery post() method we need to remove the [HttpGet] attribute from the action method
public string GetMessage()
{
return "Hello ";
}
If we need to pass the complex data to the form we can specify it in a JSON object variable and pass it as an argument to the post() method
var employeeModel = { "name": "Ashish", "address": "AddrXYZ", "salary": "SalXYZ", "id": "idXYZ" }
$.post("@Url.Action("EmployeeDetails", "Home")", employeeModel, function (data) {
$("#result").html(data);
});
The properties which we define the employeeModel object are same as the properties in the model object.
We have defined our form as
@using (Html.BeginForm("EmployeeDetails", "Home", FormMethod.Post, new { id = "frm" }))
{
@Html.DisplayFor(x => x.id)
@Html.DisplayFor(x => x.name)
@Html.DisplayFor(x => x.address)
@Html.DisplayFor(x => x.salary)
}
When we click the submit button the values which we have defined for the employeeModel object are passed to the action method parameter.
Though we have assigned the static values to the JSON object but we can assign the form element values to the object using the $(“#id”).val() method so that the actual values are passed to the action method.
To return the Json object from the action method we can use the Json helper method.In the below method we are returning the status message in a json object.
[HttpPost]
public ActionResult EmployeeDetails(Employee details)
{
return Json(new {message="Updated!" });
}
We can display the returned json object’s value in the callback function as
function (data) {
$("#result").html(data.message);
});
The post() and get() methods are quite similar.But the difference is that while the get() method makes the request using HTTP GET the post method uses HTTP POST.So get() method should be used when we need to fetch the data from the action method while post() method should be used when we need to update the data.
Leave a Reply