將Json結果綁定到下拉列表

Question

我想使用ajax填充下拉列表，但出現錯誤。如何使用ajax/jquery將Json結果綁定到下拉列表。所以任何幫助將不勝感激。 這是我的控制器。

 public JsonResult GetMonths(int YearId) 
    { 
     CCIRepository _repository = CCIRepository.CreateRepository(); 
     List<MonthListClass> list = new List<MonthListClass>(); 
     list = _repository.GetMonthFromImportDate(YearId); 
     return Json(new SelectList(list, "Value", "Text")); 
    } 

這是我的Ajax代碼。

 <p> 
    <h3>Year:</h3>@Html.DropDownList("Yearitems",  (IEnumerable<SelectListItem>)ViewBag.SelectList, "Select Year") 
    <h3>Month:</h3>@Html.DropDownList("MonthItems",(IEnumerable<SelectListItem>)ViewBag.SelectMonthList,"Select Month") 
</p> 
<p><input type="submit" value="Search" /></p> 

<script> 
    $(document).ready(function() { 
     $("#Yearitems").change(function() { 
      debugger; 
      alert($("#Yearitems>option:selected").attr("Value")); 
      $.ajax({ 
       type: "Get", 
       url: '@Url.Action("GetMonths","AirtelManagement")', 
       data: { YearId: $("#Yearitems>option:selected").attr("Value") }, 
       datatype: "Json", 
       success: function (data) { 
        debugger; 
        $("#MonthItems").empty(); 
        $.each(data, function (index, item) { 
         debugger; 
         $("#MonthItems").append('<option>', { 
          value: item.value, 
          text: item.text 
         }, '</option>') 
        }); 
        //$("#MonthItems").html(items); 
       }, 
       error: function() { 
        alert("An Error Occured"); 
       } 
      }); 
     }); 
    }); 
</script> 

Answer 1

根據您所提供的信息，我會讓這樣

[HttpPost] 
public JsonResult GetMonths(int YearId) 
{ 
    CCIRepository _repository = CCIRepository.CreateRepository(); 
    List<MonthListClass> list = new List<MonthListClass>(); 
    list = _repository.GetMonthFromImportDate(YearId); 
    return Json(list); 
} 

，並在腳本

 type: "POST", 
     url: '@Url.Action("GetMonths","AirtelManagement")', 
     data: JSON.stringify({ YearId: $("#Yearitems").val() }), 
     datatype: "Json", 
     success: function (data) { 

       $("#MonthItems").html(""); 
       $.each(data, function (index, item) { 
        debugger; 
        $("#MonthItems").append(new Option(item.MonthName, item.MonthSelectedId)); 
       }); 
       //$("#MonthItems").html(items); 
      }, 

試試吧