jQuery Ajax Call in Asp.net MVC with Example

In this article we will see how to write jQuery ajax call in asp.net mvc with Example step by step. we will require jquery library which is free

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);
         }

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.

  <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, //data that we are going 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
             }
         });
     });

namespace ajaxExample.Models
 {
     public class Register
     {
         public string Email { get; set; }
         public string Password { get; set; }
     }
 }

         [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);
             }
     }

Output

If you have any doubts you can write me in comments, I will try to help you

If you like this post then please share with your friends or colleagues.