Question

我正在尝试在mvc4中实现级联下拉列表。我使用第一个下拉列表的字典值和第二个下拉列表的绑定的xml值。根据国家（第一个DDL）的选择，必须加载状态（第二个DDL）。如何使用jQuery将jsonresult绑定到第二个下拉列表。 JsonResult在萤火虫中返回得很好。我的剧本中有什么错误。任何建议都会有很大帮助。

这是我的代码。
查看

@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>');

无法看到您在哪里声明了您尝试在此处使用的agent javascript变量。你可能得到一个未定义的变量错误。

您需要循环浏览data.agent集合，从JSON结果中提取此信息：

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

将Json结果绑定到MVC4中的DropDownlist

1 个答案: