Asp.net MVC Ajax call null parameter on GET HTML

Question

So I try to pass a integer array to my controller.

In my ajax call, if I use type: 'GET', dataType: 'HTML', my integer array doesn't pass to the controller. The same ajax call works if I use type: 'POST', dataType: 'JSON' but, I need to return a partial view.

Any idea please ?

Here is my code:

Controller :

    public ActionResult GetLaySimulation(int[] projectIDs)
    {
        var layList = LayHelper.GetLayObjects(projectIDs); //projectIDs = null if I have GET HTML in my ajax call.
        return PartialView("_LaySimulation", layList);
    }

Working ajax call :

    $.ajax({
            url: '@Url.Action("GetLaySimulation", "Admin")',
            type: 'POST',
            data: { projectIDs: simulationIDs },
            dataType: 'JSON',
            success: function (result) {
                hideLoader();
                $("#lay-container").html(result);
            },
            error: function (err) {
                hideLoader();
            }
        });

What I need :

   $.ajax({
            url: '@Url.Action("GetLaySimulation", "Admin")',
            type: 'GET',
            data: { projectIDs: simulationIDs },
            dataType: 'HTML',
            success: function (result) {
                hideLoader();
                $("#lay-container").html(result);
            },
            error: function (err) {
                hideLoader();
            }
        });

********************Edit*********************

Javascript function :

 $("#lay-container").html("");

    var simulationIDs = [];
    var checkBoxes = $(".chk-export");
    var showButton = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ($(checkBoxes[i]).is(":checked") == true) {
            simulationIDs.push($(checkBoxes[i]).attr("data-id"));
        }
    }
    if (simulationIDs.length > 0) {

        $(".btn-excel").fadeIn();
        $("#lay-container").fadeIn();
        showLoader();

        $.ajax({
            url: '@Url.Action("GetLaySimulation", "Admin")',
            type: 'GET',
            data: { projectIDs: simulationIDs },
            dataType: 'HTML',
            success: function (result) {
                hideLoader();
                $("#lay-container").html(result);
            },
            error: function (err) {
                hideLoader();
            }
        });
    }

Answer 1

You can do it using type as POST and dataType as html Don't get confused ☺

Answer 2

You can send the array in the queryString. Javascrip Code:

    $.ajax({
        url: '@Url.Action("GetLaySimulation", "Admin")' + "?projectIDs=" + JSON.stringify(simulationIDs),
        type: 'GET',
        dataType: 'HTML',
        success: function (result) {
            hideLoader();
            $("#lay-container").html(result);
        },
        error: function (err) {
            hideLoader();
        }
    });

To retrieve int the controller:

public ActionResult GetLaySimulation()
{
    var ids = HttpContext.Request.QueryString["projectIDs"];
    int[] projectIDs = JsonConvert.DeserializeObject<int[]>(ids);
    // Code....
}    

Answer 3

I found a solution like this but I am not satisfied. At the same time, I didn't understand why I can pass a string parameter but not an array :

   public ActionResult GetLaySimulation(string ids)
    {
        var idsStr = ids.Split(',');
        List<int> projectIDs = new List<int>();
        foreach (var item in idsStr)
        {
            if (!string.IsNullOrEmpty(item))
                projectIDs.Add(int.Parse(item));
        }
        var layList = LayHelper.GetLayObjects(projectIDs.ToArray());
        return PartialView("_LaySimulation", layList);
    }

View:

  function chkClicked() {
    $("#lay-container").html("");

    var simulationIDs = "";
    var checkBoxes = $(".chk-export");
    var showButton = false;
    for (var i = 0; i < checkBoxes.length; i++) {
        if ($(checkBoxes[i]).is(":checked") == true) {
            simulationIDs += $(checkBoxes[i]).attr("data-id") + ",";
        }
    }
    if (simulationIDs.length > 0) {

        $(".btn-excel").fadeIn();
        $("#lay-container").fadeIn();
        showLoader();

        $.ajax({
            url: '@Url.Action("GetLaySimulation", "Admin")',
            type: 'GET',
            data: { ids: simulationIDs },
            dataType: 'HTML',
            success: function (result) {
                hideLoader();
                $("#lay-container").html(result);
            },
            error: function (err) {
                hideLoader();
            }
        });
    }

    else {
        $(".btn-excel").fadeOut();
        $("#lay-container").fadeOut();
    }
}