在页面之间传递多个下拉列表项

时间:2014-01-01 13:40:34

标签: asp.net asp.net-mvc

我使用Asp.Net MVC。我的页面中有4个下拉列表。

1- Car Company(40件物品) 2-型号(30件物品) 3年(20项) 4-引擎(20项)

当用户选择此项目时,请转到详细信息页面。在详细信息页面中,我想要填写ddl并选择选择项目用户。

我对此有一些想法,但我不确定它的正确方法。

1- post dropdownlist to controller并返回详细信息页面

2-写下来cookie的下拉列表

或任何其他想法?

2 个答案:

答案 0 :(得分:1)

您可以使用ViewBag,ViewData或TempData对象来保存此类值

答案 1 :(得分:1)

创建一个像这样的视图模型

public class FilterVM
{
  public List<SelectListItem> Makes{ set;get;}
  public int SelectedMake { set;get;}

  public List<SelectListItem> Models { set;get;}
  public int SelectedModel { set;get;}

  public List<SelectListItem> Years{ set;get;}
  public int SelectedYear { set;get;}

  public List<SelectListItem> Engines{ set;get;}
  public int SelectedEngine { set;get;}

  public FilterVM()
  {
    Makes=new List<SelectListItem>();
    Models=new List<SelectListItem>();
    Years=new List<SelectListItem>();.
    Engines=new List<SelectListItem>();
  }
}

现在进入你的GET行动

public ActionResult Search()
{
  var vm=new FilterVM();
  vm.Makes=LoadMakesFromSomewhere();
  return View(vm);
}
private List<SelectListItem> LoadMakesFromSomewhere()
{
  var lst=new List<SelectListItem>();
  lst.Add(new SelectListItem { Value="1", Text="Ford"});
  lst.Add(new SelectListItem { Value="2", Text="Honda"});
  return lst;
}

在您的视图中,您的FilterVM是强类型的。我们将编写一些javascript来处理下拉列表的更改事件,以便它将读取所选项目值并发送ajax请求以获取下一个下拉列表的内容。

@model FilterVM
@using(Html.BeginForm())
{
  <label>Make</label>
  @Html.DropDownListFor(s=>s.SelectedMake,Model.Makes,"Select")

  <label>Make</label>
  @Html.DropDownListFor(s=>s.SelectedModel,Model.Models,"Select")

  <label>Make</label>
  @Html.DropDownListFor(s=>s.SelectedYear,Model.Years,"Select")

  <label>Make</label>
  @Html.DropDownListFor(s=>s.SelectedEngine,Model.Engines,"Select")

  <input type="submit" />
}
<script type="text/javascript">
 $(function(){
    //code to load Models dropdown when user selects Make
    $("#SelectedMake").change(function(){
     var items="";
     $.getJSON("@Url.Action("GetModels","Car")/"+$(this).val(),function(res){
         $.each(function(index,item){
           items+="<option value='"+item.ID+'>"+item.Name+"</option>";
         });
         $("#SelectedModel").html(items); 
     });
    });

    //Write other dropdown  filling code like above       
 });
</script>

现在你应该有一个GetModels方法接受Selected Make的ID并以JSON格式返回模型。

public ActionResult GetModels(int id)
{
  var modelList=repositary.GetModelsFromMakeID(id);
  return Json(modelList,JsonRequestBehaviour.AllowGet);
}

您要返回的JSON应该看起来像这样(以及每个项目中的ID和名称。

[
    {
        "ID": 4,
        "Name": "Accord"
    },
    {
        "ID": 5,
        "Name": "CRV"
    }
]

还为其他下拉列表编写更改事件处理程序。最后,当用户发布表单时,您可以检查SelectedMake,SelectedModel,SelectedYear属性值。

[HttpPost]
public ActionResult Search(FilterVM model)
{
  check for model.SelectedMake, model.SelectedYear etc..
  //to do : Get result and show in a view/redirect.
}