Question

我使用下面的代码在我的Asp.net MVC Action中初始化我的2下拉列表：

ViewData["first"]=List<SelectListItem>(){...};
ViewData["second"]=List<SelectListItem>(){...};

并在我的Asp.net MVC View中显示这两个：

@Html.DropdownList(...,(List<SelectListItem>)ViewData["first"], ...);
@Html.DropdownList(...,(List<SelectListItem>)ViewData["second"], ...);

上面的代码工作正常，我想要做的是：当我更改第一个下拉列表值时，第二个DropdownList将动态更改，我想应该使用ajax来实现这个目标，但我没有进一步的想法。任何人都可以提供帮助，谢谢你提前!!!

Answer 1

收听第一个下拉列表的更改事件，读取所选值，将其发送到操作方法，该方法返回第二个下拉列表内容的JSON数据。读取JSON并加载到第二个下拉列表。

$(function(){
  $("#CountryDropdDown").change(function(e){
    var country=$(this).val();
    $.getJSON("@Url.Action("States","Home")?id="+country,function(data){
        var items="";
        $.each(data,function(index,item){
           items+="<option value='"+item.ID+"'>"+item.Name+"</option>";
        });            
        $("#States").html(items);
    });

  });
});

假设你的Homecontroller有一个名为States的动作方法，它接受一个id并以下面的格式返回JSON

[
    {  "ID": "1", "Name": "MI" },
    {  "ID": "2", "Name": "NY" }
]

编辑： 根据评论中的问题

假设您的州级实体有这样的课程。

public class StateVM
{
  public int ID { set;get;}
  public string Name { set;get;}
}

因此，在操作方法中，构建StateVM类的列表并使用Json方法从中创建 JSON 数据

public AtionResult States(int id)
{
  var stateList=GetStatesForCountry(id);
  return Json(stateList,JsonRequestBehavior.AllowGet);
}

private List<StateVM> GetStatesForCountry(id);
{
  List<StateVM> states=new List<StateVM>();
  //Hard coding the items for demo.
  // TO DO : Replace the below lines with code for reading
  // your database and filling the list

  states.Add(new StateVM { ID=1, Name="MI"});
  states.Add(new StateVM { ID=2, Name="NY"});    
  return states;
}

当我更改第一个下拉列表值时，如何重新填充另一个下拉列表？

1 个答案: