1

我想渲染一个 html.dropdownlist，这样用户就可以“点击”一个项目，在默认渲染中，用户必须点击下拉列表，然后列表会出现，然后用户可以选择一个项目。

我想将其显示为 ul\li 列表，但不知道如何，我确定我可以做一些 css 的东西，但是如何将选定的 SelectListItem-Value 重新放入数据源...？我很确定那里已经有东西了。谁能指出我正确的方向？

最好的问候，Jurjen。

4

1 回答 1

2

让我们为您的屏幕创建一些视图模型。假设我们正在做一个商店定位器视图，用户必须从下拉列表中选择一个状态，然后我们将在单选按钮中显示商店属于该状态。

public class LocateStore
{
  public List<SelectListItem> States { set;get;}
  public int SelectedState { set;get;}
  public LocateStore()
  {
     States=new List<SelectListItem>();
  }
}
public class StoreLocation
{
  public List<Store> Stores{ set;get;}
  public int SelectedStore { set;get;}
  public StoreLocation()
  {
     Stores=new List<Store>();
  } 
}
public class Store
{
  public int ID { set;get;}
  public string Name { set;get;}
}

现在在您的GET操作中，创建 LocateStore 类的对象并设置 State 集合属性值并将其发送到视图。

public ActionResult Locate()
{
  var vm=new LocateStore();
  //The below code is hardcoded for demo. you mat replace with DB data.
  vm.States= new List<SelectListItem>
  {
    new SelectListItem { Value = 1, Text = "MI" },
    new SelectListItem { Value = 2, Text = "CA" },
    new SelectListItem { Value = 3, Text = "OH" }
  };  
  return View(vm);
}

现在创建你的定位视图，它是强类型的LocateStore类。我们将有一些 javascript 代码来监听下拉列表的更改事件并进行 ajax 调用以获取单选按钮列表视图。

@model LocateStore
@Html.DropDownListFor(x=>x.SelectedState, 
                    new SelectList(Model.States,"Value","Text"),"Please select")
<div id="stores">

</div>
<script type="text/javascript">
   $(function(){
     $("#SelectedState").change(function(){
        $("#stores").load("@Url.Action("GetStores","Store")/"+$(this).val());
     });
   });
</script>

现在我们需要一个GetStores动作方法，它接受选定的状态 id 并返回一个局部视图，该视图具有单选按钮列表格式的商店名称。

public ActionResult GetStores(int id)
{
     var vm=new StoreLocation();
      //The below code is hardcoded for demo. you mat replace with DB data.
      vm.Stores= new List<Store>
      {
        new Store{ ID= 1, Name= "Costco" },
        new Store{ ID= 2, Name= "RiteAid" },
        new Store{ ID= 3, Name= "Target" }
      };  
      return PartialView(vm);
}

现在我们需要这个方法的视图，GetStores.cshtml它是强类型的StoreLocation类

@model StoreLocation
@foreach(var item in Model.Stores)
{
  @Html.RadioButtonFor(b=>b.SelectedStore,item.ID)  @item.Name
}

现在，当您运行应用程序时，当用户从下拉列表中选择一个项目时，它将带来具有单选按钮的局部视图。

这是使用上述代码的工作示例供您参考。

于 2012-10-30T12:40:59.023 回答