0

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

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

并在我的 Asp.net MVC 视图中显示这两个，如下所示：

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

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

4

1 回答 1

2

监听第一个下拉列表的更改事件，读取选定的值，将其发送到一个操作方法，该方法返回第二个下拉列表内容的 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;}
}

因此，在 action 方法中，构建一个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;
}
于 2013-08-30T17:42:49.273 回答