Добавить строку в локальные данные из модальных

Question

У меня есть datatable, объявленные так:

<script>
    var selected = Array();

    var dataSet = [];
    var idSet = [];
    var rowItem = "";
    var rowIdItem = "";
    $(document).ready(function () {
        var table = $("#table").DataTable({
            "data": dataSet,
            "filter":false,
            "language": {
                "search": "",
                "searchPlaceholder": " Search"
            },
            "select": {
                "style": 'multi'
            },
            "ordering": true,
            "lengthChange": false,
            "columns": [
                { "title": "Id" },
                { "title": "Name"}
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false
                }
            ],
            "responsive": true,
            "processing":true,
        }).columns.adjust()
        .responsive.recalc();
        new $.fn.dataTable.FixedHeader(table);

        $("#roleSection").on("click", "#removeRole", function (e) {
            let updatedDataSet = [];
            table.rows(".selected").remove().draw();
            table.rows().every(function (Id, Table, Row) {
                let row = this;
                updatedDataSet.push(row.data())
            });
            dataSet = updatedDataSet;
            console.log(dataSet);
            return false;
        });

        $(document).on($.modal.AFTER_CLOSE, function (event, modal) {
            table.row.add([rowIdItem,rowItem]).draw();
            $("#modal").empty();
        });

        $(document).on("submit","#form",function (e) {
            var form_data = new FormData;
            for (var i = 0; i < idSet.length; i++) {
                var row = $("<input />").attr("type", "hidden").attr("name", "Roles[]").attr("value", idSet[i]);
                $("#form").append(row);
            }
            return true;
        });
    });
</script>

       <table id="table">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Role</th>
                </tr>
            </thead>
        </table>

Когда я хочу добавить элемент в datatable, я нажимаю кнопку добавления, которая открывает это модальное окно. В этом модальном окне, когда я отправляю форму, я передаю список элементов из datatable, а также ввод формы, чтобы я мог проверить, существует ли элемент в таблице.

Модальный код окна

    <script>
    $(document).ready(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: idSet });
            form_data.push({ name: "RoleId", value: selectedId });
            form_data.push({ name: "RoleName", value: selectedText });

            $.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;
                        dataSet.push([rowIdItem, rowItem]);
                        idSet.push([rowIdItem]);
                        $("#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;
        });
    });
</script>
<div class="col-sm-12">
<h2>Add Role</h2>
</div>
@using (Html.BeginForm(null, null, FormMethod.Post, new { id = "modal" }))
{
    @Html.AntiForgeryToken()
    <div class="col-sm-12">
        <div class="form-group">
            @Html.DropDownListFor(m => m.RoleId, Model.Roles)
            @Html.ValidationMessageFor(m => m.RoleId)
        </div>
        <div class="form-group">
            <div class="clearfix">
                <input type="submit" id="save" value="Save" class="btn btn-primary pull-right" />
                <a href="#" id="close" class="btn btn-default pull-right" rel="modal:close">Cancel</a>
            </div>
        </div>
    </div>
}

Это контроллер, в который модальное окно отправляет данные:

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

ViewModel:

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

Однако теперь есть несколько проблем:

1. Когда я закрываю модальное окно даже без добавления элемента, в таблицу добавляется пустая строка. Как я могу предотвратить это?
2. Как я могу отправить dataSet в контроллер в правильном формате? В настоящее время из-за того, что viewmodel задается в виде строки, dataSet отправляется в виде строки, подобной этой: id1,value1,id2,value2. Если я установил ее для объекта, как можно отправить правильно отформатированный список?
3. Предполагая, что 1 и 2 решены, как я могу удалить элемент из таблицы? Моя текущая функция удаления в первом разделе кода работает только для плоских массивов, а не для массивов объектов.