6. How To Use AJAX in ASP. NET MVC C# | Jquery | AJAX | ASPHero

Welcome to next tutorial on HOW TO USE AJAX IN ASP.NET MVC. At first open up index.chtml of Views/Home/index.cshtml .We will make a ajax call to retrive a square of supplied number dynamically without reloading the wholwe page. Now write the following code :

@*Welcome to asp.net mvc tutorial about uploading images*@

@*Now we are in Views/Home/index.cshtml*@

@*at first lets include a jquery file for ajax which is already provided by

    asp.net mvc as default*@

<script src="~/Scripts/jquery-1.10.2.js"></script>

@*otherwise you can download latest from jquery.com*@



<div style="margin:5px;">

<span>Supply a number to get square of it using AJAX</span>

    <br />

    <input type="number" id="supplied_number"/>

    <br /><br />

    <input type="button" value="Show" id="show_button"/>

    <br /><br />

    <div id="updating_div">Result</div>



</div>



@*lets write our script for ajax call*@



<script>

    $(document).ready(function () {

        $("#show_button").click(function () {

            sNumber = $("#supplied_number").val();

            $.ajax({

                type:"post",

                url: "/Home/square",

                data: { number: sNumber },

                success: function (data) {

                    $("#updating_div").html("Result : " + data.result);

                }

               

            });

        });

    });

   

</script>

@*now lets move to controller action*@

Now we need to make a function in controller action to return square number in json format.

 public ActionResult square(int number) //parameter must be same as supplied

        {

            int squaredResult = number * number;

            return Json(new { result = squaredResult }, JsonRequestBehavior.AllowGet);

            //thats it to finish our job :) lets run

        }

That's enough to make a ajax call. In return controller action is returning result in json form which is displayed in updating div.Hope you guys learn the concept. Stay tuned for more tutorials, to be more clear you can watch this video too. Thanks :)