从模式

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发送到控制器中？由于将视图模型设置为字符串，因此dataSet会以如下形式发送：id1,value1,id2,value2.如果将其设置为对象，如何发送格式正确的列表？
3. 假设已解决1和2，如何从表中删除项目？我当前在第一个代码部分中的删除功能仅适用于平面数组，而不适用于对象数组。