how to call controller's function using Ajax call

See more:

MVC

jQuery

HTML5

Hi..

I am newbie to MVC tech. I want to call a simple method of a controller. Here it is what I did so far.

on change event of dropdownlist I am calling the controller's function.

<script>
    $(document).ready(function () {
        $('#ChangeStatus').change(function () {

            //debugger;
            var selectVal = $('#ChangeStatus option:selected').val().toString();
            var selecttext = $('#ChangeStatus option:selected').text().toString();


            $.ajax({
                type: "GET",
                url: '@Url.Action("demo", "displayDemo")',
                contentType: "application/json",
                dataType: 'json',
                data: { dispID: selectVal },
                success: function (response) {
                //alert('Calling function successfuly');
                var returnValue = response.ReturnValue;
                alert(returnValue);

            }
        });

         });
    });
</script>

"demo" is my method accepting one string parameter and returning another string. and "

displayDemo

" is the controller's name.


in controller I have

[HttpGet]
       public string demo(string dispID)
       {
          string msg="showing "+dispID;
          return msg;
       }

After executing it, I am not getting desired result back. I am sure I am missing something. please help me to figure it out.

It's showing me error like

0x800a138f - JavaScript runtime error: Unable to get property 'ReturnValue' of undefined or null reference