MVC 4 ListBox, заполненный другим ListBox

Question

Мне нужен подход к тому, как заполнить ListBox в представлении в зависимости от выбранного значения в другом ListBox в том же представлении.

например, мне понадобится ListBox городов, заполненных именем страны, выбранной в другом ListBox.

ТНХ заранее и извините за мой английский

Answer 1

В главном контроллере я решил использовать коллекцию инициализатор для создания списка стран, но что более важно, я чувствовал, что код был чище, используя ViewBag динамическим над ViewData ,

public ActionResult Index() 
    { 
     var countries = new List<string> {"USA", "UK", "India"}; 
     var countryOptions = new SelectList(countries); 
     ViewBag.Countries = countryOptions; 
     return View(); 
    } 

Следующий метод действия GetStates(). Здесь я сделал одно изменение, которое позволяет мне получать состояния по запросу HttpGet. Причина этого заключается в том, что я считаю, что HttpGet наилучшим образом подходит для этого запроса, поскольку мы просто извлекаем информацию из сервера. Если бы мы добавляли или обновляли состояния, тогда требовался запрос HttpPost.

public JsonResult GetStates(string country) 
    { 
     var states = new List<string>(); 
     switch (country) 
     { 
      case "USA": 
       states.Add("California"); 
       states.Add("Florida"); 
       states.Add("Ohio"); 
       break; 
      case "UK": 
       states.Add("London"); 
       states.Add("Essex"); 
       break; 
      case "India": 
       states.Add("Goa"); 
       states.Add("Punjab"); 
       break; 
     } 

     //Add JsonRequest behavior to allow retrieving states over http get 
     return Json(states, JsonRequestBehavior.AllowGet); 
    } 

Вторая, и последняя часть моего решения - файл Index.cshtml. В этом файле у меня есть html для формы, а также javascript, необходимый для извлечения состояний с сервера.

@using (Html.BeginForm()) 
{ 
    <div>Select country:</div> 
    <div>@Html.DropDownList("country", 
          ViewBag.Countries as SelectList, 
          "Please select", 
          new { id = "country" }) 
    </div> 
    <div>Select state:</div> 
    <div> 
     <select id="state" disabled="disabled"></select> 
    </div> 
    <input type="submit" value="Submit"/> 
} 


@section scripts 
{ 
    <script type="text/javascript"> 
     $(function() { 
      $('#country').on('change', function() { 
       var stateDropdown = $('#state'); 
       //disable state drop down 
       stateDropdown.prop('disabled', 'disabled'); 
       //clear drop down of old states 
       stateDropdown.empty(); 

       //retrieve selected country 
       var country = $(this).val(); 
       if (country.length > 0) { 
        // retrieve data using a Url.Action() to construct url 
        $.getJSON('@Url.Action("GetStates")', { 
         country: country 
        }) 
        .done(function (data) { 
         //re-enable state drop down 
         stateDropdown.removeProp('disabled'); 
         //for each returned state 
         $.each(data, function (i, state) { 
          //Create new option 
          var option = $('>option /<').html(state); 
          //append state states drop down 
          stateDropdown.append(option); 
         }); 
        }) 
        .fail(function (jqxhr, textStatus, error) { 
         var err = textStatus + ", " + error; 
         console.log("Request Failed: " + err); 
        }); 
       } 
      }); 
     }) 
    </script> 
}