ASP.NET MVC DropDownGroupList Ajax请求

Question

i have some trouble with this DropDownGroupList extension for ASP.NET MVC 5. What i try to accomplish is to populate the control using javascript and data from an ajax request. So far, i was able to do that only for the DropDownList control. Here is a small piece of my code for the DropDownList but how can i make this work for the other one?

$("#Area").change(function () {
        $("#Station").empty();
        $("#Station").prop("disabled", true);
        if ($("#Area").val() != "Select area") {
            var AreaOptions = {};
            AreaOptions.url = "/Production/SelectArea";
            AreaOptions.type = "POST";
            AreaOptions.data = JSON.stringify({ Area: $("#Area").val() });
            AreaOptions.datatype = "json";
            AreaOptions.contentType = "application/json";
            AreaOptions.success = function (LinesList) {
                $("#Line").empty();
                $("#Line").append("<option value='Select line'>Select line</option>");
                for (var i = 0; i < LinesList.length; i++) {
                    $("#Line").append("<option value=" + LinesList[i].Value + ">" + LinesList[i].Text + "</option>");
                }
                $("#Line").prop("disabled", false);
                $("#Station").prop("disabled", true);
            };
            AreaOptions.error = function () { alert("No data for selected area!"); };
            $.ajax(AreaOptions);
        }

        else {
            $("#Line").empty();
            $("#Line").prop("disabled", true);
        }
    });

Edit 1
OK, so here is my controller... tried to return a JsonResult so far:

public JsonResult SelectLine()
{
    List<GroupedSelectListItem> Stations = new List<GroupedSelectListItem>();
    Stations.Add(new GroupedSelectListItem { Text = "Station 1", Value = "Station 1", GroupName = "Line 1", GroupKey = "Line 1" });
    Stations.Add(new GroupedSelectListItem { Text = "Station 2", Value = "Station 2", GroupName = "Line 1", GroupKey = "Line 1" });
    Stations.Add(new GroupedSelectListItem { Text = "Station 3", Value = "Station 3", GroupName = "Line 2", GroupKey = "Line 2" });
    Stations.Add(new GroupedSelectListItem { Text = "Station 4", Value = "Station 4", GroupName = "Line 3", GroupKey = "Line 3" });
    Stations.Add(new GroupedSelectListItem { Text = "Station 5", Value = "Station 5", GroupName = "Line 4", GroupKey = "Line 4" });
    return Json(Stations);
}

How can i bind this to a DropDownGroupList?

Edit 2
Stephen Muecke works as a charm. Thank you!

Answer 1

Firstly you should not be returning List<GroupedSelectListItem> which serializes all properties of GroupedSelectListItem meaning your just sending extra data across the wire which you don't even use. I assume you not really hard coding values, and that you are really generating these from a collection of objects. You have not shown your model, but lets assume you have a Person object that you want to group by gender

public class Person
{
  public string ID { get; set; }
  public string Name { get; set; }
  public string Gender { get; set; }
}

and in your method you call a repository to get all persons

public JsonResult SelectLine()
{
  var data = db.Persons.GroupBy(p => p.Gender).Select(p => new
  {
    group = p.Key,
    options = p.Select(o => new
    {
      text = o.Name,
      value = o.ID
    })
  });
return Json(data, JsonRequestBehavior.AllowGet);
}

In you case you seem to be using the same value for both the options text and the option value, so you should omit the value = o.ID line.

Then change the script to

// dont hard code urls - use Url.Action
var url = '@Url.Action("SelectLine", "Production");
// cache elements you repeatedly refer to
var stations = $('#Station');
var lines = $('#Line');
$("#Area").change(function () {
  stations.empty().prop('disabled', true);
  lines.empty();
  if (!$(this).val()) { // see notes below
    lines.prop('disabled', true);
    return;
  }
  $.getJSON(url, { Area: $(this).val() }, function(data) {
    if (!data) {
      // oops - display error message?
      return;
    }
    lines.append($('<option></option>').val('').text('Select line')); // see notes below
    $.each(data, function (index, item) {
      var group = $('<optgroup></optgroup>').attr('label', item.group);
      $.each(item.options, function (index, opt) {
        group.append($('<option></option>').val(opt.value).text(opt.text));
        // or if you want the text and value to be the same then use
        // group.append($('<option></option>').text(opt.text));
      });
      lines.append(group);
    });
  }).fail(function() {
    // oops
  });
});

Side notes:

1. Your label option should have a null value so that you can use client and server side validation.
2. Use $(this).val() , not $("#Area").val() so you don't have to search the DOM again.
3. There is no need to stringify the data and add the contentType attribute (note the code above uses the $.getJSON() shortcut)
4. If your using the same value for both the text and value, just set the text