Filtering data server side using jQuery grid

Question

I am working on ASP.NET MVC3 application and we are using jQuery-grid to show data from the database.

It seem that I lack the knowledge of some pretty basic concepts here but please be polite and try to help if you can.

To save some writing here is a print screen of the structure of scripts in the MVC project:

Project Structure

I think I have included all files that I need. Currently I'm working with WorkingForms.js where I have this :

//=====================================================================================================
// Page Filter
//=====================================================================================================

ClientsPageFilter = function (params) {
    this.init(params);
};

ClientsPageFilter.prototype = {
    parent: null,

    init: function (params) { },

    basePageFilter: new BasePageFilter(),
    initFilter: function () {
        var self = this;

        self.basePageFilter.parent = self;

        // Pass to base class - Filter ID, ID of Filter button, ID of Reset button
        self.basePageFilter.initFilter("#accordionFilter", "#bFilter", "#bReset");
    },

    resetFields: function () {
        $("#txtFilterName").val('');
    },

    getFilterConditions: function () {
        var filter = [];

        filter.push({ field: 'Name', op: 'na', data: $('#txtFilterName').val() });

        return jQuery.stringify(filter); //ok, here we return the push data and now...?
    }
};

My filter and reset buttons looks like this :

input type="button" id="bFilter" value="Filter" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="ClientsPageFilter.prototype.getFilterConditions()"/>

In the console I can see that I get the return jQuery.stringify(filter); value but I don't know how to proceed form here. Does the jQuery grid has build-in option to send those request to the server and fetch the result filtering the page and what should I look for if that so or do I have to write some custom jQuery Ajax which should post the data to my controller which is :

[HttpPost]
        public JsonResult Get()
        {
            GridSettings gridSettings = MaintenanceCheckSystem.Utils.Helpers.LoadGridSettingsByRequest(Request);
            return Json(DocumentService.List(gridSettings), JsonRequestBehavior.AllowGet);
        }

Where LoadGridSettingsByRequest(Request) is this :

public static GridSettings LoadGridSettingsByRequest(System.Web.HttpRequestBase request)
        {
            int page = 1;
            if (!string.IsNullOrWhiteSpace(request["page"]))
            {
                int.TryParse(request["page"], out page);
            }
            //more code...
GridFilter filter = new GridFilter();
            if (!string.IsNullOrWhiteSpace(request["filters"]))
            {
                string jsonString = request["filters"];
                filter = new JavaScriptSerializer().Deserialize(jsonString);
            }

            GridSettings gridSettings = new GridSettings()
            {
                PageIndex = page,
                PageSize = limit,
                SortColumn = request["sidx"],
                SortOrder = string.Compare(request["sord"], "asc", true) == 0 ? Direction.Ascending : Direction.Descending,
                Where = filter
            };

    return gridSettings;
}

and DocumentService.List(gridSettings) just makes the call to the database and fetch the data.

I think I have to somehow call the Get method form my controller passing the stringified filter, but this part is what is really unclear to me.

Keren Caelen · Accepted Answer

One suggestion: Always Write function in button with return like:

Function to send viewModel's data from .js to contoller:

function submitForm() {
    showAjaxLoader("addLoader");
    var path = getAbsolutePath("MyController", "Save");
    var viewModel = getViewModel();
    $.ajax({
        url: path,
        contentType: 'application/json; charset=utf-8',
        type: 'Post',
        dataType: 'html',
        data: JSON.stringify(viewModel),
        cache: false
    })
    .success(function (result) {
        hideAjaxLoader("addLoader");
        $("#addLoader").html(result);
        $("#btnSave").focus();
    })
    .error(function (xhr) {
        handleAjaxError();
    });
}

And this function is to get the viewmodel's data:

 function getViewModel() {

        var viewModel = {
            'ID': $("#ID").val(),
            'EmployeeName': $("#EmployeeName").val(),
            .
            .
            .
            .
        };
        return viewModel;
    }

You should have post method and not the GET. and in your controller's POST method you should have parameter of your model type like:

       [HttpPost]
        public ActionResult Save(MyModel viewModel)
        {
        }

Filtering data server side using jQuery grid

Answers (1)

Related Questions