MVC4 - render html.dropdownlist

Question

我想渲染一個html.dropdownlist，這樣用戶就可以「點擊」一個項目，在默認渲染中，用戶將不得不點擊下拉列表，然後列表將出現，然後suer可以選擇一個項目。

我想展示這個像ul \ li列表，但不知道如何，我確信我可以做一些css的東西，但如何將選定的SelectListItem-Value返回到數據源.. 。？我很確定那裏已經有東西了。任何人都可以將我指向正確的方向嗎？

此致敬禮， Jurjen。

Answer 1

讓我們爲您的屏幕創建一些視圖模型。假設我們正在做一個商店定位器視圖，用戶必須從下拉列表中選擇一個狀態，然後我們將顯示商店屬於單選按鈕中的狀態。

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類的一個對象，並設置國家收集的屬性值，並將其發送給視圖。

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> 

現在，我們需要它接受所選擇的狀態ID，並返回其在一個單選按鈕列表格式存儲名稱的局部視圖一個GetStores操作方法。

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 
} 

現在，當你運行應用程序，當用戶從下拉式的項目，它將帶有單選按鈕的局部視圖。

Here是一個使用上述代碼供您參考的工作示例。