Sorting JSON Array – ASP.Net MVC Cascaded DropDownList 2 – 在ASP.Net MVC 中實現級聯下拉框 2 – ASP.net MVC Sorting JSON result

在上一個Post 介紹了怎樣在ASP.Net MVC 上使用Cascaded DropDownList

ASP.Net MVC Cascaded DropDownList – 在ASP.Net MVC 中實現級聯下拉框

和另一個Post 介紹怎麼在 Razor cshtml/vbhtml 上幫 Drop Down List 進行排序

ASP.Net Web Application To ASP.Net MVC Notes II Drop Down List Sorting DropDownList- ASP.Net Web Application To ASP.Net MVC 新手筆記II Drop Down List 排序 

但是還是有一個美中不足的地方…
就是 如果我們的資料不是順序排列的話…
那個DropDownList 便會有點難看了
Unsorted Cascading Drop Down List
由於之前的 ASP.NET MVC 上 的Cascaded DropDownList是用 Ajax Call 來取得JSON Array 之後再進行DataBind鎖定到 DropDownList 上..
所以我們便不可以 用ASP.Net 的功能來把資料進行Sorting/排序了

經過了一段時間在網上進行Research 後.. 終於找到了一個 自定的 Javascript function 來把 JSON Array 排序
以下是這個 Function 的Code

在頁面上加入了 這個Function 後
我們便可以用 這個function 來解決sorting 的問題了

<script type="text/javascript">
 //一個Javascript的功能用來做ordering 的
    //Field是屬性的名稱
    //Desc 是定義是否用倒序方法 true,false
    function OrderBy(Field, Desc, Primer) {
    //如果Desc = true 的話 用 -1 otherwise用 1
        if (Desc) {
            Desc = -1
        }
        else {
            Desc = 1
        }
        //下面做comparison
        return function (a, b) {
            a = a[Field];
            b = b[Field];
            if (typeof (Primer) != 'undefined') {
                a = Primer(a);
                b = Primer(b);
            }

            if (a < b) return Desc * -1;
            if (a > b) return Desc * 1;
            return 0;
        }
    }
</script>

 將會被更給的Javascript

$.each(FoodInfo, function (index, FoodInfo) {
//在這裡把Json Array的相關內容加進我們的Dropdownlist上 //這個是給ddl_Food的
                        ddl_Food.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
/這個是給ddl_FoodName的
                        ddl_FoodName.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name))
                    });

 已更變的Javascript

//要更變的地方
                    //因為現在2個DropDownList databind的內容的次序不同了
                    //所以要分開來re-populate2個dropdownlist
                    //正常的
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_Food.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
                    });
                    //把第一個Json Array的Value Assign到一個暫用的Variable上.. 以令被選中的DropDownList Value一致
                    TempFood = FoodInfo[0].Food_ID;
                    //現在我們要使用Sorting來把
                    FoodInfo = FoodInfo.sort(OrderBy('Food_Name', false, function (a) { return a.toUpperCase() }));
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_FoodName.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name));
                    });
                    //如果TempFood 不是空白時 我們把他的Selected Value完成ddl_Food 現在SelectedValue
                    if (TempFood != "") {
                        $("ddl_FoodName").val(TempFood);
                    }

Cascading DropDownList 所用的 Javascript在這裡

<script type="text/javascript">

    $(document).ready(function () {
//在這裡我們做一些 和 SelectedIndexChanged 的 功能
        //Set up Selected Index Change Like Event For ddl_FoodCategories and #ddl_FoodCategoriesName
        DDL_SelectedIndexChanged('#ddl_FoodCategories', '#ddl_FoodCategoriesName');
        DDL_SelectedIndexChanged('#ddl_FoodCategoriesName', '#ddl_FoodCategories');
        //Set up Selected Index Change Like Event For ddl_Food and #ddl_FoodName
        DDL_SelectedIndexChanged('#ddl_Food', '#ddl_FoodName');
        DDL_SelectedIndexChanged('#ddl_FoodName', '#ddl_Food');
    });

    function DDL_SelectedIndexChanged(DDL1, DDL2) {
//當感到有 .Change event的時候 進行以下的function
        $(DDL1).change(function () {
//把DDL1 的value assign到DDL2上
            $(DDL2).val(this.value);
//如果DDL1是 ddl_FoodCategories或ddl_FoodCategoriesName 時我們要進行一個Jquery 的AJAX Call
//因為 我們暫時不用為用戶改變ddl_Food或ddl_FoodName 時進行任何特別的動作的.. 所以 便用了 "#ddl_FoodCategories" || DDL1 == "#ddl_FoodCategoriesName"
            if (DDL1 == "#ddl_FoodCategories" || DDL1 == "#ddl_FoodCategoriesName") {
//我們用了RAZOR 的syntax 來建立我們的連結
//用了Jquery的 getJSON方法 向CascadingDropDownList Controller 的 SelectedFoodCategory 取資料
//我們的Parameter是 Food_Category_ID 用來取出和這個Food Category 有關的Food 的資料
                $.getJSON('@Url.Action("SelectedFoodCategory", "CascadingDropDownList")', { Food_Category_ID: this.value }, function (FoodInfo) {
//取得資料後 我們便可以把資料assign 到我們現有的 ddl_Food 和ddl_FoodName上了
                    var ddl_Food = $("#ddl_Food");
                    var ddl_FoodName = $("#ddl_FoodName");
//首先我們要清楚將會被更新的Dropdownlist 的內容 -- 可以使用object.empty() 來實現的
                    ddl_Food.empty();
                    ddl_FoodName.empty();
//要更變的地方
                    //因為現在2個DropDownList databind的內容的次序不同了
                    //所以要分開來re-populate2個dropdownlist
                    //正常的
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_Food.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_ID));
                    });
                    //把第一個Json Array的Value Assign到一個暫用的Variable上.. 以令被選中的DropDownList Value一致
                    TempFood = FoodInfo[0].Food_ID;
                    //現在我們要使用Sorting來把
                    FoodInfo = FoodInfo.sort(OrderBy('Food_Name', false, function (a) { return a.toUpperCase() }));
                    $.each(FoodInfo, function (index, FoodInfo) {
                        ddl_FoodName.append(
                        $('<option/>')
                            .attr('value', FoodInfo.Food_ID)
                            .text(FoodInfo.Food_Name));
                    });
                    //如果TempFood 不是空白時 我們把他的Selected Value完成ddl_Food 現在SelectedValue
                    if (TempFood != "") {
                        $("ddl_FoodName").val(TempFood);
                    }
                });

            }
        });

Cascading Drop Down List Sorted

Hope you find it useful

Leave a Reply