在核心中使用 Ajax 更新下拉列表 ASP.NET

我正在尝试根据使用 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(),
    }
}

上下文的上一个问题：在 ASP.NET 中使用 Lambda 进行大纲/详细信息下拉列表筛选

编辑：我已经接近下面的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

好的，根据我们在评论中的对话和我的初步评估。看起来操作方法正在为您拥有的对象集合返回 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 
    });
});

希望这有帮助！

相关内容

最新更新

热门标签：