Ajax 调用仅适用于表的第一行，不适用于下一行

Posted 2023-02-15

【中文标题】Ajax 调用仅适用于表的第一行，不适用于下一行

【英文标题】：Ajax call working only for first row of the table and not working for next rows

【发布时间】：2021-11-28 05:27:45

【问题描述】：

在我看来，我正在显示一个表格，并且在表格中我强类型化了下拉列表，当您更改所选项目时，它通过 ajax 调用调用 getPrice(int product_id) 函数并返回所选项目的价格，但它仅适用于第一行.

html

 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new  @class = "form-control sel"
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new  @class = "form-control sel")
     </td>
     <td class="product_price" id="product_price1" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product_price, "", "")</td></tr>

Ajax 调用

 $(function () 
        $('#product_id').change(function () 
            $.ajax(
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data:  product_id: $('#product_id').val() ,
                success: function (data) 
                    document.getElementById('product_price').innerHTML = data;
                    multiply();
                ,
                error: function (data = 0) 
                    document.getElementById('product_price').innerText = 0;
                    multiply();
                
            );
        );
    );

【参考方案1】：

html

   @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new  @class = "form-control sel", @onchange = "gg(this)" )

ajax 调用

 <script>
    function gg(x) 
        $.ajax(
            type: "POST",
            url: "/Home/GetPrice // GetPrice is name of actionmathod of controller",
            datatype: "Json",
            data:  product_id: $(x).val() ,
            success: function (data) 
                //your code here
            ,
            error: function () 
                // your code here
            
        );
    
</script>

【参考方案2】：

您需要为每个下拉菜单设置 2 个不同的 ID。

    @Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new  @id = "ddl_product_id_1", @class = "form-control sel"

@Html.DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new  @id = "ddl_product_id_2", @class = "form-control sel")

并写入该下拉ID的个人的更改事件。

【讨论】：

更改 id 没有用，并且仍然将上一个（第一行）product_id 传递给 ajax 调用，所以我所做的是用这个 attr 调用一个 js 函数并像这样在 js 中获取值 ==> `@Html .DropDownListFor(model => model.product_id, ViewBag.ProductList as SelectList, "--select product--", new @class= "form-control sel", @onchange = "gg(this)" )`

【参考方案3】：

由于您选择 2 个不同的产品，您的模型应该有 2 个 id 属性 - product1_id 和 product2_id 和 2 个价格属性 - product1_price 和 product2_price

所以相应地修正你的观点

 <tr class="tr_clone" id="1">
     <td>
        @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new  @class = "form-control sel"
     </td>
     <td class="product_price" id="product_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product1_price, "", "") </td></tr>

<tr class="tr_clone1" id="2">
     <td>
     @Html.DropDownListFor(model => model.product2_id, ViewBag.ProductList as SelectList, "--select product--", new  @class = "form-control sel")
     </td>
     <td class="product_price" id="product2_price" style="text-align: center; font-size: 16px;">@Html.DisplayFor(model => model.product2_price, "", "")</td></tr>

你也应该 2 分开改变

$(function () 

        $('#product1_id').change(function () 
            $.ajax(
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data:  product_id: $('#product1_id').val() ,
                success: function (data) 
                    document.getElementById('product1_price').innerHTML = data;
                    multiply();
                ,
                error: function (data = 0) 
                    document.getElementById('product1_price').innerText = 0;
                    multiply();
                
            );
        );
   $('#product2_id').change(function () 
            $.ajax(
                type: "POST",
                url: "/Home/GetPrice",
                datatype: "Json",
                data:  product_id: $('#product2_id').val() ,
                success: function (data) 
                    document.getElementById('product2_price').innerHTML = data;
                    multiply();
                ,
                error: function (data = 0) 
                    document.getElementById('product2_price').innerText = 0;
                    multiply();
                
            );
        );
    );

【讨论】：

好吧，这是一个强绑定下拉菜单，意味着它已连接到数据库，这不是正确的方法，因为您需要创建自定义属性才能访问“model =>model.product_id "