How to pass arrays from view to controller using ajax call or any other method?

Question

I have three multi-select drop-down lists and i am trying to pass the selected items from this drop-down list from view to controller I declare an array with the name of datas and push the selected items from multi-select lists to this array data is successfully pushed in this array but now I want to pass this array to the controller using ajax call or using any other method but i am getting null in the controller?

<div class="row">
    <div class="col-sm-4">
        <div class="form-group">
            <label>Select Real Tags</label>
            @Html.DropDownListFor(m => m.DependancyMatrixVM.Real_Tag_Id_FK, (IEnumerable<SelectListItem>)ViewBag.RawTagList, new { @class = "form-control", @multiple = true, id = "Raw_Tag_List" })
            @Html.ValidationMessageFor(m => m.DependancyMatrixVM.Real_Tag_Id_FK, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label>Select Calculated Tags</label>
            @Html.DropDownListFor(m => m.DependancyMatrixVM.Cal_Tag_Id_FK, (IEnumerable<SelectListItem>)ViewBag.CalculatedTag, new { @class = "form-control", @multiple = true, id = "Calculated_Tag_List" })
            @Html.ValidationMessageFor(m => m.DependancyMatrixVM.Cal_Tag_Id_FK, "", new { @class = "text-danger" })
        </div>
    </div>
    <div class="col-sm-4">
        <div class="form-group">
            <label>Select Manual Tags</label>
            @Html.DropDownListFor(m => m.DependancyMatrixVM.MF_Tag_Id_FK, (IEnumerable<SelectListItem>)ViewBag.ManualTagList, new { @class = "form-control", @multiple = true, id = "Manual_Tag_List" })
            @Html.ValidationMessageFor(m => m.DependancyMatrixVM.MF_Tag_Id_FK, "", new { @class = "text-danger" })
        </div>
    </div>
</div>

Jquery Code:

function SelectedItemArray() {
    var RawTags = $('#Raw_Tag_List').val();
    var calculatedTags = $('#Calculated_Tag_List').val();
    var manualTags = $('#Manual_Tag_List').val();
    var datas = [];
    datas.push(RawTags,calculatedTags, manualTags);
    $.ajax({
        url:"@Url.Action("selectedTags","CalculatedTags")",
        type: 'Post',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({ 'selectedTags':datas }),

        success: function (data) {
            debugger;
            if (data != null)
            {
                console.log(data);
               alert('ok');

                }
                else {
                    alert('Not ok');
                }
            }

    });
}

[HttpPost]
public JsonResult selectedTags(string[] selectedTags)
{

    return Json(selectedTags,JsonRequestBehavior.AllowGet);
}

Answer 1

The problem here is that when you try to get result with $('#Raw_Tag_List').val();it gives you an array for example ['1'] . So you are sending datas as [['1'],['2'],..] because of datas.push(RawTags,calculatedTags, manualTags); which is not proper format for server.

You need to merge array items with using merge instead of push . See: https://api.jquery.com/jquery.merge/

 datas = $.merge(RawTags,calculatedTags, manualTags);

Therefore you will have new array that contains selected items like ['1','2'] :

function SelectedItemArray() {
    var RawTags = $('#Raw_Tag_List').val();
    var calculatedTags = $('#Calculated_Tag_List').val();
    var manualTags = $('#Manual_Tag_List').val();
    var datas =  $.merge(RawTags,calculatedTags, manualTags);
    $.ajax({
        url:"@Url.Action("selectedTags","CalculatedTags")",
        type: 'Post',
        contentType: 'application/json',
        dataType: 'json',
        data: JSON.stringify({ 'selectedTags':datas }),

        success: function (data) {
            debugger;
            if (data != null)
            {
                console.log(data);
               alert('ok');

                }
                else {
                    alert('Not ok');
                }
            }

    });
}