如何使用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> 

请注意所提供的代码是只说明概念。