Is this valid data for jquery ajax call to aspnet mvc controller?

Question

I am using jquery with asp.net mvc.... Is my data option valid or am i missing some thing...

$.ajax({
            type:"POST",
            url: "Materials/GetRecords",
            data: "{'currentPage':1,'pageSize':5}",

Any suggestion....

EDIT: I am calling a function from a view page,

 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript">
        $(document).ready(function() {
            getMaterials(0);
          });
    </script>

and my function is,

function getMaterials(currentPage) {
    $.ajax({
        type:"POST",
        url: "Materials/GetRecords",
        data: "{'currentPage':" + (currentPage + 1) + ",'pageSize':5}",
        contentType: "application/json; charset=utf-8",
        cache: false,
        global: false,
        async: false,
        dataType: "json",
        success: function(data) {
            var divs = '';
            $("#ResultsDiv").empty();
            $.each(data.Results, function() {
                divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:150px;" class="resultName">' + this.Mat_Name + '</span><span class="resultfields" style="padding-left:10px;">Measurement&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + this.Mes_Name + '</span>&nbsp;<a href="/Materials/Delete/' + this.Id + '">Delete</a>&nbsp;<a href="/Materials/Details/' + this.Id + '">Details</a>&nbsp;<a href="/Materials/Edit/' + this.Id + '">Edit</a></div>';
            });
            alert("hai");
            $("#ResultsDiv").append(divs);
            $(".resultsdiv:even").addClass("resultseven");
            $(".resultsdiv").hover(function() {
                $(this).addClass("resultshover");
            }, function() {
                $(this).removeClass("resultshover");
            });
            $("#HfId").val("");
            $("#HfId").val(data.Count);
        }
    });
    return false;
}

on the view page load i see an alert saying [Object object].. Why this...

Answer 1

Right now, your data is a string. You probably want it to be an object, like below:

$.ajax({
        type:"POST",
        url: "Materials/GetRecords",
        data: {"currentPage": (currentPage + 1), "pageSize": 5},
        contentType: "application/json; charset=utf-8",
        cache: false,
        global: false,
        async: false,
        dataType: "json",
        success: function(data) {
            var divs = '';
            $("#ResultsDiv").empty();
            $.each(data.Results, function() {
                divs += '<div class="resultsdiv"><br /><span style="display: inline-block;width:150px;" class="resultName">' + this.Mat_Name + '</span><span class="resultfields" style="padding-left:10px;">Measurement&nbsp;:</span>&nbsp;<span class="resultfieldvalues">' + this.Mes_Name + '</span>&nbsp;<a href="/Materials/Delete/' + this.Id + '">Delete</a>&nbsp;<a href="/Materials/Details/' + this.Id + '">Details</a>&nbsp;<a href="/Materials/Edit/' + this.Id + '">Edit</a></div>';
            });
            alert("hai");
            $("#ResultsDiv").append(divs);
            $(".resultsdiv:even").addClass("resultseven");
            $(".resultsdiv").hover(function() {
                $(this).addClass("resultshover");
            }, function() {
                $(this).removeClass("resultshover");
            });
            $("#HfId").val("");
            $("#HfId").val(data.Count);
        }
    });

It is normal for you to get a JavaScript object back (the [Object object]). What you do with this depends on your application. However, you're right there's no alert (except the hai), so I don't know where it's coming from. Try clearing your browser cache.

Answer 2

I think you want:

$.ajax({
        type:"POST",
        url: "Materials/GetRecords",
        data: {'currentPage':1,'pageSize':5},