Get and Post Method in json Ajax in MVC

Get Method Call

I have to explain in 3 ways:

1. Simple Return the Message what you type on Textbox using JsonResult. The .cshtml Page Lokks Like:
   

   <script type="text/javascript">
       $(document).ready(function () {
        $('#SubmitName').click(function () {
               var url = "../Home/InputMessage";
               var name = $('#Name').val();
               $.get(url, { input: name }, function (data) {
                   $("#rData").html(data);
               });
           })
       });
   </script>
   <div>
       <p>
           Enter you name @Html.TextBox("Name")
   
           <input type="submit" id="SubmitName" value="Submit"/>
       </p>
       <p id="rData"></p>
   </div>

   Add the Method in Controller that simply return the Message.
   

   public string InputMessage(string input)
   {
      if (!String.IsNullOrEmpty(input))
         return "TextBox Value is =====> " + input + ".";
      else
         return "Please enter your name.";
   }

2. Using Textbox Filter the data.
   

   <h1>Filter Data With Get Metohod using Json Result</h1>
   <p id="rDataT"></p>
   <style>
       table, th , td {
           border: 1px solid grey;
           border-collapse: collapse;
           padding: 5px;
       }
       table tr:nth-child(odd) {
           background-color: #f1f1f1;
       }
       table tr:nth-child(even) {
           background-color: #ffffff;
       }
   </style>
   <p>
       Enter Filter @Html.TextBox("Filter")
   
       <input type="submit" id="GetCustomers" value="Submit"/>
   </p>
   <script type="text/jscript">
       $('#GetCustomers').click(function () {
           $.getJSON('../Home/GetStudentList/' + $('#Filter').val(), function (data) {
               var items = '
               <table>
                   <tr>
                       <th>Student Name</th>
                       <th>Student Admission Number</th>
                   </tr>';
                   $.each(data, function (i, item) {
                       items += "
                       <tr>
                           <td>" + item.StdName + "</td>
                           <td>" + item.AdmNo + "</td>
                       </tr>";
                   });
                   items += "
               </table>";
               $('#rDataT').html(items);
           });
       })
   
   </script>

   Also call the json result in controller : On the below i have Linq to SQL.
   

   public JsonResult GetStudentList(string id)
   {
      DataClasses1DataContext db = new DataClasses1DataContext();
      var result = from r in db.StudentMasters
      where r.StdName.StartsWith(id)
      select new { r.StdName, r.AdmNo };
      return Json(result, JsonRequestBehavior.AllowGet);
   }

