AJAX Каскадные выпадающие списки ASP.NET MVC

Question

Я работаю над формой заявки на работу.Запрос касается серии продуктов.Есть много серий, поэтому я пытаюсь отфильтровать их по продуктовой линейке, на которой они производятся.Я пытаюсь это использовать каскадные выпадающие списки из Ajax.Я знаю, что сценарий работает в определенной степени, потому что выбранная по умолчанию опция меняется на «Сделать выбор».Однако остальные выпадающие списки не заполняются.

Вот два раскрывающихся списка.

@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"})

Скрипт Ajax.

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

Контроллер.

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

И вид модели.

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

Я не знаю, откуда исходит ошибка.Любая помощь приветствуется.

Answer 1

Коллега помог мне решить эту проблему.Во-первых, сценарий Ajax использовал неправильный URL.Во-вторых, функции моего контроллера были излишне сложными.

Вот обновленный скрипт AJAX:

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

А вот обновленный контроллер:

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

Answer 2

Попробуйте это

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

Или отладьте и посмотрите, каков ваш ответ от сервера.