如何在另一個下拉列表更改後刷新Html.DropDownGroupList

刷新Html.DropDownGroupList時遇到困難。我有兩個取決於對方的下拉列表：製作和模型。您應該將Models下拉列表分組，如您在附件截圖中看到的那樣。如何在另一個下拉列表更改後刷新Html.DropDownGroupList

當我在型號下拉列表填充數據的頁面輸入，它是正確的分組，但是當我改變第一個下拉，該模型是無法正確刷新。

在控制器我有這樣的代碼：

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); 
    }

，並在視圖：

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

這是我嘗試刷新下拉代碼：

$.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>' 
       ); 
     }); 
    } 
});

這是刷新後的下拉方式

該分組不起作用了。我知道這是問題：

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

但如何做到這一點ajax調用我的下拉列表？我沒有太多的Ajax經驗，javascript。

你能建議如何刷新模型下拉？

來源

2017-01-10 Orsi

你使用什麼插件（'DropDownGroupList（）'不是MVC的一部分）？你爲什麼要更新第二個下拉列表 –

你需要爲你的'GetModels（）'方法顯示控制器方法 - 它沒有以正確的結構返回數據，它需要是一個嵌套集合 - 也就是一個集合查看模型，其中包含組名稱的屬性和包含選項值和文本屬性的視圖模型的集合 –

我更新了問題，我添加了GetModels（）方法。我遵循DrodownGroupList的這個例子：http://www.jquery2dotnet.com/2014/01/html5-dropdownlist-optgroup-tag-in-mvc.html – Orsi

您的GetModels()方法正在返回List<GroupedSelectListItem>這是DropDownGroupList()方法使用的特殊類，不適合構建您的html（至少沒有足夠的額外代碼來對腳本中的數據進行分組）。

開始創建視圖模型來表示分層數據，你需要

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; } 
}

然後控制器修改，以便將數據和項目的成果向視圖模型

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); 
}

和修改腳本到

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); 
      }); 
     } 
    }); 
})

來源

2017-01-10 09:35:49

工作正常！：）非常感謝你！ – Orsi

如何在另一個下拉列表更改後刷新Html.DropDownGroupList

回答

相關問題