MVC 드롭 다운리스트, onchange

Question

나는 2 개의 Dropdownlistfor in html, dropdownlistfor 국가 및 드롭 다운리스트를 가지고있다. MVC를 사용하고 있는데, 나는 이렇게 출력하고 싶다. 내가 선택한 국가를 변경하면 선택한 국가의 상태가 드롭 다운리스트 상태로 채워진다. 국가 및 국가의 데이터를 데이터베이스에서 가져 오는 중이며 상태 테이블에는 countryId 필드가 있습니다. 도와 주셔서 감사합니다.

여기에 Html의 샘플 코드가 있습니다. 제대로 드롭 다운에 결합되어 Id 여부를 확인하고 난에 행동에 더미 코드를 작성했습니다 :

  <div class="fieldBlock"> 
       <div><label>Country</label>&nbsp;*</div> 
       <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div> 
       @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation) 
       <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
      </div> 

      <div class="fieldBlock"> 
       <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div> 
       <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305" })</div> 
       <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
      </div> 

Answer 1

이보기에

컨트롤러에서

<script type="text/javascript"> 
    $(function() { 
      $("#ddlCountry").change(function() { 
       var selectedItem = $(this).val(); 
       var ddlStates = $("#ddlState"); 
       var statesProgress = $("#states-loading-progress"); 
       statesProgress.show(); 
       $.ajax({ 
        cache: false, 
        type: "GET", 
        url: "@(Url.Action("SomeAction", "SomeController"))", 
        data: { "countryId": selectedItem}, 
        success: function (data) { 
         ddlStates.html(''); 
         $.each(data, function(id, option) { 
          ddlStates.append($('<option></option>').val(option.id).html(option.name)); 
         }); 

        }, 
        error:function (xhr, ajaxOptions, thrownError){ 
         alert('Failed to retrieve states.'); 

        } 
       }); 
      }); 
     }); 
    </script> 


<div class="fieldBlock"> 
    <div><label>Country</label>&nbsp;*</div> 
    <div>@Html.DropDownListFor(model => model.Country.Id, Model.CountrySelectList, new { @class = "width305", @id = "ddlCountry" })</div> 
    @Html.HiddenFor(model => model.Country.Name) @Html.HiddenFor(model => model.Country.Abbreviation) 
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
</div> 

<div class="fieldBlock"> 
    <div>@Html.LabelFor(model => model.Employee.StateId, "State/Province")&nbsp;*</div> 
    <div>@Html.DropDownListFor(model => model.Employee.StateId, Model.CountryStateProvinceSelectList, new { @class = "width305", @id = "ddlState" })</div> 
    <div>@Html.ValidationMessageFor(model => model.Employee.StateId)</div> 
</div> 

public ActionResult SomeAction(string countryId) 
{ 
    //perform your action here 
    var states = _stateProvinceService.GetStateProvincesByCountryId(country.Id).ToList(); 
    var result = (from s in states 
        select new { id = s.Id, name = s.GetLocalized(x => x.Name) } 
       ).ToList(); 

    return Json(result, JsonRequestBehavior.AllowGet); 
} 

참고하십시오 국가를 얻으십시오.