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

时间:2018-06-25 14:31:57

标签: jquery ajax model-view-controller http-post jquery-bootgrid

所以我有一个问题,一次只能做一件事:在不填充网格数据的情况下将数据传递到控制器中的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>

1 个答案:

答案 0 :(得分:0)

因此,在通过网络进行更多搜索之后,我找到了一个非常简单的解决方案。

所以不是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;
    },
})