ASP.NET MVC 使用 jQuery EasyUI DataGrid - 排序 (Sorting)

經過兩篇的說明之後，現在我們繼續往進階一點的功能前進，這一篇將會說明到如何處理 DataGrid 的排序功能，另外會用到之前曾經介紹過的 Dynamic LINQ ( Dynamic Expression API )。

 

---

Step.1

要讓 DataGrid 欄位可已有排序的功能，首先要修改 Javascript 程式裡 DataGrid 的 Columns 設定，在需要排序的欄位加上「sortable: true」，

 

Step.2

前端 Javascript 程式裡對 DataGrid 的設定除了上面所說的在每個欄位裡增加「sortable: true」之外，可以在 DataGrid 增加兩個屬性的設定，分別為「sortName」與「sortOrder」，這兩個屬性是設定 DataGrid 一開始於初始狀態載入資料時的所排序的欄位以及順序，sortName 只能填入一個 Column Name，而 sortOrder 只能設定 asc 或 desc。

 

Step.3

接著要修改 CustomerController 與 CustomerService 的程式，

CustomerController

在 GetGridJSON 方法再增加兩個變數，分別為 sort 與 order，並且設定一開始的排序預設值，

 

Step.4

在網站專案裡透過 NuGet 加入 Dynamic Expression API，這是要用來做排序欄位的動態設定。

安裝好「Dynamic Expression API」之後，先在 CustomerService 加入 Namespce 的使用，

有關 Dynamic Expression API 的使用方式，可以參考之前我所發佈的文章內容：

Dynamic LINQ + Entity Framework - Part.1：MS SQL Server, LINQPad
Dynamic LINQ + Entity Framework - Part.2：Dynamic Expression API (NuGet)
Dynamic LINQ + Entity Framework - Part.3：ASP.NET MVC 應用
Dynamic LINQ + Entity Framework - Part.4：ASP.NET MVC 進階應用

 

Step.5

接著要來修改 CustomerService 的程式，原本的 GetJsonForGrid 這個方法再加入兩個參數：propertyName,  order，然後也改寫程式內容，

修改了 CustomerService 的 GetJsonForGrid method 之後，記得也要修改 CustomerController 的內容，

 

網頁執行：

DataGrid 載入資料的初始狀態，一開始的排序欄位與順序就是我們所設定的 sortName 與 sortOrder 內容，

 

 

 

修改：

為預防傳入的 order 與 sort 值有錯誤而造成程式執行的錯誤，所以在 CustomerService 裡針對傳入的 propertyName 會檢查是否為 Customer 的屬性名稱之一，另外 order 也會檢查是否為 asc 或 desc，如果 propertyName 或 order 的值有錯誤，就會使用預設值。

order 排序的降冪與升冪判斷比較好解決，

而要判斷傳進來的 propertyName 是否為 Customer 的 Properties 之一，這邊可以參考之前曾經介紹過的方法「Entity Framework 5 - 取得 Entity 的 Property Names 與 KeyMembers」，增加的程式內容如下，

補充 EntityHelper.cs 的程式碼，如下：

public class EntityHelper

{

    /// <summary>

    /// Entities the property names.

    /// </summary>

    /// <typeparam name="T"></typeparam>

    /// <returns></returns>

    public static IEnumerable<string> EntityPropertyNames<T>()

    {

        string entityName = typeof(T).Name;

        var members = new Dictionary<string, IEnumerable<string>>();

        var mw = new MetadataWorkspace(

            new[] { "res://*/" },

            new[] { Assembly.GetExecutingAssembly() });

        var tables = mw.GetItems(DataSpace.CSpace);

        foreach (var e in tables.OfType<EntityType>())

        {

            members.Add

                (

                    e.Name,

                    e.Members

                        .Where(m => m.TypeUsage.EdmType.BuiltInTypeKind == BuiltInTypeKind.PrimitiveType)

                        .Select(m => m.Name)

                );

        }

        return members.Where(x => x.Key == entityName).Select(x => x.Value).FirstOrDefault();

    }

}

另外 CustomerService.cs 的程式碼，如下：

public class CustomerService

{

    private NorthwindEntities db = new NorthwindEntities();

    /// <summary>

    /// Totals the count.

    /// </summary>

    /// <returns></returns>

    public int TotalCount()

    {

        return db.Customers.Count();

    }

    /// <summary>

    /// Gets the json for grid.

    /// </summary>

    /// <param name="page">The page.</param>

    /// <param name="pageSize">Size of the page.</param>

    /// <param name="propertyName">The sort.</param>

    /// <param name="order">The order.</param>

    /// <returns></returns>

    public JArray GetJsonForGrid(

        int page = 1,

        int pageSize = 10,

        string propertyName = "CustomerID",

        string order = "asc")

    {

        //取得 Entity 所有的 Property 名稱

        var entityPropertyNames = EntityHelper.EntityPropertyNames<Customer>();

        if (!entityPropertyNames.Contains(propertyName))

        {

            propertyName = "CustomerID";

        }

        if (!(order.Equals("asc", StringComparison.OrdinalIgnoreCase)

              || order.Equals("desc", StringComparison.OrdinalIgnoreCase)))

        {

            order = "asc";

        }

        JArray ja = new JArray();

        var query = db.Customers.AsQueryable();

        query = query.OrderBy(string.Format("{0} {1}", propertyName, order));

        query = query.Skip((page - 1)*pageSize).Take(pageSize);

        foreach (var item in query)

        {

            var itemObject = new JObject

            {

                {"CustomerID", item.CustomerID},

                {"CompanyName", item.CompanyName},

                {"ContactName", item.ContactName},

                {"ContactTitle", item.ContactTitle},

                {"Address", item.Address},

                {"City", item.City},

                {"Region", item.Region},

                {"PostalCode", item.PostalCode},

                {"Country", item.Country},

                {"Phone", item.Phone},

                {"Fax", item.Fax}

            };

            ja.Add(itemObject);

        }

        return ja;

    }

}

 

執行結果：

這邊的執行結果與修改前的並不會有差別，這邊以動畫讓大家了解 jQuery EasyUI DataGrid 的排序操作。

 

---

延伸閱讀：

Dynamic LINQ + Entity Framework - Part.1：MS SQL Server, LINQPad
Dynamic LINQ + Entity Framework - Part.2：Dynamic Expression API (NuGet)
Dynamic LINQ + Entity Framework - Part.3：ASP.NET MVC 應用
Dynamic LINQ + Entity Framework - Part.4：ASP.NET MVC 進階應用

Entity Framework 5 - 取得 Entity 的 Property Names 與 KeyMembers

 

以上