如何使用MVC3在下拉列表中顯示數據？

Question

我創造MVC3搜索應用程序，我有2個表：ID（PK），S_ID（FK），District_name

我： 1.State：ID（PK）和STATE_NAME 2.District首先使用代碼和EF和具有數據庫創建了它所謂的搜索

我希望我的索引顯示在下拉所有狀態下拉列表

以下是我State.cs代碼

public partial class State 
{ 
    public State() 
    { 
     this.Districts = new HashSet<District>(); 
     this.Search_master = new HashSet<Search_master>(); 
    } 

    public int Id { get; set; } 
    public string State_name { get; set; } 

    public virtual ICollection<District> Districts { get; set; }} 

這是我區等級：

public partial class District 
{ 
    public District() 
    { 
     this.Search_master = new HashSet<Search_master>(); 
    } 

    public int Id { get; set; } 
    public string District_name { get; set; } 
    public int StateId { get; set; } 

    public virtual State State { get; set; } } 

我還爲國家及地區的一個視圖模型....

public class State_district 
{ 
    public string selectedstate { get; set; } 
    public IEnumerable<State> states { get; set; } 
    public string selecteddistrict { get; set; } 
    public IEnumerable<District> districts { get; set; } 
} 

內部控制我寫了：

public ActionResult Index() 
    { 
     var model = new State_district { states = db.States, districts = db.Districts }; 
     return View(model);} 

視圖：

<div class="editor-field" id="districtID">*Select State:- 
     @Html.DropDownListFor(x => x.states, new SelectList(Model.states, "Id", "State_Name")) 
     </div> 

With這我能夠看到我的第一ddl，但我怎麼能綁定它與我的第二個名單.....

我需要的代碼，幫助我只顯示選定的狀態區.....只要任何人幫助我與jQuery代碼...

謝謝你提前！

Answer 1

你試圖實現一個動態/級聯下拉列表，並有在互聯網上大量的資源，它可以幫助您與此：

• Such as this
• Or this
• 而對谷歌更

一個簡單的非AJAX實現可以這樣工作：

你有你的第一個下拉列表，通常創建：

@Html.DropDownListFor(x => x.states, new SelectList(Model.states, "Id", "State_Name"), new {id = "states"}) 

你的第二個下拉菜單，或相關的下拉列表中，將需要存儲哪些父項目的每個項目相關聯的一些信息。例如：

<select name="selecteddistrict" id="districts"> 
@foreach (var district in Model.districts) 
{ 
    <option value="@district.Id" data-state-id="@district.StateId">@district.District_name</option> 
} 
</select> 

請注意下拉菜單中的每個條目如何具有附加屬性data-state-id。我們需要這些信息來了解給定當前活動狀態的值。

然後您可以添加相應的事件處理程序負責處理您的主要下拉的變化事件，並更新相關的下拉列表：

<script type="text/javascript"> 

$(function() { 
    $("#states").change(onStateChange).change(); // fire for initial setup 
}); 

function onStateChange() { 
    var districtDropdown = $('#districts'); 
    districtDropdown.find('option').hide(); 
    var districtsForState = $(districtDropdown.find('option[data-state-id=' + $(this).val() + ']')); 
    districtsForState.show(); 
    districtDropdown.val(districtsForState.val()); 
} 

</script> 

請注意所提供的代碼是隻說明概念。