1

mvc4 でカスケード ドロップダウンリストを実装しようとしています。最初のドロップダウンリストには辞書の値を使用し、2 番目のドロップダウンリストにはバインドされた xml 値を使用しました。国 (1 番目の DDL) の選択に基づいて、州をロードする必要があります (2 番目の DDL)。jQuery を使用して jsonresult を 2 番目のドロップダウンリストにバインドする方法。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);
}
4

1 に答える 1

2 
$('#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
            })
        );    
    });
}
于 2013-05-30T10:47:34.447 に答える