How to make an ajax call that reverses a string ?

How to make an ajax call that reverses a string ?

How to make an ajax call that reverses a string ?  

it does not do the ajax call, but goes straight into the controller reversethestring...
            i am getting a  null reference exception ...string array is empty */

            $.ajax({
                type: "GET",
                url: './ReverseTheString',
                data: { input: 'abc'},
                dataType: "json",
                async: true,
                success: function (result) {
                    $("#result2").html(result);
                }
            });



In home controller i have  :


        public string ReverseTheString(string input)
        {
            char[] arr = input.ToCharArray();
            Array.Reverse(arr);
            return new string(arr);
        }


Index.cshtml:


  2. @{
  3.     Layout = null;
  4. }



  8. <!-- -->

  10. <!DOCTYPE html>
  11. <html>
  12. <head>

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

  16.     <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>

  18.     <script>

  20.         $(document).ready(function () {
  21.             $("#button1").click(function () {

  23.                 $.ajax({

  25.                     type: 'GET',
  26.                    
  27.                     url: '@Url.Action("HelloAjax" , "Home")',
  28.                     success: function (result) {

  30.                         $("#div1").html(result);

  32.                     }

  34.                 });  // closes the ajax


  37.             });  // closes click function



  41.             
  42.             $("#button2").click(function () {

  44.                 $.ajax({

  46.                     type: 'GET',
  47.                     data: { a: 1, b: 2 },
  48.                     url: '@Url.Action("Sum" , "Home")',
  49.                     success: function (result) {

  51.                         $("#div3").html(result);

  53.                     }

  55.                 });  // closes the ajax


  58.             });  // closes click function














  73.             // data: is the data returned by the controller

  75.             var url = "/Home/ReverseTheString";
  76.             var stringToReverse = "Bob Cravens";
  77.             $.get(url, { input: stringToReverse }, function (data) {
  78.                 $("#div4").html(data);
  79.             });




  84.             $(".sum").click(function () {

  86.                 $.ajax({

  88.                     type: 'GET',
  89.                     data: { a:1 , b:2} , 
  90.                     url: '@Url.Action("Sum" , "Home")',
  91.                     success: function (result) {

  93.                         $("#div3").html(result);

  95.                     }

  97.                 });  // closes the ajax


  100.             });  // closes click function

  102.         
  103.              

  105.             /* this part does not work , it does not do the ajax call, but goes straight into the controller reversethestring...
  106.             null reference exception ...string array is empty */

  108.             $.ajax({
  109.                 type: "GET",
  110.                 url: './ReverseTheString',
  111.                 data: { input: 'abc'},
  112.                 dataType: "json",
  113.                 async: true,
  114.                 success: function (result) {
  115.                     $("#result2").html(result);
  116.                 }
  117.             });




  122.             // . IS ALREADY THE HOME FOLDER... /HOME/HOME

  124.             var formData = { name: "ravi", age: "31" }; //Array 

  126.             $.ajax({
  127.                 url: "./Index ",
  128.                 type: "POST",
  129.                 data: formData,
  130.                 success: function (data, textStatus, jqXHR) {

  132.                     $("#div3").html("abbb");

  134.                     //data - response from server
  135.                 },
  136.                 error: function (jqXHR, textStatus, errorThrown) {

  138.                 }
  139.             });





  145.             $.post('superman', { field1: "hello", field2: "hello2" },
  146.     function (returnedData) {
  147.         console.log(returnedData);
  148.     });
  149.    


  152.         });       // closes document ready function
  153.     </script>





  159.     <script>

  161.         var url = "/Home/GetDateTimeString";
  162.         $.get(url, null, function (data) {
  163.             $("#div2").html(data);
  164.         });




  169.         var url = "/Home/sum";
  170.         $.get(url, null, function (data) {
  171.             $("#div7").html(data);
  172.         });




  177.         var url = "/Home/RegisterUser";
  178.         var first = "Bob";
  179.         var last = "Cravens";
  180.         $.post(url, { firstName: first, lastName: last }, function (data) {
  181.             $("#div5").html(data);
  182.         });


  185.         var f = $("#myForm");
  186.         var url = f.attr("action");
  187.         var formData = f.serialize();
  188.         $.post(url, formData, function (data) {
  189.             $("#div6").html(data);
  190.         });




  195.         // works if div 7,div8,div9 are changed to div4,div5,div6 

  197.         var url = "/Home/GetContactInfo";
  198.         var id = 123;
  199.         $.getJSON(url, { personId: id }, function (data) {
  200.             $("#div7").html(data.FirstName + " " + data.LastName);
  201.             $("#div8").html(data.State);
  202.             $("#div9").html(data.Age);
  203.         });



  207.         var url = "/Home/MyPartialView";
  208.         var info = "This is my information."

  210.         

  212.         // note : data is the return data from the controller , we have to specify it here as a parameter for function
  213.         $.get(url, null, function (data) {
  214.             $("#div1").html(info);
  215.         });


  218.     </script>



  222.         <title>A study of population dynamics</title>


  225.     </head>
  226.     <body>


  229.         <div class="container">
  230.             <form id="myForm" action="/Home/FormPost" method="post">


  233.                 <div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>

  235.                 <div id="div2"><h2>Let jQuery AJAX Change This Text</h2></div>

  237.                 <div id="div3"><h2>Let jQuery AJAX Change This Text</h2></div>

  239.                 <div id="div4"><h2>Let jQuery AJAX Change This Text</h2></div>


  242.                 <div id="div5"><h2>Let jQuery AJAX Change This Text</h2></div>

  244.                 <div id="div6"><h2>Let jQuery AJAX Change This Text</h2></div>

  246.                 <div id="div7"><h2>Let jQuery AJAX Change This Text</h2></div>

  248.                 <div id="div8"><h2>Let jQuery AJAX Change This Text</h2></div>

  250.                 <div id="div9"><h2>Let jQuery AJAX Change This Text</h2></div>

  252.                 <a  href="#" class= "sum"> Sum </a>

  254.                 <div id="result2"><h2>  "result2 "</h2></div>

  256.                 <div>First Name: <input name="FirstName" type="text" value="Bob" /></div>
  257.                 <div>Last Name: <input name="LastName" type="text" value="Cravens" /></div>
  258.                 <div>Age: <input name="Age" type="text" value="43" /></div>
  259.                 <input type="submit" value="Save Contact" />
  260.                 <div id="postResult">?</div>
  261.             </form>


  264.         </div>

  266.             <button  id="button1">Get External Content</button>


  269.             <button  id="button2"  >Get External Content</button>












  282. </body>
  283.     </html>