Как показать данные из таблицы в раскрывающемся списке, используя MVC3?

Question

Я создаю поисковое приложение в mvc3, где у меня есть 2 таблицы: 1.State: Id (pk) и имя_состояния 2.District: Id (pk), s_id (fk), District_name

IСначала я использую код и EF, и для него создана база данных с именем Search

. Я хочу, чтобы в моем индексе отображались все состояния в раскрывающемся списке

. Ниже приведен мой код State.cs

* 1008.*

это мой класс District:

 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>

С этим я могу видеть мой первый ddl, но как я могу связать его со своим вторым списком .....

Мне нужен код, который поможет мне показать район только из выбранного штата ..... Кто-нибудь может мне помочь с кодом JQuery ...

заранее спасибо !!

Answer 1

Вы пытаетесь реализовать динамический / каскадный выпадающий список, и в Интернете есть много ресурсов, которые могут помочь вам в этом:

• Вот так
• Или это
• И многое другое в Google

Простая реализация без 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>

Обратите внимание, что приведенный код предназначен только для демонстрации концепции.