在从Controller接收到JSON数据之后,在javascript中生成选择列表选项

时间:2011-12-29 12:03:01

标签: javascript jquery asp.net-mvc

我在Controller(MVC)中有一个列表

public CompanyController() {
         _company = new List<CompanyModel>{
            new CompanyModel{Name="A 1", Email="a1@company.com", Group="Group1"},
            new CompanyModel{Name="A 2", Email="a2@company.com", Group="Group2"},
            new CompanyModel{Name="A 3", Email="a3@company.com", Group="Group3"},
            new CompanyModel{Name="B 1", Email="b1@company.com", Group="Group1"},
            new CompanyModel{Name="C 1", Email="c1@company.com", Group="Group2"},
            new CompanyModel{Name="D 1", Email="d1@company.com", Group="Group4"},
            new CompanyModel{Name="E 1", Email="e1@company.com", Group="Group5"},
            new CompanyModel{Name="E 2", Email="e2@company.com", Group="Group6"},
            new CompanyModel{Name="F 1", Email="f1@company.com", Group="Group6"},
            new CompanyModel{Name="G 1", Email="b1@company.com", Group="Group5"},
            new CompanyModel{Name="H 1", Email="b1@company.com", Group="Group6"},
            new CompanyModel{Name="I 1", Email="b1@company.com", Group="Group3"},
            new CompanyModel{Name="J 1", Email="b1@company.com", Group="Group7"},
            new CompanyModel{Name="K 1", Email="b1@company.com", Group="Group6"},
            new CompanyModel{Name="L 1", Email="b1@company.com", Group="Group1"},
            new CompanyModel{Name="M 1", Email="b1@company.com", Group="Group2"},
            new CompanyModel{Name="N 1", Email="b1@company.com", Group="Group2"},
            new CompanyModel{Name="O 1", Email="b1@company.com", Group="Group4"},
            new CompanyModel{Name="P 1", Email="b1@company.com", Group="Group5"},            
            new CompanyModel{Name="R 1", Email="b1@company.com", Group="Group5"},
            new CompanyModel{Name="S 1", Email="b1@company.com", Group="Group8"},
            new CompanyModel{Name="T 1", Email="b1@company.com", Group="Group8"},
            new CompanyModel{Name="U 1", Email="b1@company.com", Group="Group1"},
            new CompanyModel{Name="V 1", Email="b1@company.com", Group="Group2"},
            new CompanyModel{Name="X 1", Email="b1@company.com", Group="Group4"},
            new CompanyModel{Name="Y 1", Email="b1@company.com", Group="Group3"},
            new CompanyModel{Name="Z 1", Email="b1@company.com", Group="Group3"},
            new CompanyModel{Name="W 1", Email="b1@company.com", Group="Group6"},
         };
      }

我通过JSON发送给JQuery:

objectCompany = null;
data = "";

$.ajax({
         url: '/Company/List',
         dataType: 'json',
         contentType: 'application/json; charset=utf-8',
         success: function (msg) {
            data = msg;
         },
         complete: function () {
            objectCompany = data;
         }
      });

我想在我的select代码<select name="filters" id="filters"></select>后附加Groupif (objectCompany != null) { $("#filters").empty(); $("#filters").html("<option value='all' selected='selected'>All groups</option>"); var arrayUnique = []; for (var i = 0; i < objectCompany .length; i++) { for (var j = i + 1; j < objectCompany .length; j++) { if (objectCompany [i].Group === objectCompany [j].Group) { j = ++i; } } arrayUnique.push(objectCompany [i].Group); } arrayUnique = arrayUnique.sort(); $.each(arrayUnique, function (k, v) { $("#filters").append("<option value='" + v + "'>" + v + "</option>"); }); } 个值而不重复相似值的选项。

更新

{{1}}

更新:现在可行:)

1 个答案:

答案 0 :(得分:1)

为什么要与javascript挣扎?你为什么不使用视图模型?为什么不从控制器操作准备数据,以便视图必须执行的所有操作都显示它?使用JSON中的一些重复组浪费带宽的目的是什么?

public ActionResult List()
{
    var model = _company.Select(x => x.Group).Distinct();
    return Json(model, JsonRequestBehavior.AllowGet);
}

现在很简单:

var filters = $('#filters');
filters.empty();
filters.append(
    $('<option/>', {
        value: 'all',
        selected: 'selected',
        text: 'All groups'
    })
);
$.each(objectCompany, function (index, group) {
    filters.append(
        $('<option/>', {
            value: group,
            text: group
        })
    );
});

更新:

如果你想在客户端进行这种过滤,你可以定义一个能得到不同元素的函数:

$.extend({
    distinct : function(arr, selector) {
       var result = [];
       $.each(arr, function(index, value) {
           var item = selector(value);
           if ($.inArray(item, result) == -1) {
               result.push(item);
           }
       });
       return result;
    }
});

然后:

var filters = $('#filters');
filters.empty();
filters.append(
    $('<option/>', {
        value: 'all',
        selected: 'selected',
        text: 'All groups'
    })
);
var groups = $.distinct(objectCompany, function(item) { return item.Group; });

$.each(groups, function (index, group) {
    filters.append(
        $('<option/>', {
            value: group,
            text: group
        })
    );
});