2009-10-21 3 views
1

에 따라 나는 누군가가 내가 선택한 카테고리에 따라 하위 범주를로드 할 수있는 방법을 알고 있는지 궁금 해서요이ASP.NET MVC -로드 dropdownlists는 선택된 값

<% using (Html.BeginForm()) {%> 
    <%= Html.DropDownList("Category") %> 
    <%= Html.DropDownList("SubCategory") %> 
    <input type="submit" value="Print" /> 
    <%= Html.ActionLink("Cancel", "Index") %> 
<% } %> 

다소 비슷 볼 수 있나요? webforms에서이 작업을 수행하기 위해 autopostback 이벤트를 사용 하겠지만 MVC 프레임 워크를 사용하여이 작업을 수행하는 방법에 대해서는 약간 혼란 스럽습니다.

미리 감사드립니다.

답변

2

은 다음과 같이보기를 변환

<%= Html.DropDownList("SubCategory",Model.SelectList) %> 

는 모델 클래스

public class MyModel 
{ 
    public SelectList SelectList {get;set;} 
} 

컨트롤러를 만들를 만들 액션

public ActionResult SubCategories(int id) 
{ 
    MyModel model = new MyModel(); 
    model.SelectList = new SelectList(YourRepository.GetSubCategories(id),"Id","Name"); 
    return View(model); 
} 
+0

부분보기에서 드롭 다운을보고 재사용 할 수 있습니다. 따라서 두 개의 드롭 다운을 사용하는 대신 하나의 부분보기를 가질 수 있습니다. 스타일을 조금 더 쉽게 만들고 일을 한 번만하면됩니다. 나는 이것이 하나의 드롭 다운으로 조금 중복되지만 내 경험에서 이것은 더 큰 재사용 가능한 성분을 가진 제 2 천성이된다. – griegs

+0

두 번째 드롭 다운은 SubCategories.aspx라는 부분 뷰에있다. – Gregoire

+0

다른 드롭이 있다면 카테고리와 하위 카테고리에 모두 의존하는 하위 카테고리를 사용하면 다른 부분보기에도 배치하는 것이 좋습니다. – AlteredConcept

1

드롭 다운 목록을 PartialView 내에 배치하십시오. 그런 다음 PartialView ("viewName", model) 리턴을 게시 할 때. 그런 다음 jQuery를 반환하면 부분 뷰가 반환 된 새 html로 대체됩니다.

당신은 전망입니다.

<div id="myPartialView"> 
    <% Html.PartialView("PartialViewName", model); %> 
</div> 

그런 다음 jQuery를이

$('#myPartialView').html = retHtml; 

귀하의 C#을

return PartialView("PartialViewName", model); 

안된 같은 무언가를하지만 내가 당신을 먹고 싶어 생각하는 방식입니다. 거기에

<% using (Html.BeginForm()) {%> 
    <%= Html.DropDownList("Category", Model.SelectList, new {onchange = "actualize(this);"}) %> 
    <div id="selectdiv"> 
    <% Html.RenderPartial("SubCategories"); %> 
    </div> 
    <input type="submit" value="Print" /> 
    <%= Html.ActionLink("Cancel", "Index") %> 
<% } %> 

<script type="text/javascript"> 

function actualize(obj) 
{ 
    $.ajax({ 
     url: url, 
     async: true, 
     type: 'POST', 
     data: { id: obj.value }, 
     dataType: 'text', 
     success: function(data) { $("#selectdiv").html(data); }, 
     error: function() { 
      console.log('Erreur'); 
     } 
    }); 
} 

</script> 

이 SubCategories.aspx라는 컨트롤을 생성하고 다음과 같습니다 :