Passing Javascript Object array to MVC Controller

Question

I have these ViewModels:

public class UserAddRoleListViewModel
{
    public String Id { get; set; }
    public String Name { get; set; }
}

public class SaveUserNewRoleViewModel
{
    [Required]
    public String RoleId { get; set; }
    public String RoleName { get; set; }
    public List<UserAddRoleListViewModel> RoleList { get; set; }
}

How can I pass an array of objects that have a format like this:

var object = {
    Id: rowIdItem,
    Name: rowItem
};

dataSet.push(object);

to my MVC Controller here:

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult VerifyRole(SaveUserNewRoleViewModel Input)
    {
        IEnumerable<object> errors = null;
        if (ModelState.IsValid)
        {
            if(Input.RoleList[0] != null)
            {
                foreach (var item in Input.RoleList)
                {
                    if (Input.RoleId == item.Id)
                    {
                        ModelState.AddModelError("RoleId", "Role already exists");
                        errors = AjaxError.Render(this);
                        return Json(new { success = false, errors });
                    }
                }
                return Json(new { success = true });
            }
            return Json(new { success = true });
        }
        else
        {
            errors = AjaxError.Render(this);
            return Json(new { success = false, errors });
        }
    }

So far it seems like its always passing an nothing when I debug it

EDIT:

Just to clarify. I can already pass the item via ajax. It's just that when I debug, RoleList is empty.

This is my ajax function:

$(document).on("submit", "#modal", function (e) {
        e.preventDefault();
        var selectedText = $("#@Html.IdFor(m=>m.RoleId) :selected").text();
        var selectedId = $("#@Html.IdFor(m=>m.RoleId)").val();
        var form_data = $(this).serializeArray();
        form_data.push({ name: "RoleList", value: dataSet });
        console.log(form_data);
        rowIdItem = selectedId;
        rowItem = selectedText;
        $("#close").trigger("click");
        $.ajax({
            url: "@Url.Action("VerifyRole", @ViewContext.RouteData.Values["controller"].ToString())",
            method: "POST",
            data: form_data,
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            success: function (result) {
                if (result.success) {
                    rowIdItem = selectedId;
                    rowItem = selectedText;
                    $("#close").trigger("click");
                    return;
                }
                $.each(result.errors, function (index, item) {
                    // Get message placeholder
                    var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                    element.empty();
                    // Update message
                    element.append($('<span></span>').text(item.errorMessage));
                    // Update class names
                    element.removeClass('field-validation-valid').addClass('field-validation-error');
                    $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
                });
            }
        });
        return false;
    });

EDIT 2:

Added code that fills dataSet:

$(document).on($.modal.AFTER_CLOSE, function (event, modal) {
    dataSet.push(object);
    table.row.add(object).draw();
    $("#modal").empty();
});

Answer 1

Javascript

$("#myBtn").click(function () {

                var dataSet= [];
                var obj = {
                              Id: rowIdItem,
                              Name: rowItem
                         };
                dataSet.push(obj);

                var data = {
                "RoleId": '1',
                "RoleName ": 'roleName',
                "RoleList": dataSet
                };

                $.ajax({
                    type: "POST",
                    traditional:true,
                    url: "controller/VerifyRole",
                    content: "application/json;",
                    dataType: "json",
                    data: data ,
                    success: function () {
                    }
                });
            });

Controller/Action

[HttpPost]
public ActionResult VerifyRole(SaveUserNewRoleViewModel input)
{
    ...
}

Answer 2

Try this:)

$(document).on("submit", "#modal", function (e) {
    e.preventDefault();
    var selectedText = $("#@Html.IdFor(m=>m.RoleId) :selected").text();
    var selectedId = $("#@Html.IdFor(m=>m.RoleId)").val();
    var form_data = {};
    form_data.RoleId = selectedId;
    form_data.RoleName =selectedText;
    console.log(form_data);
    rowIdItem = selectedId;
    rowItem = selectedText;
    $("#close").trigger("click");
    $.ajax({
        url: "@Url.Action("VerifyRole", @ViewContext.RouteData.Values["controller"].ToString())",
        method: "POST",
        data: JSON.stringify(form_data),
        contentType: "application/x-www-form-urlencoded; charset=UTF-8",
        success: function (result) {
            if (result.success) {
                rowIdItem = selectedId;
                rowItem = selectedText;
                $("#close").trigger("click");
                return;
            }
            $.each(result.errors, function (index, item) {
                // Get message placeholder
                var element = $('[data-valmsg-for="' + item.propertyName + '"]');
                element.empty();
                // Update message
                element.append($('<span></span>').text(item.errorMessage));
                // Update class names
                element.removeClass('field-validation-valid').addClass('field-validation-error');
                $('#' + item.propertyName).removeClass('valid').addClass('input-validation-error');
            });
        }
    });
    return false;
});

my example with datasets:

  $("body").on("click", "#btnSave", function () {
    var ops = new Array();
    $("#table TBODY TR").each(function () {
        var row = $(this);
        var ps = {};
        ps.colname1 = row.find("TD").eq(0).html();
        ps.colname2 = row.find("TD").eq(1).html();
        ps.colname3=  row.find("TD").eq(2).html();
        ops.push(ps);
    });
    var item = {};
    item.nam1 = "test";
    item.List = ops;
     $.ajax({
        type: "POST",
        url: " ...",
        data: JSON.stringify(item),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {

        }
    });
});