jQuery Ajax Name in Asp.internet MVC with Instance – CSharpnet

On this article we’ll see learn how to write jQuery ajax name in asp.internet mvc with Instance step-by-step. we would require jquery library which is free

Click on right here to obtain jQuery

<h2>Ajax GET Instance</h2>
<hr/>
<br/>
<h3>my identify is : <span id="identify"></span></h3>
<br/>
<enter id="btnName" kind="button" worth ="Get Identify">

<script src="https://www.csharpnet.co.in/jquery-ajax-call-in-asp-net-mvc-with-example/~/Scripts/jquery-3.4.1.min.js"></script>
<script>
$("#btnName").on("click on", operate () {
         $.ajax({
             url: "/residence/getname",   //url of {controller/motion}
             kind: "get",  //kind of request (http verb)
             success: operate (response) {
                  // on profitable response
                 $("#identify").html(response);
             },
             error: operate (xhr) {
                   //on error response
             }
         });
     });
</script>

public JsonResult GetName()
         {
             return Json("ankit", JsonRequestBehavior.AllowGet);
         }

Output

2. POST kind Ajax Name

POST kind ajax name is used once we wish to submit type information or person inputs to the backend aspect.

  <h1>Ajax POST Instance </h1>
 <hr />
 <div class="row">
     <div class="col-lg-5">
         <type id="registerForm">
             <div class="form-group">
                 <label for="e-mail">E-mail deal with:</label>
                 <enter kind="textual content" class="form-control" identify="E-mail">
             </div>
             <div class="form-group">
                 <label for="password">Password:</label>
                 <enter kind="password" class="form-control" identify="Password">
             </div>
             <button kind="submit" class="btn btn-default">Submit</button>
         </type>
     </div>
     <div class="col-lg-6">
         <h4 id="standing"></h4>
         <div id="divResponse" fashion="show:none">
         <div class="form-group">
             Your E-mail is : <label id="spnEmail"></label>
         </div>
         <div class="form-group">
             Password: <label id="spnPass"></label>
         </div>
             </div>
     </div>
 </div>             

$("#registerForm").on("submit", operate (e) {
         e.preventDefault(); //to stop web page reload on type submit
         var formData = $(this).serialize();
         $.ajax({
             url: "/residence/Register",  //url of {controller/motion}
             kind: "POST",  //kind of request (http verb)
             information: formData, //information that we're going to submit
             success: operate (response) {
                 if (response == false) {
                     // error message
                     $("#divResponse").conceal();
                     $("#standing").html("oops one thing went mistaken!")
                 }
                 else {
                    //displaying outcomes 
                     $("#divResponse").present();
                     $("#standing").html("person efficiently registered!")
                     $("#spnEmail").html(response.E-mail);
                     $("#spnPass").html(response.Password)
                 }
             },
             error: operate (xhr) {
               //on error response
             }
         });
     });

namespace ajaxExample.Fashions
 {
     public class Register
     {
         public string E-mail { get; set; }
         public string Password { get; set; }
     }
 }

         [HttpPost]
         public ActionResult Register(Register register)
         {
             if (register != null && register.E-mail != null && register.Password != null)
             {
                 //your code to register person
                 return Json(register, JsonRequestBehavior.AllowGet);
             }
             else
             {
                 return Json(false, JsonRequestBehavior.AllowGet);
             }
     }

Output

If in case you have any doubts you possibly can write me in feedback, I’ll attempt that can assist you

In case you like this publish then please share with your pals or colleagues.