別のドロップダウンが変更された後にHtml.DropDownGroupListをリフレッシュする方法

Question

Html.DropDownGroupListをリフレッシュするのが難しいです。 私はお互いに依存する2つのドロップダウンを持っています。添付のスクリーンショットにあるように、モデルのドロップダウンリストはグループ化する必要があります。

私はモデルのドロップダウンがデータで満たされているページで入力すると、それは正確にグループ化されていますが、私は最初のドロップダウンを変更すると、モデルが正しくリフレッシュされていません

。

public ActionResult GetModels(string id) 
    { 
     if (!string.IsNullOrEmpty(id)) 
     { 
      int number; 
      bool result = Int32.TryParse(id, out number); 
      if (!result) 
       return Json(null); 

      var selectedMake = makeRepository.GetMakeByID(number); 
      var list1 = db.Models.Where(m => m.MakeID == selectedMake.ID).ToList(); 

      List<GroupedSelectListItem> models = new List<GroupedSelectListItem>(); 
      foreach (var items in list1) 
      { 
       models.Add(new GroupedSelectListItem 
       { 
        Text = items.Name, 
        Value = items.ID.ToString(), 
        GroupName = items.GroupName, 
        GroupKey = items.GroupName 
       }); 
      } 
      ViewBag.Alma = models; 
      return Json(models, JsonRequestBehavior.AllowGet);     
     } 
     return Json(null); 
    } 

とビューで：私はこのコードを持っているコントローラで

$.ajax({ 
    type: 'POST', 
    url: '@Url.Action("GetModels")', 
    dataType: 'json', 
    data: { id: $("#makes").val() }, 
    success: function (models) { 
     if (window.console) { 
      console.log(JSON.stringify(models)) 
     } 
     $.each(models, function (i, model) {       
      $("#models").append 
       ('<optgroup label="'+ model.GroupName + '"><option value="' + model.Value + '">' + 
       model.Text + '</option></optgroup>' 
       ); 
     }); 
    } 
}); 

：

@Html.DropDownGroupList("models", ViewBag.Alma as List<GroupedSelectListItem>, "Select Model", new 
{ 
    @class = "dropdown-toggle col-md-9 form-control" 
}) 

これは私がドロップダウンを更新しようコードですリフレッシュ後にドロップダウンが表示される方法です。

グループ化はもう機能しません。私は、これが問題であることを知っている：

$("#models").append('<optgroup label="'+ model.GroupName + '"><option value="' + model.Value + '">' + model.Text + '</option></optgroup>'); 

が、どのようにグループに私のドロップダウンをこのAJAX呼び出しを行うには？私はあまりにも多くのAjax、javascriptの経験がありません。

[モデル]ドロップダウンリストを更新する方法を教えてください。

Answer 1

メソッドは、DropDownGroupList()メソッドで使用される特別なクラスであり、少なくともスクリプト内のデータをグループ化するための余分なコードはほとんどありません。

スタート階層データを表現するために、ビューモデルを作成することによって、あなたがグループにあなたのデータを、コントローラを変更し、ビューモデル

public ActionResult GetModels(int? id) 
{ 
    if (!id.HasValue) 
    { 
     return Json(null); 
    } 
    var data = db.Models.Where(x => x.MakeID == id.Value).GroupBy(x => x.GroupName).Select(x => new GroupVM() 
    { 
     Name = x.Key, 
     Options = x.Select(y => new OptionVM() 
     { 
      Value = y.ID, 
      Text= y.Name 
     }) 
    }); 
    return Json(data); 
} 

に結果をプロジェクトとスクリプトを変更すると

public class GroupVM 
{ 
    public string Name { get; set; } 
    public IEnumerable<OptionVM> Options { get; set; } 
} 
public class OptionVM 
{ 
    public int Value { get; set; } 
    public string Text { get; set; } 
} 

が必要〜

var models = $('#models'); // cache it 
$('#makes').change(function() { 
    var id = $(this).val(); 
    $.ajax({ 
     type: 'POST', 
     url: '@Url.Action("GetModels")', 
     dataType: 'json', 
     data: { id: id }, 
     success: function (data) { 
      models.empty(); // clear existing options 
      $.each(data, function (index, group) { 
       var optGroup = $('<optgroup></optgroup>').attr('label', group.Name); 
       $.each(group.Options, function (index, option) { 
        var option = $('<option></option>').val(option.Value).text(option.Text); 
        optGroup.append(option); 
       }); 
       models.append(optGroup); 
      }); 
     } 
    }); 
})