Asp.net MVC는 JQuery로 목록 상자를 채우는가?

양식의 드롭 다운 상자에 수령인 목록이 있습니다. 포스트 송스 (Post Backs) 및 모든 것없이 수취인 드롭 다운의 선택된 항목에 따라 다른 드롭 다운을 채우고 싶습니다.Asp.net MVC는 JQuery로 목록 상자를 채우는가?

 private JsonResult GetCategories(int payeeId) 
    { 
     List<CategoryDto> cats = Services.CategoryServices.GetCategoriesByPayeeId(payeeId); 
     List<SelectListItem> items = new List<SelectListItem>(); 

     foreach(var cat in cats) 
     { 
      items.Add(new SelectListItem {Text = cat.Description, Value = cat.CategoryId.ToString()}); 
     } 

     return Json(items); 

    }

지금, 나는이 작업을 얻을 내보기에 추가 할 것을 확실하지 오전 :

그래서 저는 작업을 수행 내 컨트롤러의 방법을 만들었습니다. 순간

, 모두 내가 가진이있다 :

<% using (Html.BeginForm()) 
    {%> 

    <p> 
    <%=Html.DropDownList("SelectedAccountId", Model.Accounts, "Select One..", null) %> 
    </p> 
    <p> 
    <%=Html.DropDownList("SelectedPayeeId", Model.Payees, "Select One...", null) %> 
    </p> 

         <input type="submit" value="Save" /> 
<% 
    }%>

들은 사용자가 SelectedPayeeId가 드롭 다운 선택하면 그래서, 그 다음 새로운 채울한다 ... 잘 채우는 (? 아직 생성되는) SelectedPayeeId를 기반으로 카테고리를 보유하는 드롭 다운.

그래서 JQuery 함수를 만들 필요가 있다고 생각합니다. JQuery는 결코 OnChange 이벤트의 수취인 드롭 다운을 모니터링하는 JQuery를 만들지 않습니다. 그런 다음 위에 작성한 메소드를 호출하십시오. 이 소리는 맞습니까? 그렇다면, 이것을 달성하는 방법을 안내해 주시겠습니까?

출처

2011-01-29 Craig

당신의 추론은 완전히 소리입니다. 먼저 jquery 라이브러리를 View/Master에 포함시키고 자한다. http://jquery.com/에서 jquery의 사본을 다운로드 할 수 있습니다. 파일을 프로젝트에 추가하고 문서의 <head>에 <script src="/path/to/jquery.js">을 포함시킵니다. 보기에 다른 드롭 다운을 추가하려고합니다 (그리고 아마도 모델에 대한 다른 속성).

<%=Html.DropDownList("SelectedCategoryId", null, "Select One...", new { style = "display:none;"}) %>

우리는 그 안에 선택 아무것도 없기 때문에 처음에 볼 수 없습니다이 드롭 다운의 스타일을 설정 한 : 우리는이 'SelectedCategoryId'를 부를 것이다. 나중에 콘텐츠를 생성 한 후에 보여 드리겠습니다. 이에 (

$(document).ready(function() { $('#SelectedPayeeId').change(function() { 
$.ajax({ 
    type: 'POST', 
    url: urlToYourControllerAction, 
    data: { payeeId: $(this).val() }, 
    success: function(data) { 
    var markup = ''; 
    for (var x = 0; x < data.length; x++) { 
     markup += '<option value="' + data[x].Value + '">'+data[x].Text+'</option>'; 
    } 
    $('#SelectedCategoryId').html(markup).show(); 
    } 
}); }); });

이 코드는 'SelectedPayeeId'의 ID와 DOM 요소에 위에 기록 된 익명 함수를 결합 : 자, 어딘가 페이지에 당신은 다음과 같이 보일 것입니다 <script> 블록을 포함 할 것 사례 드롭 다운). 이 함수는 메서드의 url에 대한 AJAX 호출을 수행합니다. 요청 결과 (JSON을 반환 함)를 받으면 배열을 반복하고 문서에 삽입 할 html 문자열을 작성합니다. 마지막으로 html을 'SelectedCategoryId'요소에 삽입하고 사용자가 볼 수 있도록 요소의 스타일을 변경합니다.

이 코드는 실행하지 않았지만 필요한 코드가 거의 있어야합니다. jQuery의 문서는 http://docs.jquery.com/Main_Page에서 사용할 수 있고 내가 위에서 사용 된 기능은 여기에 참조됩니다 :

출처

2011-01-29 03:32:55

당신이 필요할 것

GetCategories를 a로 만듭니다. 컨트롤러의 액션 핸들러에 해당하는 public 메소드.이 코드를 테스트하지 않았습니다

<script type="text/javascript"> 
    $(function() { 
$('#SelectedPayeeId').change(function() { 
      $.get('<%= Url.Action("GetCategories", "YourControllerName") %>', 
        {payeeId: $(this).val()}, 
        function(data) { 
         populateSelectWith($("#Category"), data); 

      }); 
     }); 
    //Place populateSelectWith method here 
}); 
</script> 
The populateSelectWith can fill your dropdown with data like: 

    function populateSelectWith($select, data) { 
    $select.html(''); 
    $select.append($('<option></option>').val('').html("MYDEFAULT VALUE")); 
    for (var index = 0; index < data.length; index++) { 
     var option = data[index]; 
     $select.append($('<option></option>').html(option)); 
     } 
    }

,하지만 난 괜찮 실행 바라고 : 같은

귀하의 jQuery 코드를 볼 수 있습니다.

당신이 구문을 찾을 수 JQuery와 아약스 얻을 here 서버에 데이터를 게시하지 않기 때문에, 당신은뿐만 아니라 [HttpGet] 속성

와 컨트롤러 액션을 장식 할 수 있습니다

출처

2011-01-29 03:38:58 WorldIsRound

Asp.net MVC는 JQuery로 목록 상자를 채우는가?

답변

관련 문제