extjs 4.1远程网格排序,并用MVC过滤

时间:2013-02-24 21:37:28

标签: asp.net-mvc asp.net-mvc-3 model-view-controller extjs extjs4

我需要在网格中添加排序和过滤功能。网格是选项卡面板的一部分。我可以在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)
{
    ....
}

3 个答案:

答案 0 :(得分:0)

我根本不熟悉MVC3,但你需要做的是:

  • 正确映射参数(您可能通过使用该方法的字符串排序参数来执行此操作)并确保将排序值作为JSON字符串。
  • 然后你需要将JSON字符串反序列化为一个对象(我认为这会有所帮助:http://msdn.microsoft.com/en-us/library/bb412179.aspx)。

答案 1 :(得分:0)

我也不知道MVC3,但是我使用.Net WCF和Extjs取得了很好的成功。例如......

[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;
   }

答案 2 :(得分:0)

对于排序我实际上得到了一个json字符串。我必须为过滤器设置encode为true,因此传递给我的控制器方法的filters参数是一个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);
     }