gpt4 book ai didi

c# - 在 ASP.NET Core 中使用 Ajax 更新下拉列表

转载 作者:行者123 更新时间:2023-12-04 17:35:16 25 4
gpt4 key购买 nike

我正在尝试使用 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 () {
}
});
});

Controller 方法

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 dropdown filtering using Lambda in ASP.NET

编辑:我已经接近下面的 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。另外我真的不知道Manufacturers和Models的结构是什么,所以我将做一个类似数据的例子,你可以根据你的类进行调整。

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

更改您的 Controller 以执行此操作。

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

希望这对您有所帮助!

关于c# - 在 ASP.NET Core 中使用 Ajax 更新下拉列表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56943095/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com