이전 목록 (mvc3)을 기반으로 드롭 다운 목록 채우기

Question

두 개의 드롭 다운리스트가 있는데 첫 번째 항목을 선택하고 두 번째 ddl을 트리거하고 db의 특정 데이터를 표시하려고합니다. 예를 들어 첫 번째 ddl1은 (states)를 포함하고 ddl2는 동적으로 도시를 표시합니다.

컨트롤러 상태를로드합니다

ViewBag.ddlStates= new SelectList(db.State, "StateCode", "Title"); 
    return View(); 

보기 :

@Html.DropDownList("ddlStates") 
    @Html.DropDownList("ddlCities", String.Empty) 

어떻게 그냥 AJAX를 사용하여 ... DDL 상태 값이 변경 될 때, 데이터베이스를 호출하고 동적으로 도시를 얻을 수 있도록 트리거 것 ddl/partialView를 다시로드 하시겠습니까?

컨트롤러에서 ddlState select select action (PartialViewResult)을 사용하면 도시 목록을 동적으로 생성하여보기로 다시 보낼 수 있습니까?

Thx!

Answer 1

당신은 jQuery를 함께 첫 번째 드롭 다운의 변화() 이벤트를 사용할 수 있습니다

$('#ddlStates').on('change', function() { 

    $.ajax({ 
     type: "POST", 
     url: 'Controller/GetCities', 
     data: $(this).val(), 
     success: function(response) { 
      $('#ddlCities').html(response); 
     } 
    }); 

}); 

'컨트롤러/GetCities은'당신과 함께 도시 <option>의 새 목록을 부분 뷰를 반환하는 행동 경로가 될 것입니다 s 게시 된 선택한 val을 기반으로합니다.

다음은 다음과 같이 보일 것을 게시 조치 :이 같은 뷰 뭔가

  [HttpPost] 
    public ActionResult GetCities(GetCitiesViewModel model) 
    { 
     var selectedState = model.ddlStates; 
     IEnumerable<CityViewModel> cities = GetCitiesInState(selectedState); 
     IEnumerable<SelectListItem> filteredItems = 
      cities.Select(c => new SelectListItem {Text = c.Name, Value = c.CityId.ToString()}); 

     return PartialView("CityList", filteredItems); 
    } 

    private IEnumerable<CityViewModel> GetCitiesInState(int stateId) 
    { 
     // Just returning a list regardless of state ID. But you would look the cities up by state here. 
     return new List<CityViewModel> 
      { 
       new CityViewModel {CityId = 1, Name = "London"}, 
       new CityViewModel {CityId = 2, Name = "Birmingham"}, 
      }; 
    } 

    public class CityViewModel 
    { 
     public int CityId { get; set; } 

     public string Name { get; set; } 
    } 

    public class GetCitiesViewModel 
    { 
     public int ddlStates { get; set; } 
    } 

는 :

@model System.Collections.Generic.IEnumerable<System.Web.Mvc.SelectListItem> 
@{ Layout = null; } 

@foreach (var city in Model) 
{ 
    <option value="@city.Value">@city.Text</option> 
} 

Answer 2

내 사이트 중 하나에 비슷한 있습니다. 도시를 Json으로 반환하는 컨트롤러 액션을 사용합니다. 내가 사용하고있는 jQuery는 상태에 대해 선택된 값이 없을 때 도시 드롭 다운을 지우고 비활성화합니다. 여기

가 여기 내 마크 업

@Html.LabelFor(model => model.StateCode) 
@Html.DropDownList("StateCode", string.Empty) 
@Html.LabelFor(model => model.CityID) 
@Html.DropDownList("CityID", string.Empty) 

있는 JQuery와있다

$("select#StateCode").bind('change', function() { 
    var StateCode = $("select#StateCode option:selected").val(); 
    if (StateCode == "" || StateCode == 0) 
    { 
     $("select#CityID").empty(); 
     $("select#CityID").attr('disabled', 'disabled'); 
    } 
    else 
    { 
     $.getJSON('@Url.Action("GetCityiesForState")', { StateCode: StateCode }, function (data) { 
      $("select#CityID").empty(); 
      $.each(data, function (i, c) { 
       $('select#CityID').append('<option value="' + c.Value + '">' + c.Text + '</option>'); 
      }); 
      $("select#CityID").removeAttr('disabled'); 
      $("select#CityID option:first").attr('selected', 'selected'); 
     }); 
    } 
}); 

컨트롤러 액션

public JsonResult GetCityiesForState(string stateCode) { 
    var cities = repository.getCities(stateCode); 
    return Json(cities, JsonRequestBehavior.AllowGet); 
}