mvc 3 jquery를 사용하여 계단식 드롭 다운 목록을 채우는 방법?

Question

계단식 드롭 다운 목록을로드하는 방법 asp.net mvc3? 내가 어떻게 할 수 있니? 나는 이용하고있다 http://geekswithblogs.net/ranganh/archive/2011/06/14/cascading-dropdownlist-in-asp.net-mvc-3-using-jquery.aspx

나는 할 수 없다. mymistake 무엇입니까? LoadJobByCustomerId 메소드에 디버그 레드 포인트를 추가했습니다.

이

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/ChildSite.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %> 

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"> 
    Index 
</asp:Content> 

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"> 
<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"> 


    $(document).ready(function() { 
     $("#ddlCustomers").change(function() { 
      var idColour = $(this).val(); 
      $.getJSON("/Job/LoadJobByCustomerId", { customerId: idColour }, 
function (modelData) { 
    var select = $("#ddlJobs"); 
    select.empty(); 
    select.append($('<option/>', { 
     value: 0, 
     text: "Select a Colour" 
    })); 
    $.each(modelData, function (index, itemData) { 

     select.append($('<option/>', { 
      value: itemData.Value, 
      text: itemData.Text 
     })); 
    }); 
}); 
     }); 


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

     <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample"> 
       <tr><td>Customer Name: </td><td> 
       <%= Html.DropDownList("Customers", null, "** Please Select **", new { id="ddlCustomers"})%> 
       </td></tr> 
       <tr><td>Job Name:</td><td> 
       <%= Html.DropDownList("Jobs", null, "** Please Select **", new { id = "ddlJobs" })%> 
       </td></tr> 
       </table> 
       <br /> 
       <div> 

       </div> 
     <%}%> 

</asp:Content> 

컨트롤러 :

우선 들어

public class JobController : Controller 
    { 
    public ActionResult Index() 
     { 
      ViewData["Customers"] = new SelectList(CustomerOperation.GetCustomers().Items, "Id", "Name", null); 
      ViewData["Jobs"] = new SelectList(JobOperation.GetCustomersAssemblyList().Items, "scheduleId", "name", null); 
      return View(); 
     } 


     [AcceptVerbs(HttpVerbs.Get)] 
     public JsonResult LoadJobByCustomerId(int customerId) 
     { 
      var jobs = JobOperation.GetCustomersAssemblyList(customerId).Items; 

      var jobItems = jobs.Select(c => new SelectListItem() 
      { 
       Text = c.name, 
       Value = c.scheduleId.ToString() 

      }); 

      return Json(jobItems, JsonRequestBehavior.AllowGet); 
     } 

Answer 1

, 당신이 jQuery를로드하는 <script> 태그가 아닌 working.Pleqase 망가 보기 ... 내가 48 시간 동안 그것을 인터넷 검색을 할 말 제대로 닫혀 있지 :

<script type="text/javascript" src="../../Scripts/jquery-1.4.4.js"> 

그것은 다음과 같이해야한다 :

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.4.js") %>"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#ddlCustomers').change(function() { 
      var idColour = $(this).val(); 
      var url = '<%= Url.Action("LoadJobByCustomerId", "Job") %>'; 
      $.getJSON(url, { customerId: idColour }, function (modelData) { 
       var select = $("#ddlJobs"); 
       select.empty(); 
       select.append($('<option/>', { 
        value: 0, 
        text: "Select a Colour" 
       })); 
       $.each(modelData, function (index, itemData) { 
        select.append($('<option/>', { 
         value: itemData.Value, 
         text: itemData.Text 
        })); 
       }); 
      }); 
     }); 
    }); 
</script> 

<% using (Html.BeginForm()) { %> 
    <table style="padding:25px; margin:10px 10px 10px 10px;" id="sample"> 
     <tr> 
      <td>Customer Name: </td> 
      <td> 
       <%= Html.DropDownList(
        "Customers", 
        null, 
        "** Please Select **", 
        new { id = "ddlCustomers" } 
       )%> 
      </td> 
     </tr> 
     <tr> 
      <td>Job Name:</td> 
      <td> 
       <%= Html.DropDownList(
        "Jobs", 
        null, 
        "** Please Select **", 
        new { id = "ddlJobs" } 
       )%> 
      </td> 
     </tr> 
    </table> 
<% } %> 

또한 jQuery 1.4.4는 다소 오래되었습니다. 어쩌면 당신은 최신 버전으로 전환하고 싶을 것입니다.

내가 코드에서 해결 한 또 다른 일이 ...

대신, 일관성 구멍에 document.ready 핸들러 });을 닫는없는, 깨진 마크 업을 URL을 하드 코딩 및 <tr> 및 <td> 태그를 닫는 URL 헬퍼의 사용입니다

코드 작성/들여 쓰기가 어떻게되어 있는지 잘 모르겠지만 조금 더주의를 기울일 것을 권장합니다.

다음 번에 자바 스크립트 집약적 인 웹 응용 프로그램을 개발할 때 어떤 것이 작동하지 않는다면, 즉각적인 반응은 게시하는 대신 FireBug 콘솔이나 크롬 개발자 툴바 (사용중인 웹 브라우저에 따라 다름)를보아야합니다. 어떤 조사도없이 스택 오버플로. FireBug는 코드에서 커밋 한 오류의 50 % 이상을 경고합니다. 나는이 게시물에 예시 한 바와 같이

는 이 코드의

또한 개선, 뷰 모델과 강력한 형식의 헬퍼의 사용을 도입하여 ViewData 제거하는 것입니다 https://stackoverflow.com/a/4459084/29407

Answer 2

I 좋겠 녹아웃 http://knockoutjs.com/을 사용하고를 만드는 제안 그걸 사용하는 계단식 드롭 다운 목록. 페이지를 구동하는 ViewModel을 만들면보다 관리하기 쉬운 코드를보다 깔끔하게 작성할 수 있습니다.

이 문서 http://weblogs.asp.net/raduenuca/archive/2011/03/06/asp-net-mvc-cascading-dropdown-lists-tutorial-part-1-defining-the-problem-and-the-context.aspx

우리는 대륙, 지역, 국가의 모든 시간 유사한 기술을 사용하여 코드를 유지하고 확장하는 것은 매우 쉽습니다에서보세요.