How to Write jQuery AJAX Call in ASP.NET MVC

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.

Click here to download jQuery

<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.