在 .NET Core 6 中使用级联下拉菜单时出现空值

Question

我在.Net Core 6中使用ajax工作级联下拉菜单。我想根据产品选择所有颜色。因此，当我为产品开具发票时，我想选择该产品，然后下一个下拉列表将仅显示该可用产品的颜色。这是景色

所以我使用ViewBag将产品列表传输到视图。代码如下

//In controller

ViewBag.Product = new SelectList(_context.Products, "ProductId", "ProductName");
//In view
 <td>
     <select name="" id="productList" class="ddlProductItemsId">
         @foreach (var item in lstProduct)
         {
             <option value="@item.ProductId">@item.ProductName</option>
         }
     </select>
</td>

//dropdown list color
<td>
    <select id="colorId"></select>
</td>

然后我使用 Ajax 来做级联下拉菜单：

 $(document).ready(function () {
     getColorByProduct();
 });

 $("#productList").change(function () {
     getColorByProduct();
 });

 function GetColorByProduct() {
     $.ajax({
         url: '@Url.Action("GetColorByProduct", "Invoice")',
         type: 'GET',
         data: {
             id: $("#productList").val()
         },
         success: function (data) {
             $('#colorId').empty();
             $(data).each(function (index, item) {
                 $('#colorId').append('<option value="' + item.colorId + '">' + item.colorId + '</option>');
             });
         }
     });
 }
//Here the GetColorByProduct method

public JsonResult GetProductByColor (int id)
{   
       
    return Json(_context.ProductItems.Where(n=>n.ProductId == id)
        .ToList());    
}

产品有很多产品项目，并且产品项目有颜色属性，因此我们需要查询以查找该产品ID的颜色我的问题是当我更改产品时，颜色没有改变。我尝试输入 url GetColorByProduct?=1 并像这样返回 json

[
    {
        "productItemsId": 30,
        "productId": 1,
        "colorId": 1,
        "productCode": "AFWhite",
        "image1": "",
        "image2": null,
        "image3": null,
        "image4": null,
        "color": null,
        "product": null,
        "productVariations": []
    },
    {
        "productItemsId": 41,
        "productId": 1,
        "colorId": 2,
        "productCode": "sd",
        "image1": null,
        "image2": null,
        "image3": null,
        "image4": null,
        "color": null,
        "product": null,
        "productVariations": []
    }
]

和视图[颜色]（）所以这意味着方法工作正常，但是当我更改下拉列表中的产品时，颜色不会改变。 有人知道问题所在吗？我真的很感谢任何指示。谢谢你

Answer 1

在JS脚本中，我注意到函数名称是

getColorByProduct

，但是当你调用它时，你使用的是

GetColorByProduct 

。请保持函数对应的名称和大小写相同。

在Ajax方法中，请求url是

@Url.Action("GetColorByProduct", "Invoice")

，但是从你的控制器代码中，我们发现操作名称是

GetProductByColor

，而不是

 GetColorByProduct

，所以请更改它们以使用相同的名称。

这里是根据所选产品更改颜色选项的示例，我们还可以设置背景颜色：

<select id="colorId" >
     <option value="a">aa</option>
</select>

$(document).ready(function () {
            GetColorByProduct();
});

$("#productList").change(function () {
            GetColorByProduct();
});

function GetColorByProduct() {
     $.ajax({
                url: '@Url.Action("GetProductByColor", "Invoice")',
         type: 'GET',
         data: {
             id: $("#productList").val()
         },
         success: function (data) {
             $('#colorId').empty();
             $(data).each(function (index, item) {
                        $('#colorId').append('<option value="' + item.colorId + '"  style="background-color:' + item.color + '" ;" >' + item.colorId + '</option>');
             });
         }
     });
}

控制器：

public JsonResult GetProductByColor(int id)
{
// do some serch
    return Json(productItems);
}

当我选择值时：