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

时间:2013-06-13 10:05:58

标签: jquery asp.net-mvc-3 jqgrid

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

我似乎缺乏一些非常基本概念的知识,但如果可以,请礼貌并尽力提供帮助。

为了节省一些写作,这里是MVC项目中脚本结构的打印屏幕:

Project Structure

我想我已经包含了我需要的所有文件。目前我正在使用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方法从我的控制器传递字符串化过滤器,但这部分是我真正不清楚的。

1 个答案:

答案 0 :(得分:2)

一个建议:始终在按钮中写入功能,返回如下:

<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()"/>

将.js中的viewModel数据发送到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();
    });
} 

此函数用于获取viewmodel的数据:

 function getViewModel() {

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

你应该有post方法而不是GET。 并且在控制器的POST方法中,您应该具有模型类型的参数,如:

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