Bind Json Результат для DropDownlist в MVC4

Question

Я пытаюсь реализовать каскадный выпадающий список в mvc4. Я использовал значения словаря для 1-го списка dropdownlist и binded xml для второго выпадающего списка. Основываясь на выборе страны (1-й DDL), состояния должны быть загружены (2-й DDL). Как связать jsonresult со вторым выпадающим списком с помощью jQuery. JsonResult хорошо возвращается в firebug. Какая ошибка в моем скрипте. Любые предложения будут очень полезными.

Вот мой код.
Посмотреть

@using (Html.BeginForm("Details", "WPWebGridCart", new { userID = Request.QueryString["UserID"], partnerid = Request.QueryString["Partnerid"] }, FormMethod.Post)) 
{ 
    if (Model.Count() == 0) 
    {  
     @Html.DisplayNameFor(model => model.Country) 
    @{ 
      Dictionary<string, string> dictionary = new Dictionary<string, string>(); 
      dictionary.Add("USA", "USA"); 
      dictionary.Add("UK", "UnitedKingdom"); 
      dictionary.Add("India", "India"); 
      SelectList list = new SelectList(dictionary, "value", "key", "India"); 
     } 
     @Html.DropDownList("Country", list, "(Select Country)", new { @class = "TextBoxBorder" }) 
    @Html.DisplayNameFor(model => model.State) 
     @if (ViewData["PageOptions"] != null) 
      { 
       @Html.DropDownList("State", ViewData["PageOptions"] as IEnumerable<SelectListItem>, "(Select one)", new { @class = "TextBoxBorder" })           
      } 
      else 
      { 
      <select id="State" name="State" class="TextBoxBorder"> 
      </select> 
      } 
    } 
    else 
    { 
    // design   
    }  
} 

JQuery

$(document).ready(function() { 
      $("#Country").change(function() { 
       var selection = $("#Country").val(); 
       var dataToSend = { 
        country: selection 
       }; 

       $.ajax({ 
        type: "GET", 
        url: "/WPWebGridCart/GetStateDetails/",      
        data: dataToSend, 
        success: function (data) { 
         $('#State').append('<option value="' + agent + '">' '</option>'); 
        } 
       }); 

      }); 
    }); 

Контроллер

public JsonResult GetStateDetails(string country) 
{ 
var file = Path.Combine(Server.MapPath("~/App_Data"), "States.xml"); 
var model = new CheckoutModel 
{ 
    States = 
     from unit in XDocument.Load(file) 
     .Descendants("Capital") 
     .First(unit => (string)unit.Attribute("CountryName") == country) 
     .Descendants("city") 
    select new SelectListItem 
    { 
     Text = unit.Attribute("name").Value, 
     Value = unit.Attribute("value").Value, 
    } 
}; 
SelectList selectList = new SelectList(model.States, "Value", "Text"); 
ViewData["PageOptions"] = selectList; 
return Json(new { agent = ViewData["PageOptions"] }, JsonRequestBehavior.AllowGet); 
} 

Answer 1

$('#State').append('<option value="' + agent + '">' '</option>'); 

Не может где вы объявили эту переменную javascript agent, которую вы пытаетесь использовать там. Вероятно, вы получаете неопределенную переменную ошибку.

Вам нужно будет извлечь эту информацию из вашего результата JSON с помощью цикла через data.agent коллекции:

success: function (data) { 
    var statesDdl = $('#State'); 
    statesDdl.empty(); 
    $.each(data.agent, function() { 
     statesDdl.append(
      $('<option/>', { 
       value: this.Value, 
       html: this.Text 
      }) 
     );  
    }); 
}