如何在不加载视图的情况下重新加载/刷新局部视图中的级联下拉列表

Question

我在互联网上搜索过这个问题，但找不到合适的答案。我有一个局部视图，其中有三个不同的下拉列表。我正在使用其中的两种不同的功能。。

1. 在更改第一个下拉列表时，其他两个会更新
2. 更改第二个下拉列表时，第三个会更新

在更改第二个下拉列表之前，一切都很好，如果我想再次更改第一个下拉列表，则第三个下拉列表不会加载，也不会返回任何值。

$("#FoodItemID").change(function () {  //
var id = $("select#FoodItemID").val();
$.ajax({
url: '/FoodRecipe/GetServingType',
type: "POST",
data: { FoodItemID: $("select#FoodItemID").val() },
success: function (result) {

$("#ServingTypeID").val(result[0]);
$("#ServingSubTypeID").val(result[1]);
}
});
});
$("#ServingTypeID").change(function () {
$.ajax({
url: '/FoodRecipe/GetServing',
type: "POST",
data: { ServingTypeID: $("select#ServingTypeID").val() },
success: function (result) {
var len = result.length;
$("#ServingSubTypeID").empty();
for (var i = 0; i < len; i++) {
var id = result[i]['id'];
var name = result[i]['name'];
$("#ServingSubTypeID").append("<option value='" + id + "'>" + name + "</option>");
$('#ServingSubTypeID').trigger('select:updated'); //this is not working for me
}
}
});
});

这是我的下拉菜单代码。我无法上传整个部分视图，因为它会导致加载后丢失所有值，我知道我遇到的问题与一旦我更改第二个下拉列表(因为来自控制器的值更改(时，我的下拉列表中的值没有更新有关

所以我认为一个好的选择是以某种方式重新加载第三个下拉列表中的值。但是我不知道怎么做。。！！

我知道这可能是最简单的事情，但我想不通。

Answer 1

在花了17个小时之后，我终于知道了如何做到这一点。以下是我为未来的读者所做的，他们会像我一样感到困惑。

我回到我的控制器，加载了所有项目以及与我想要传递和获取项目的特定id相关的特定项目。数据绑定了所有的项目加载器，是的，它起作用了。并且上述所有脚本保持不变。

这是我在控制器中所做的更改。

以前的控制器代码

[HttpPost]               //Getting Sub Type and Serving Type on Food Item ID
public async Task<IActionResult> GetServingType(int? FoodItemID)
{
vmControllerMessage.APIExecutionBaseURL = APIUrls.APIApplicationPath;
vmControllerMessage.APIExecutionURL = "APIFoodRecipe/GetServingTypes";
vmControllerMessage.VMControllerObject = FoodItemID;
HttpResponseMessage httpResponseMessage = PutJsonModelAPIWithNoRedirect();
if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)
{
int[] i = JsonConvert.DeserializeObject<int[]>(vmServiceMessage.VMObject.ToString());
return Json(i);
}
else
{
return Json(vmServiceMessage);
}
}

新代码

[HttpPost]               //Getting Sub Type and Serving Type on Food Item ID
public async Task<IActionResult> GetServingType(int FoodItemID)
{
VMFoodRecipeDetail model = new VMFoodRecipeDetail();
model.FoodItemID = FoodItemID;
vmControllerMessage.APIExecutionBaseURL = APIUrls.APIApplicationPath;
vmControllerMessage.APIExecutionURL = "APIFoodRecipe/GetServingTypes";
vmControllerMessage.VMControllerObject = model;
HttpResponseMessage httpResponseMessage = PutJsonModelAPIWithNoRedirect();
if (httpResponseMessage.StatusCode == System.Net.HttpStatusCode.OK)
{
VMFoodRecipeDetail obj = JsonConvert.DeserializeObject<VMFoodRecipeDetail>(vmServiceMessage.VMObject.ToString());
ViewBag.ServingTypeID = new SelectList(obj.ServingTypes, "ID", "Name",obj.ServingTypeID);
ViewBag.ServingSubTypeID = new SelectList(obj.ServingSubTypes, "ID", "Name", obj.ServingSubTypeID);
int[] ids = { obj.ServingTypeID, obj.ServingSubTypeID };
return Json(ids);
}
else
{
return Json(vmServiceMessage);
}
}