无法将数据从视图传递到控制器并同时填充网格数据

Question

所以我有一个问题，我一次只能做一件事：将数据传递给控制器中的 post 方法而不填充网格数据 OR在无法将数据传递给控制器中的 post 方法的情况下填充网格数据。

我怎样才能做到这两点？这是我尝试过的：

我的控制器中有以下内容：

[HttpPost]
public async Task<ActionResult> Search(QueryFilter[] myFilters)
{
    return Json(await DataService.GetData(myFilters, 1, -1, null));
}

在第一种情况下，我可以将值传递给控制器，但网格数据为空。这是我在这种情况下的视图中的脚本部分：

<script>
    $(function () {
        $("#searchform").submit(function (event) {    
            var url = '@Url.Content("~/Monitor/Search")';
            $("#grid-data").bootgrid("destroy");
            $("#preloader").show();
            event.preventDefault();

            var Filters = new Array();    
            $('[name="CheckBox"]:checked').each(function () {
                Filters.push(new QueryFilter($(this).val()));
            });

            $.ajax({
                url: url,
                type: 'POST',
                traditional: true,
                dataType: 'json',
                data: JSON.stringify(Filters),
                contentType: 'application/json; charset=utf-8',    
                success: function (result) {
                    alert("Success");
                    $("#grid-data").bootgrid(result); // Does not work
                }
            })
        });
        $("#preloader").hide();
    });    
    function QueryFilter(value) {
        this.Value = value
    }
</script>

在第二种情况下，我无法将值传递给控制器，但网格数据已成功填充。这是我在这种情况下的视图中的脚本部分：

<script>
    $(function () {
        $("#searchform").submit(function (event) {
            var url = '@Url.Content("~/Monitor/Search")';
            $("#grid-data").bootgrid("destroy");
            $("#preloader").show();
            event.preventDefault();

            var Filters = new Array();
            $('[name="CheckBox"]:checked').each(function () {
                Filters.push(new QueryFilter($(this).val()));
            });

            $("#grid-data").bootgrid({
                ajax:true
                url: url,
                type: 'POST',
                traditional: true,
                dataType: 'json',
                data: JSON.stringify(Filters),
                contentType: 'application/json; charset=utf-8',
                formatters: {
                    "DateOnly": function (column, row) {
                        return HelperScript.displayJsonDate(row[column.id]);
                    }
                },
                responseHandler: function (response) {
                    $("#preloader").hide();
                    return response;
                },
                requestHandler: function (request) {
                    return request;
                },
            })
        });
    });
    function QueryFilter(value) {
        this.Value = value
    }
</script>

Answer 1

因此，在网上进行更多搜索后，我找到了一个非常简单的解决方案。

所以 data: JSON.stringify(Filters)

我用过：

post: function () {
        return {
            myFilters: Filters
        };
    },

最终代码如下所示：

$("#grid-data").bootgrid({            
    ajax: true,   
    url: url,
    type: 'POST',
    traditional: true,
    dataType: 'json',
    post: function () {
        return {
            myFilters: Filters
        };
    },
    contentType: 'application/json; charset=utf-8',
    rowCount: -1,
    multiSort: true,

    formatters: {
        "DateOnly": function (column, row) {
            return HelperScript.displayJsonDate(row[column.id]);
        }
    },
    responseHandler: function (response) {
        $("#preloader").hide();
        return response;
    },
    requestHandler: function (request) {
        return request;
    },
})

无法将数据从视图传递到控制器并同时填充网格数据

Can't pass data from view to controller and fill grid data at the same time

ajax

model-view-controller

jquery

http-post

jquery-bootgrid