ASP.NET MVC множественный комбинированный список

Question

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

Структура таблицы стран:

Country Name,
Country Id

Структура таблицы округа.

District id
Country id
District name

Кто-нибудь может мне помочь?

Answer 1

это довольно просто ...

1-й выпадающий список легко , просто передайте IEnumerable в модели и вуаля.

2-йраскрывающийся список так же просто , но просто требует немного больше кода:

все, что вам нужно сделать, это вызвать метод и отправить значение первого раскрывающегося списка, а затем в вашем методе просто вызвать DBи верните JsonResult

пример:

<select id="dropdown1">
    <option value="" selected="true">Select country</option>
    <% foreach(var country in Model.Countries) { %>
        <option value="<%= country.Id %>"><%= country.Name %></option>
    <% } %>
</select><br/>
<select id="dropdown2"></select>

в конце страницы

<script>

 $(document).ready( function() {

    $("#dropdown1").bind("change", function() {
        // everytime the value of the dropdown 1 is changed, do this:

        var countryId = $("#dropdown1").val();

        $.get("/country/getDistricts", { 'country' : countryId }, function(data) { 
            $("#dropdown2").empty(); // clear old values if exist

            var options = "";

            for(i = 0; i < data.length; i++) { // build options
                options += ("<option value='" + data[i].districtId + "'>" + data[i].districtName + "</option>");
            }
            $("#dropdown2").append(options);
        });
    });
 });

</script>

в вашем действии на country Контроллер

public ActionResult getDistricts(string country)
{
    List<Districts> districts = dbRepository.GetDistrictsByCountryId(country);

    return Json(districts, JsonRequestBehavior.AllowGet);
}

Answer 2

Есть два возможных способа достижения этого.

Либо поместите все комбинации в html, либо используйте javascript, чтобы изменить содержимое второго комбо при выборе в первом комбо.

Или настройте AutoPostbackв первом комбо и заполните второй на стороне сервера в зависимости от выбранного значения первого комбо.