3. On button Click get the Static Data.
   

   <input id="btnGet" type="button" value="Get Data From List" />
   <div>
       <div id="ajaxDiv"></div>
   </div>
   <script type="text/javascript">
       $(document).ready(function () {
           $('#btnGet').click(function () {
               $.getJSON("../Home/GetJsonData", null, function (data) {
                   var div = $('#ajaxDiv');
                   div.html("
                   <br/> " + "Fetch from json Static List: " + "
                   <br/>");
                   $.each(data, function (i, item) {
                       printPerson(div, item);
                   });
               });
           });
       });
       function printPerson(div, item) {
           var tbl = "";
           div.append("
           <br/>" + "FName: " + item.FirstName + ", LName: " + item.LastName);
           $.each(item.Addresses, function (i, addr) {
               printAddress(div, addr);
           });
       }
       function printAddress(div, item) {
           div.append("
           <br/>" + " " + "Address: " + item.currentAddress);
       }
   
   </script>

   In the controller class looks like:
   

   public JsonResult GetJsonData() {
       var persons = new List < Person > {
           new Person {
               Id = 1, FirstName = "Jayant",
               LastName = "Tripathy",
               Addresses = new List < Address > {
                   new Address {
                       currentAddress = "xyz"
                   },
               }
           },
           new Person {
               Id = 2, FirstName = "Sri",
               LastName = "Alex",
               Addresses = new List < Address > {
                   new Address {
                       currentAddress = "Delhi"
                   },
               }
           }
       };
       return Json(persons, JsonRequestBehavior.AllowGet);
   }

   Also add the property classes:
   

   public class Person
   {
      public int Id { get; set; }
      public string FirstName { get; set; }
      public string LastName { get; set; }
      public List<Address> Addresses { get; set; }
   }
   public class Address
   {
      public string currentAddress { get; set; }
   }

   The Final code of GET method .cshtml is:
   

   @{
   ViewBag.Title = "FormGet";
   }
   
   <!DOCTYPE html>
   <html>
       <head>
           <meta name="viewport" content="width=device-width" />
           <title>FormGet</title>
           <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
   rel="stylesheet" type="text/css"/>
           <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
       </head>
       <script type="text/javascript">
           $(document).ready(function () {
               $('#SubmitName').click(function () {
                   var url = "../Home/InputMessage";
                   var name = $('#Name').val();
                   $.get(url, { input: name }, function (data) {
                       $("#rData").html(data);
                   });
               })
           });
       </script>
       <body>
           <div>
               <p>
   Enter you name @Html.TextBox("Name")
   
                   <input type="submit" id="SubmitName" value="Submit"/>
               </p>
               <p id="rData"></p>
           </div>
   ------------------------------------------------------------------------------------------------------
   
           <h1>Filter Data With Get Metohod using Json Result</h1>
           <p id="rDataT"></p>
           <style>
               table, th , td {
                   border: 1px solid grey;
                   border-collapse: collapse;
                   padding: 5px;
               }
               table tr:nth-child(odd) {
                   background-color: #f1f1f1;
               }
               table tr:nth-child(even) {
                   background-color: #ffffff;
               }
           </style>
           <p>
   Enter Filter @Html.TextBox("Filter")
   
               <input type="submit" id="GetCustomers" value="Submit"/>
           </p>
           <script type="text/jscript">
               $('#GetCustomers').click(function () {
                   $.getJSON('../Home/GetStudentList/' + $('#Filter').val(), function (data) {
                   var items = '
                   <table>
                       <tr>
                           <th>Student Name</th>
                           <th>Student Admission Number</th>
                       </tr>';
                       $.each(data, function (i, item) {
                           items += "
                           <tr>
                               <td>" + item.StdName + "</td>
                               <td>" + item.AdmNo + "</td>
                           </tr>";
                       });
                       items += "
                   </table>";
                   $('#rDataT').html(items);
               });
           })
   
      </script>
   -----------------------------------------------------------
   
           <input id="btnGet" type="button" value="Get Data From List" />
           <div>
               <div id="ajaxDiv"></div>
           </div>
           <script type="text/javascript">
               $(document).ready(function () {
                   $('#btnGet').click(function () {
                       $.getJSON("../Home/GetJsonData", null, function (data) {
                           var div = $('#ajaxDiv');
                           div.html("
                           <br/> " + "Fetch from json Static List: " + "
                           <br/>");
                           $.each(data, function (i, item) {
                               printPerson(div, item);
                           });
                       });
                   });
               });
               function printPerson(div, item) {
                   var tbl = "";
                   div.append("
                   <br/>" + "FName: " + item.FirstName + ", LName: " + item.LastName);
                   $.each(item.Addresses, function (i, addr) {
                       printAddress(div, addr);
                   });
               }
               function printAddress(div, item) {
                   div.append("
                   <br/>" + " " + "Address: " + item.currentAddress);
               }
   
           </script>
       </body>
   </html>

   And the Controller class Look like:
   

   namespace jQuery_Ajax_GET_POST_MVC.Controllers {
       public class HomeController: Controller {
           //
           // GET: /Home/
           public ActionResult FormGet() {
               return View();
           }
           public string InputMessage(string input) {
               if (!String.IsNullOrEmpty(input)) return "TextBox Value is =====> " + input + ".";
               else return "Please enter your name.";
           }
           public JsonResult GetStudentList(string id) {
               DataClasses1DataContext db = new DataClasses1DataContext();
               var result = from r in db.StudentMasters
               where r.StdName.StartsWith(id)
               select new {
                   r.StdName, r.AdmNo
               };
               return Json(result, JsonRequestBehavior.AllowGet);
           }
           public JsonResult GetJsonData() {
               var persons = new List < Person > {
                   new Person {
                       Id = 1, FirstName = "Jayant",
                       LastName = "Tripathy",
                       Addresses = new List < Address > {
                           new Address {
                               currentAddress = "xyz"
                           },
                       }
                   },
                   new Person {
                       Id = 2, FirstName = "Sri",
                       LastName = "Alex",
                       Addresses = new List < Address > {
                           new Address {
                               currentAddress = "Delhi"
                           },
                       }
                   }
               };
               return Json(persons, JsonRequestBehavior.AllowGet);
           }
       }
       public class Person {
           public int Id {
               get;
               set;
           }
           public string FirstName {
               get;
               set;
           }
           public string LastName {
               get;
               set;
           }
           public List < Address > Addresses {
               get;
               set;
           }
       }
       public class Address {
           public string currentAddress {
               get;
               set;
           }
       }
   }

The output looks like for 3 result is:



POST Method Call

The .cshtml page like below:

@{
ViewBag.Title = "FormPost";
}

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>FormGet</title>
        <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    </head>
    <h2>FormPost</h2>
    <p>
Enter your First name

        <br />
@Html.TextBox("FirstName")

    </p>
    <p>
Enter your Last name

        <br />
@Html.TextBox("LastName")

    </p>
    <input type="button" value="Save" id="Save" />
    <span id="msg" style="color:red;"/>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#Save').click(function () {
                var url = "../Home/PostForm";
                var FirstName = $("#FirstName").val();
                var LastName = $("#LastName").val();
                $.post(url, { FirstName: FirstName, LastName: LastName }, function (data) {
                     $("#msg").html(data);
                });
            })
        });
    </script>
</html>

And the Controller class alike:

public ActionResult FormPost() {
    return View();
}
[HttpPost]
public string PostForm(string FirstName, string LastName) {
    if (!String.IsNullOrEmpty(FirstName) && !String.IsNullOrEmpty(LastName)) {
        //You can coding here to save the data from dtabase here
        // I just use for return the meassge only !
        return "Thank you " + FirstName + " " + LastName + ". Record Saved.";
    } else {
        return "Please input valid details";
    }
}

The Output of Post Method is: