extjs 4.1 远程网格排序和 MVC 过滤

Question

我需要在我的网格中添加排序和过滤。网格是选项卡面板的一部分。我可以在 Firebug 中看到调用控制器的以下参数：

_dc 1361741346485
limit   200
page    2
sort    [{"property":"IsLate","direction":"ASC"}]
start   200

我需要向控制器方法添加哪些参数才能接受来自请求的排序参数？我想我需要序列化它。我试图创建一个具有属性和方向的排序对象，但是当我调试时，收到的参数的属性和方向为空。我需要遵循命名约定吗？我很困惑。 谢谢。

这是我的代码：
LateGrid.js

  Ext.define('FICMTB.ui.LateModel', {
       extend: 'Ext.data.Model',
       fields: [
    { name: 'Id' },      
    { name: 'IsLate' },      
    { name: 'Comments' },  
    { name: 'Description' }],
    idProperty: 'Id'
 });

 Ext.define("FICMTB.ui.LateGrid", {
     extend: "Ext.grid.Panel",
     requires: [
        'FICMTB.ui.LateModel',
        'Ext.ux.grid.FiltersFeature'
        ],

initComponent: function () {
    var me = this;

    me.columns = me.buildColumns();
    me.filters = {
        ftype: 'filters',
        encode: false, // json encode the filter query
        filters: [{
            options: ['YES', 'NO'],
            dataIndex: 'IsLate'
        }]
    };
    me.features = [me.filters];
    me.store = Ext.create('Ext.data.Store', {
        model: 'FICMTB.ui.LateModel',
        remoteSort: true,
        storeId: 'LateStoreId',
        autoLoad: true,
        buffered: true,
        autoSync: true,

        pageSize: 200,
        proxy: {
            type: 'rest',
            timeout: 600000,

            url: '/Late/Transactions/',
            reader: {
                type: 'json',
                root: 'transactions',
                totalProperty: "Total"
            },
            writer: {
                type: 'json',
                root: 'transactions'
            }
        }
    });

    me.selModel = new Ext.selection.RowModel({
        singleSelect: true
    });

    me.autoSizeColumns = true;

    me.autoScroll = true;
    me.forcefit = true;

    me.callParent(arguments);
},

buildColumns: function () {
    var me = this;

    return [
    { text: 'Id', dataIndex: 'Id', hidden: true, hideable: false },
    { text: 'Is Late' dataIndex: 'IsLate', sortable: true, width: 50, filter:true},      
    { text: 'Comments', dataIndex: 'Comments', width: 250, sortable: true },
    { text: 'Description', dataIndex: 'Description', width: 250, sortable: true }];
  },
  height: 600,
  width: 'auto'
});

LateController.cs

[AcceptVerbs(HttpVerbs.Get)]
[ActionName("LateTransactions")]
public ActionResult GetLateTransactions(string page, string start, string limit, xxxxxx sorting, yyyyy filtering)
{
    // what should xxxxx and yyyyy be? how should I name the sorting and filtering parameters?
    //            returns json 
}

编辑： 我尝试使用 Sorting 对象，但它是 null

// Sorting 
// NOT Simple Sort: 
// Request:  index?sort=[{"property":"email","direction":"DESC"}, {"property":"last_name","direction":"ASC"}, ...] 
public class Sorting 
{ 
    public string property { set; get; } 
    public string direction { set; get; } 
}

[AcceptVerbs(HttpVerbs.Get)]
[ActionName("LateTransactions")]
public ActionResult GetLateTransactions(string page, string start, string limit, Sorting sort, yyyyy filtering)
{
    ....
}

Answer 1

我对MVC3一点都不是很熟悉，但是你需要做的是：

• 正确映射参数（您可能会为此方法使用字符串排序参数）并确保将排序值作为 JSON 字符串获取。
• 然后您需要将 JSON 字符串反序列化为对象（我认为这会有所帮助：http://msdn.microsoft.com/en-us/library/bb412179.aspx）。

Answer 2

我也不知道 MVC3，但是我已经成功地使用了带有 Extjs 的 .Net WCF。比如……

[OperationBehavior(Impersonation = ImpersonationOption.Allowed)]
   [WebInvoke(Method = "GET")]
   public Stream getEvent_list(string TableName, string WhereParams,string page, string start, string limit, string sort)
   {
       string sorting = "date desc";

       if (WhereParams == null) WhereParams = "";
       if (sort != null)
       {
           sorting = getSorting(sort);  // parse the sorting json parameter
       }

blah blah....

       string sql = "select * from mytable order by " + sorting;
        /// return json as streamn

  }

 //  -------------------- getSorting ------------------------------------------------
// Parse the passed sorting JSON object into a string for SQL query.
// for example sort= [{property:'dr'},{order:'desc'},{property:'doi'},{order:'asc'},]
// gets converted to 'dr desc, dor asc' (SQL friendly format).

   private string getSorting(string sort)
   {
       string sorting = "";

       string[] pairs = sort.Split(',');

       for ( int i=0; i< pairs.Length; i +=2 )
       {
           string[] pair = pairs[i].Split(':');
           string[] ord = pairs[i+1].Split(':');

           if (sorting.Length > 0)
           {
               sorting += ",";
           }
           // get rid of all extra json characters.
           sorting += pair[1].Trim(' ', '{', '}', '[', ']', '\\', '\"', '"') + " " + ord[1].Trim(' ', '{', '}', '[', ']', '\\', '\"', '"');
       }

       return sorting;
   }

Answer 3

对于排序，我实际上得到了一个 json 字符串。我必须将过滤器的编码设置为 true，因此传递给我的控制器方法的过滤器参数是一个 json 字符串：

   me.filters = {
       ftype: 'filters',
       **encode: true, // json encode the filter query**
       filters: [{
           options: ['YES', 'NO'],
           dataIndex: 'IsLate'
       }]
   };

我正在使用具有 DeserializeObject 方法的 Newtonsoft 库 - 它采用 json 字符串并将其转换为对象。所以，为了过滤，我的对象是这样的：

   public class Filtering
   {
       public string type { get; set; }
       public string value { get; set; }
       public string field { get; set; }
   }

在我的控制器中：

    [AcceptVerbs(HttpVerbs.Get)]
    [ActionName("LateTransactions")]
    public ActionResult GetLateTransactions(string page, string start, string limit,    Sorting sort, Filtering filter)
    {
    // get all the filters
        List<Filtering> deserzdFilter = JsonConvert.DeserializeObject<List<Filtering>>(filter);
        ....
//            returns json(model);
     }