使用 jQuery 网格过滤数据服务器端

Question

我正在开发 ASP.NET MVC3 应用程序，我们正在使用 jQuery-grid 来显示数据库中的数据。

我似乎缺乏一些非常基本的概念知识，但请保持礼貌并尽可能提供帮助。

为了节省一些文字，这里是 MVC 项目中脚本结构的打印屏幕：

我想我已经包含了我需要的所有文件。目前我正在与WorkingForms.js 合作，我有这个：

//=====================================================================================================
// 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...?
    }
};

我的过滤器和重置按钮如下所示：

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()"/>
                    <input type="button" id="bReset" value="Reset" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" onclick="ClientsPageFilter.prototype.resetFields()"/>

在控制台中，我可以看到我得到了 return jQuery.stringify(filter); 值，但我不知道如何在此处继续表单。 jQuery 网格是否具有内置选项来将这些请求发送到服务器并获取过滤页面的结果，如果是这样，我应该寻找什么，或者我是否必须编写一些自定义 jQuery Ajax 来将数据发布到我的控制器这是：

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

LoadGridSettingsByRequest(Request) 在哪里：

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<GridFilter>(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;
}

而DocumentService.List(gridSettings) 只是调用数据库并获取数据。

我想我必须以某种方式调用 Get 方法从我的控制器传递字符串过滤器，但这部分是我真正不清楚的。

Answer 1

一个建议：总是在按钮中编写函数，返回如下：

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

将 viewModel 的数据从 .js 发送到控制器的功能：

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();
    });
} 

而这个函数是获取viewmodel的数据：

 function getViewModel() {

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

你应该有 post 方法而不是 GET。 在您的控制器的 POST 方法中，您应该具有模型类型的参数，例如：

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