AJAX级联下拉列表ASP.NET MVC

Question

I am working on a request form for work. The request deals with series of products. There are many series, so I am trying to filter them down by the product line that they are produced on. I am attempting this using cascading dropdown lists from Ajax. I know the script is working to a degree, because the default selected option changes to "Make Selection". However, the rest of the dropdown does not populate.

Here are the two dropdowns.

@Html.DropDownListFor(model => model.SelectedProductLine, new SelectList(Model.ProductLines, "Value", "Text"), "Select a Product Line", new { @class = "form-control", @style = "width: 400px;", @id = "ProductLineID"})

@Html.DropDownListFor(model => model.SelectedSeries, new SelectList(string.Empty, "Value", "Text"), "Select a Series", new { @class = "form-control", @id = "SeriesID"})

The Ajax Script.

$(document).ready(function () {
    //Dropdownlist Selectedchange event
    $('#ProductLineID').change(function () {

        $.ajax({
            url: '/SMRMaster/RequestForm/GetSeries',
            type: 'GET',
            datatype: 'JSON',
            data: { id: $('#ProductLineID').val() },
            success: function (result) {
                $('#SeriesID').html('');
                $('#SeriesID').append($('<option>Make Selection</option>'));
                $.each(result, function (index, item) {
                    $('#SeriesID').append($('<option></option>').val(item.Value).html(item.Text));
                });
            }
        });
    });
});

The Controller.

public JsonResult GetSeries(string id)
    {
        int Id = Convert.ToInt32(id);
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNOCMMITTED;");
        var productLineName = "";
        switch (Id)
        {
            case 0:
                productLineName = "Electric";
                break;
            case 1:
                productLineName = "Europe Gas";
                break;
            case 2:
                productLineName = "Gas";
                break;
            case 3:
                productLineName = "Miscellaneous";
                break;
            case 4:
                productLineName = "Water";
                break;
            default:
                productLineName = "Electric";
                break;
        }
        IEnumerable<SelectListItem> series = (from s in db.Series
                      where s.ProductLineName == productLineName
                      select new SelectListItem { Value = s.ProductLineName, Text = s.ProductLineName }).ToList();


        return Json(series, JsonRequestBehavior.AllowGet);
    }

    public List<ProductLine> GetProductLines()
    {
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
        var productLineList = (from p in db.ProductLines
                               select p).ToList();

        return productLineList;
    }


    public ActionResult RequestForm()
    {
        var count = 0;
        var productLineList = new List<SelectListItem>();
        foreach (var item in GetProductLines())
        {
            productLineList.Add(new SelectListItem { Text = item.ProductlineName, Value = count.ToString() });

        }
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
        var requestViewModel = new RequestViewModel { SMRMaster = new SMRMaster(), Engineers = GetEngineers(), ProductLines = productLineList };
        return View(requestViewModel);
    }

And the view model.

public class RequestViewModel
{
    public List<SelectListItem> ProductLines { get; set; }
    public string SelectedProductLine { get; set; }
    public SMRMaster SMRMaster { get; set; }
    public List<string> Engineers { get; set; }
    [Required(ErrorMessage = "Engineer is required.")]
    public string SelectedEngineer { get; set; }
    public List<Series> Series { get; set; } 
    public string SelectedSeries { get; set; }
}

I do not know where the error is coming from. Any help is appreciated.

Answer 1

Try this

$.each(result, function (i, item) {
          var optionData = '<option value="' + item.Value + '">' + obj.Text + '</option>';
             $(optionData).appendTo('#SeriesID')      
});

Or debug and see what's your response from server.

Answer 2

A colleague helped me solve this problem. Firstly, the Ajax script was using the wrong URL. Secondly, my controller functions were unnecessarily complicated.

Here is the updated AJAX script:

$(document).ready(function () {
    //Dropdownlist Selectedchange event
    $('#ProductLine').change(function () {
        $.ajax({
            url: '/SMRMaster/GetSeries',
            type: 'GET',
            datatype: 'JSON',
            data: { productLine: $('#ProductLine').val() },
            success: function (result) {
                $('#SeriesID').html('');
                $('#SeriesID').append($('<option>Make Selection</option>'));
                $.each(result, function (i, item) {
                    var optionData = '<option value="' + item.Value + '">' + item.Text + '</option>';
                    $(optionData).appendTo('#SeriesID')
                });
            }
        });
    });
});

And here is the updated Controller:

    public JsonResult GetSeries(string productLine)
    {
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
        List<SelectListItem> series = (from s in db.Series
                                        where s.ProductLineName == productLine
                                        select new SelectListItem { Value = s.SeriesName, Text = s.SeriesName }).Distinct().ToList();
        return Json(series, JsonRequestBehavior.AllowGet);
    }

    public List<ProductLine> GetProductLines()
    {
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
        var productLineList = (from p in db.ProductLines
                               select p).ToList();
        return productLineList;
    }


    public ActionResult RequestForm()
    {
        var productLineList = new List<SelectListItem>();
        foreach (var item in GetProductLines())
        {
            productLineList.Add(new SelectListItem { Text = item.ProductlineName, Value = item.ProductlineName });
        }
        db.Database.ExecuteSqlCommand("SET TRANSACTION ISOLATION LEVEL READ UNCOMMITTED;");
        var requestViewModel = new RequestViewModel { SMRMaster = new SMRMaster(), Engineers = GetEngineers(), ProductLines = productLineList };
        return View(requestViewModel);
    }