Question

我在mvc3中创建了一个搜索应用程序，其中有2个表： 1.State：Id（pk）和state_name 2.District：Id（pk），s_id（f.k。），District_name

我首先使用代码和EF并为其创建了名为Search

的数据库

我希望我的索引显示下拉列表中的所有状态

以下是我的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; } }

我还为州和区创建了一个viewmodel ....

  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>

有了这个我能看到我的第一个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"})

您的第二个下拉列表或相关下拉列表将需要存储有关每个项目与哪个父项目相关联的信息。 e.g：

<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。我们需要这些信息，以便知道给定当前活动状态的值。

然后你会添加一个事件处理程序来处理主要下拉列表中的change事件，并相应地更新相关的下拉列表：

<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>

请注意，所提供的代码仅用于演示此概念。

如何使用MVC3在下拉列表中显示表中的数据？

1 个答案: