Отображение значений во втором раскрывающемся списке, соответствующих выбранному элементу первого раскрывающегося списка

Question

Форма содержит два выпадающих списка, созданных с использованием кода ниже.Оба раскрывающихся списка имеют свойство Alusdok.Если выбран элемент в первом раскрывающемся списке, во втором раскрывающемся списке должны отображаться только те элементы, свойства Alusdok которых имеют те же дополнительные свойства, что и в выбранном элементе первого свойства Alusdok.

Оба списка небольшие, содержат 1-30 элементов.Какой лучший интерфейс для этого?Как это реализовать, можно ли применить магию jQuery или другую идею?

<%= Html.DropDownList("_Report", Model.Reports, new { size = 10 })%>
<%= Html.DropDownList("_Paring", Model.Parings, new { size = 10 })%>


viewmodel:

    public class ReportViewModel : ViewModelBase
    {
public List<SelectListItem> Reports { get; set; }
public string _Report { get; set; }
public List<SelectListItem> Parings { get; set; }
public string _Paring { get; set; }

public ReportViewModel() {
...
            Reports = new List<SelectListItem>();
            foreach (ReportElem r in GetReportList())
                Reports.Add(new SelectListItem { Text = r.Nimetus, Value = r.Alusdok + r.Jrk.ToString() });

            Parings = new List<SelectListItem>();
            foreach (ParingElem p in GetParings())
                Parings.Add(new SelectListItem { Text= p.DisplayName, Value= p.Id.ToString() });
        }
    }


public class ReportElem {
  public string Nimetus,Alusdok;
  public int Jrk;
  }

public class ParingElem {
  public string DisplayName, Alusdok;
  public int Id;
  }

Я использую ASP.NET MVC2, jQuery, jQueryUI

Answer 1

Вы можете создать действие, которое принимает значение ReportElem.Alusdok и возвращает список JSON из ParingElem объектов.

[HttpPost]
public ActionResult GetParingElems(string parentAlusdok)
{
    // construct a list formatted like this from your data layer, etc
    List<ListItem> list = new List<ListItem>() {
        new ListItem() { Value = "1", Text = "Alusdok 1" },
        new ListItem() { Value = "2", Text = "Alusdok 2" },
        new ListItem() { Value = "3", Text = "Alusdok 3" }
    };

    return Json(list);
}

Затем вы можете использовать jQuery для вызова этого действия и заполнения второго раскрывающегося списка.список.Похоже, ваши выпадающие списки имеют идентификаторы: _Report и _Paring, поэтому я предполагаю, что ниже.

$('#_Report').change(function() {
    $.ajax({
        url: 'GetParingElems',
        type: 'POST',
        data: { parentAlusdok: $('#_Report').val() },
        dataType: 'json',
        success: function(data) { // this is the returned JSON list
            $('#_Paring').remove();
            // iterate over data
            // i and optionData are arbitrary variable names
            $.each(data, function (i, optionData) {
                $('#_Paring').append(
                    $('<option></option>').val(optionData.Value).html(optionData.Text)
                );
            });
        }
    });
});

Имейте в виду, что вам может потребоваться изменить свою маршрутизацию (возможно, в global.asax), чтобы принятьзапросы формы /ControllerName/GetParingElems/{parentAlusdok}.Вам также может понадобиться настроить аргумент url вызова $.ajax, если ваше действие находится в другом контроллере и т. Д.