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

功能从.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(); 
    }); 
} 

而这个功能是让视图模型的数据：

function getViewModel() { 

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

你应该有post方法，而不是GET。 并在控制器的POST方法，你应该有一个像你的模型类型的参数：

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