MVC 4列表框填充另一个列表框

Question

我需要一个方法如何在视图中填充列表框取决于在同一视图中的另一个列表框中的选定值。

例如，我需要一个城市列表框填充在另一个列表框中选择的国家的名称。

THX提前对不起我的英语

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> 
}