Ajax value not received by controller

Question

I have this code that got properly delivered to its controller counterpart. but for some reason the search model data was only nulls,while the pageNumber is received properly did i made a mistake somewhere?

 $("#NextResult").click(function () {
            var xData= document.getElementById("x1").value;
            var yData= document.getElementById("y1").value;

            var searchModel = {
                xval: xData,
                yval: yData,
            };
            var pageNumber = @Model.Page +1;
            $.ajax({
                url: "/Work/FilterData",
                type: "GET",
                data: { 'searchModel': searchModel, 'pageNumber': pageNumber },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert(thrownError);
                }

            }).success(function (response) {
                $('#datas').html(response)
            })
        });

the Controller is as such

[HttpGet]
public ActionResult FilterData(WorkSearchModel searchModel,int? pageNumber)

{

EDIT:

as suggested i tried doing doing both on a different project (this makes the function uncallable so i presume there's an error somewhere)

$("#NextResult").click(function () {
            var xData= document.getElementById("x1").value;
            var yData= document.getElementById("y1").value;
     var searchModel = {
        xval: xData,
                yval: yData,
                       pageNumber = @Model.Page +1
    };

        $.ajax({
            url: "/Work/FilterData",
            type: "GET",
            data: searchModel,
            error: function (xhr, ajaxOptions, thrownError) {
                alert(thrownError);
            }

        }).success(function (response) {
            $('#datas').html(response)
        })
    });

i also have tried to do this but nothing works (this gives null values for both searchmodel and pagenumber now)

  $.ajax({
        url: "/Work/FilterData",
        type: "GET",
        data: JSON.stringify(searchModel, pageNumber),
        contentType: "application/json;",

Answer 1

I would change the call from a GET to POST

Answer 2

One solution is to send the parameters one by one in the query string like this

$("#NextResult").click(function () {
    var xData= document.getElementById("x1").value;
    var yData= document.getElementById("y1").value;

    var pageNumber = @Model.Page +1;
    $.ajax({
        url: "/Work/FilterData?xval=xData&yval=yData&pageNumber=pageNumber",
        type: "GET",
        error: function (xhr, ajaxOptions, thrownError) {
            alert(thrownError);
        }

    }).success(function (response) {
        $('#datas').html(response)
    })
});

And the controller

[HttpGet]
public ActionResult FilterData(int xval, int yval, int? pageNumber)