2011-12-29 72 views
0

recevinig JSON数据后,我在控制器(MVC)的列表产生的JavaScript选择列表的选项从控制器

public CompanyController() { 
     _company = new List<CompanyModel>{ 
      new CompanyModel{Name="A 1", Email="[email protected]", Group="Group1"}, 
      new CompanyModel{Name="A 2", Email="[email protected]", Group="Group2"}, 
      new CompanyModel{Name="A 3", Email="[email protected]", Group="Group3"}, 
      new CompanyModel{Name="B 1", Email="[email protected]", Group="Group1"}, 
      new CompanyModel{Name="C 1", Email="[email protected]", Group="Group2"}, 
      new CompanyModel{Name="D 1", Email="[email protected]", Group="Group4"}, 
      new CompanyModel{Name="E 1", Email="[email protected]", Group="Group5"}, 
      new CompanyModel{Name="E 2", Email="[email protected]", Group="Group6"}, 
      new CompanyModel{Name="F 1", Email="[email protected]", Group="Group6"}, 
      new CompanyModel{Name="G 1", Email="[email protected]", Group="Group5"}, 
      new CompanyModel{Name="H 1", Email="[email protected]", Group="Group6"}, 
      new CompanyModel{Name="I 1", Email="[email protected]", Group="Group3"}, 
      new CompanyModel{Name="J 1", Email="[email protected]", Group="Group7"}, 
      new CompanyModel{Name="K 1", Email="[email protected]", Group="Group6"}, 
      new CompanyModel{Name="L 1", Email="[email protected]", Group="Group1"}, 
      new CompanyModel{Name="M 1", Email="[email protected]", Group="Group2"}, 
      new CompanyModel{Name="N 1", Email="[email protected]", Group="Group2"}, 
      new CompanyModel{Name="O 1", Email="[email protected]", Group="Group4"}, 
      new CompanyModel{Name="P 1", Email="[email protected]", Group="Group5"},    
      new CompanyModel{Name="R 1", Email="[email protected]", Group="Group5"}, 
      new CompanyModel{Name="S 1", Email="[email protected]", Group="Group8"}, 
      new CompanyModel{Name="T 1", Email="[email protected]", Group="Group8"}, 
      new CompanyModel{Name="U 1", Email="[email protected]", Group="Group1"}, 
      new CompanyModel{Name="V 1", Email="[email protected]", Group="Group2"}, 
      new CompanyModel{Name="X 1", Email="[email protected]", Group="Group4"}, 
      new CompanyModel{Name="Y 1", Email="[email protected]", Group="Group3"}, 
      new CompanyModel{Name="Z 1", Email="[email protected]", Group="Group3"}, 
      new CompanyModel{Name="W 1", Email="[email protected]", 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>所有具有Group值但不重复相似值的选项。

UPDATE

if (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

为什么用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 
     }) 
    ); 
}); 

UPDATE:

如果你想要做的客户端上的这种过滤可以定义一个函数,它会得到不同的元素:

$.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; 
    } 
}); 

a那么:

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 
     }) 
    ); 
}); 
+0

因为'objectCompany'将在JS的其他函数中重用,这就是为什么我发送了所有数据。我只想在JS中操作数据,我想避免将数据发送到服务器并取回响应。这个对象将是巨大的,我在这里写了一部分。 –

+0

@MichaelSwan,然后写另一个控制器动作。专门为此AJAX调用而设计。我还更新了我的答案,以说明在客户端选择不同元素的示例,但我不推荐这种方法。 –

+0

看到我更新的代码(用JS编写的最后一个代码)..现在它的工作原理:)没有调用和/或创建另一个控制器 –