2011-02-04 3 views
2

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

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

Country Name, 
Country Id 

район структура таблицы.

District id 
Country id 
District name 

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

+0

здесь что-то подобное http://mrgsp.md:8080/awesome/ajaxdropdowndemo – Omu

ответ

-2

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

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

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

+4

Там нет «AutoPostBack» в asp.net MVC – stephen776

+0

Я Бесполезный Не говори. Вам просто нужно сделать это самостоятельно с помощью javascript, поэтому я сказал «setup AutoPostback» вместо «установить свойство AutoPostBack равным true». –

5

это своего рода легко ...

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

второй выпадающий как легко но просто занимает немного больше кода:

все, что вам нужно сделать, это вызвать метод и отправить значение первого выпадающего списка, то в методе, просто вызовите БД и возвращает 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); 
}