mvc4：級聯下拉

Question

我似乎無法讓我的周圍Ajax和JSON

的頭，我想要做一個級聯下拉，我試圖將數據得到一個div，開始了。 這裏是腳本

<script src="~/Scripts/jquery-ui-1.8.20.js"></script> 
<script src="~/Scripts/jquery-ui-1.8.20.min.js"></script> 
<script> 

    $(function() { 
     $('#funtiontype').change(function() { 
      var selectedValue = $(this).val(); 

      $.ajax(
       { 
        // url: $(this).data('url'), 
        // source: "/EmployeeReps/GetDescription", 
       url: "~/EmployeeReps/GetDescription", 
       type: 'GET', 
       cache: false, 
       data: {value: selectedValue }, 
       success: function (result) { 
         $('#description').html(result.employeelist); 
        } 
       }); 

      }); 

     }); 

</script> 

而且控制器

[AcceptVerbs(HttpVerbs.Get)] 
     public ActionResult GetDescription(string value) 
     { 

      //get the data from DB 
      var employeelist =(from s in db.tble_employeeReps where s.em_function==value 
          select s); 


      return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet); 
     } 

的HTML @using（Html.BeginForm（））{

<fieldset> 

     <div class="editor-label">Function*</div> 
     <div class="editor-field"> 

      <select id = "funtiontype"> 
       <option value = "">Please Select</option> 
       <option value = "Finance">Finance</option> 
       <option value = "Non-Finance">Non-Finance</option> 
      </select> 
     </div> 

     <p></p> 
     <p> 
      <input type="submit" value="Vote" /> 
     </p> 
    </fieldset> 
    <div id="description"></div> 
} 

但我努力讓任何數據。請誰能幫助

很多感謝 碎甲彈

Answer 1

這條線在你的控制器：

 return Json(employeelist.ToList(), JsonRequestBehavior.AllowGet); 

正在改變你的員工名單成JSON字符串。該字符串是一個對象數組。

在你的Ajax調用：

 $.ajax(
      { 
       // url: $(this).data('url'), 
       // source: "/EmployeeReps/GetDescription", 
      url: "~/EmployeeReps/GetDescription", 
      type: 'GET', 
      cache: false, 
      data: {value: selectedValue }, 
      success: function (result) { 
        $('#description').html(result.employeelist); 
       } 
      }); 

     }); 

result是同一對象的數組。 result將不會有名爲employeelist的屬性。它實際上是一羣員工。

您需要循環，陣列上，並創建HTML以顯示員工：

 $.ajax({ 
      url: "~/EmployeeReps/GetDescription", 
      type: 'GET', 
      cache: false, 
      data: {value: selectedValue }, 
      success: function (result) { 
       var employeeHTML = ""; 
       for(count = 0; count < result.length; count++) { 
        employeeHTML += "<p>" + result[count].EmployeeName + "</p>"; //your fields here 
       } 
       $('#description').html(employeeHTML); 
      }); 
     });