In this article, we will see how to write a jQuery AJAX call in ASP.NET MVC.
Prerequisites
- ASP.NET MVC
- jQuery library
Step 1: Add jQuery library
In your ASP.NET MVC project, add the jQuery library to the project. You can do this by adding a reference to the jQuery library in the project’s References folder.
or
You can also download jQuery Scripts and place it in /Scripts folder of your ASP.NET MVC project. click on below link to download jQuery.
Mainly there are two types of jQuery ajax call :
- GET
- POST
1. GET type Ajax Call
GET type of ajax call is used when we want to fetch data based on Id or without Id. In Get type of call we can’t push form data. we can just fetch data based on Id.
Here is an example of GET AJax call:
<h2>Ajax GET Example</h2>
<hr/>
<br/>
<h3>my name is : <span id="name"></span></h3>
<br/>
<input id="btnName" type="button" value ="Get Name">
<script src="~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$("#btnName").on("click", function () {
$.ajax({
url: "/home/getname", //url of {controller/action}
type: "get", //type of request (http verb)
success: function (response) {
// on successful response
$("#name").html(response);
},
error: function (xhr) {
//on error response
}
});
});
</script>
public JsonResult GetName()
{
return Json("ankit", JsonRequestBehavior.AllowGet);
}
In above example Index.cshtml have Ajax call which will trigger on click of button “Get Name”.
by clicking on button it will trigger AJAX call and call HomeController/GetName
method and will return static text “ankit”.
For the demo purpose I have returned a static text "ankit"
but you can write business logic and return anything as JSON response.JsonRequestBehavior.AllowGet
is mandatory for pushing data as json response otherwise you may face issue while accessing the response result of the function.
Output

2. POST type Ajax Call
POST type ajax call is used when we want to submit form data or user inputs to the backend side. inputs data does not gets appended to the AJAX call URL. but it sends Inputs data as request body.
here we are using ASP.NET MVC as backend.
So for better understanding let’s see below AJAX call example:
<h1>Ajax POST Example </h1>
<hr />
<div class="row">
<div class="col-lg-5">
<form id="registerForm">
<div class="form-group">
<label for="email">Email address:</label>
<input type="text" class="form-control" name="Email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" name="Password">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="col-lg-6">
<h4 id="status"></h4>
<div id="divResponse" style="display:none">
<div class="form-group">
Your Email is : <label id="spnEmail"></label>
</div>
<div class="form-group">
Password: <label id="spnPass"></label>
</div>
</div>
</div>
</div>
$("#registerForm").on("submit", function (e) {
e.preventDefault(); //to prevent page reload on form submit
var formData = $(this).serialize();
$.ajax({
url: "/home/Register", //url of {controller/action}
type: "POST", //type of request (http verb)
data: formData, //formData to submit
success: function (response) {
if (response == false) {
// error message
$("#divResponse").hide();
$("#status").html("oops something went wrong!")
}
else {
//showing results
$("#divResponse").show();
$("#status").html("user successfully registered!")
$("#spnEmail").html(response.Email);
$("#spnPass").html(response.Password)
}
},
error: function (xhr) {
//on error response
}
});
});
In above code you can see two code example,
One is HTML code block
Second is Javascript code block
You can place both HTML and Javascript code in a Single file Index.cshtml or any .cshtml page you have.
Now let’s say I want to submit all user input of form which id is registerForm
. so for that I will use $(this).serialize()
which will collect all the user inputs of form.
And In above Javascript Code you see that I am collecting form data of FORM registerForm
in a variable named formData
which is on line no:3 of Javascript code and passing that formData to the data: property of ajax call.
The data
property is used to pass the input data to the controller action. The controller action will then process the data and return a response.
namespace ajaxExample.Models
{
public class Register
{
public string Email { get; set; }
public string Password { get; set; }
}
}
In above code block we can see that, we have created a model named “Register” for parsing formData inputs as a model class.
parsing of formData to model class done automatically by .NET MVC. but name of model properties should be same as formData input name.
[HttpPost]
public ActionResult Register(Register register)
{
if (register != null && register.Email != null && register.Password != null)
{
//your code to register user
return Json(register, JsonRequestBehavior.AllowGet);
}
else
{
return Json(false, JsonRequestBehavior.AllowGet);
}
}
In above ActionMethod
of HomeController, register
parameter type of Register
class contains the data sent by AJAX call.
And we are validating here that if the data sent by AJAX call is null or not, after validating the request we are pushing the same request model as JSON response.
Again, JsonRequestBehavior.AllowGet
is mandatory. so we can read data on completion of AJAX call.
Output

In above output, we are submitting a Email Address
and Password
through as AJAX call and as a response the page displaying the submitted input values without reloading the page.
Conclusion
In this article, we have seen how to write a jQuery AJAX call in ASP.NET MVC in details step by step in both way GET and POST type.
I hope you found this article helpful. If you have any questions, please feel free to leave a comment below.
If you like this post then please share with your friends or colleagues.