Обновление выпадающего списка с помощью Ajax в ASP.NET Core - PullRequest
Новая
       3

Обновление выпадающего списка с помощью Ajax в ASP.NET Core

0 голосов
/ 09 июля 2019

Я пытаюсь обновить второй раскрывающийся список на основе выбора первого раскрывающегося списка с помощью Ajax. Кажется, он работает, я прошел через код и selectedId обновляется с правильным Id, однако сам выпадающий список не обновляется. Поэтому я думаю, что где-то что-то пропустил, мне нужно обновить #modelDropDown Я думаю, что в функции успеха, но не уверен, как это сделать.

JQuery / Ajax: 

$('#manufacturerDropDown').change(function () {
    var selected = $(this).val();
    $.ajax({
        url: '/Home/Index',
        data: { id: $('#manufacturerDropDown option:selected').val() },
        type: "post",
        cache: false,
        success: function () {
        },
        error: function () {
        }
    });
});

Метод контроллера 

public IActionResult Index(string id)
{
    Guid selectedId = Guid.Parse(id);

    var vm = new HomeViewModel
    {
        Manufacturers = context.ManufacturersTable.OrderBy(x => x.Manufacturer).ToList(),
        Models = context.ModelsTable.OrderBy(x => x.ModelName).Where(x => x.ManufacturerId == selectedId).ToList(),
    }
}

Предыдущий вопрос для контекста: Фильтр раскрывающегося списка Master / Detail с использованием Lambda в ASP.NET

Edit: Я стал ближе с jQuery ниже, HTML загружен, я вижу его в журнале ошибок, но консоль возвращает ошибку Uncaught TypeError: Cannot use 'in' operator to search for 'length' in <!DOCTYPE html>. 

$('#manufacturerDropDown').change(function () {
    var selected = $(this).val();
    $.ajax({
        url: '/Home/Index',
        data: { id: $('#manufacturerDropDown option:selected').val() },
        type: "post",
        cache: false,
        success: function (result) {
            alert(result);
            var modelDropDown = $('#modelDropDown');
            modelDropDown.empty();
            $.each(result, function () {
                modelDropDown.append(
                    $('<option>', {
                        value: this.Value
                    }).text(this.Text)
                );
            });
        },
        error: function () {
        }
    });
});

Ответ от вызова Ajax 

Cache-Control: no-cache, no-store
Content-Type: text/html; charset=utf-8
Date: Mon, 08 Jul 2019 23:28:54 GMT
Persistent-Auth: true
Pragma: no-cache
Server: Microsoft-IIS/10.0
Transfer-Encoding: chunked
X-Powered-By: ASP.NET

1 Ответ

1 голос
/ 09 июля 2019

Ладно, исходя из нашего разговора в комментариях и моей предварительной оценки. Похоже, что метод действия возвращает html вместо сериализованного json для коллекции имеющегося у вас объекта. Кроме того, я действительно не знаю, какова структура производителей и моделей, поэтому я собираюсь сделать пример схожих данных, и вы можете настроить их в соответствии с вашими классами. 

//This is my ViewModel
public class Model {
    public string Value {get;set;}
    public string Text {get;set;}
    public string ManufacturerID {get;set;}
}

Измените контроллер, чтобы сделать это. 

public IActionResult Index(string id)
{
    //You will have to update the structure of data according to you viemodel.
    //Also apply you logic for database lookup
    var ModelCollection = _ctx.Models.Where(mdl => mdl.ManufacturerID == id).ToList();
    return Ok(ModelCollection);
}

Тогда вы изменили бы свой вызов ajax на этот. 

$('#manufacturerDropDown').change(function () {
    var selected = $(this).val();
    $.ajax({
        url: '/Home/Index',
        data: { id: $('#manufacturerDropDown option:selected').val() },
        type: "post",
        cache: false,
    }).done(function(data){
            var modelDropDown = $('#modelDropDown');
            modelDropDown.empty();
            $.each(data["ModelCollection"], function (index, model) {
                modelDropDown.append(
                    $('<option>', {
                        value: model.Value
                    }).text(model.Text)
                );
            });
    }).fail(function(error){
        //Do something with the error response 
    });
});

Надеюсь, это поможет!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...