jqueryajaxmodel-view-controllerhttp-postjquery-bootgrid

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


So I have an issue where I can do only one thing at a time: Pass data to the post method in the controller without filling the grid data OR fill grid data without being able to pass data to the post method in the controller.

How can I do both? Here's what I've tried:

I have the following in my controller:

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

In the first case I can pass the values to the controller but the grid data is empty. This is my script section in the view for this case:

<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>

In the second case I can't pass the values to the controller but the grid data is successfully filled. This is my script section in the view for this case:

<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>

Solution

  • So I've found a pretty simple solution to my problem after more searching through the web.

    So instead of data: JSON.stringify(Filters)

    I used:

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

    And the final code looks like this:

    $("#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;
        },
    })