Question

我有一个页面，其中显示订单列表。我试图在用户单击按钮时传递表中每一行的值，但是它总是将空值传递给我的控制器和数据库。任何人都可以帮助我或为我指出正确的方向吗？预先感谢。

这是我的代码：

视图

<table class="table">
    <tbody>
    @foreach (var item in Model)
    {
    <tr>
        <td>
            <div class="product-title">
                <a href="/Main/Produktdetaljer/@item.ProductId?proid=@item.ProductId">
                    @Html.DisplayFor(modelItem => item.ProductName)
                    <input type="hidden" name="item_name" class="item_name" value="@item.ProductName">
                </a>
            </div>
        </td>
        <td>
            <ul>
                <li>
                    <div class="base-price price-box"> 
                        <span class="price"> 
                            @Html.DisplayFor(modelItem => item.Price) 
                            <input type="hidden"  class="price" value="@item.Price">
                        </span> 
                    </div>
                </li>
            </ul>
        </td>
        <td class="QuantityOfProduct@(item.ProductId)">
            @Html.DisplayFor(modelItem => item.Quantity)
            <input type="hidden" class="quantity" value="@item.Quantity" />
        </td>
    </tr>
    }
    </tbody>
</table>
<div class="col-sm-6">
    <div><a class="sendordre" >Send</a></div>
</div>

javascript，

$(".sendordre").click(function (e) {
    e.preventDefault();
    $('tr').each(function (i, el) {
        var ProductName = $(el).children('td').children('.item_name').val();
        var Qty = $(el).children('td').children('.quantity').val();
        var Price = $(el).children('td').children('.price').val();

        $.ajax({
            type: 'POST',
            url: "@Url.Action("SendOrdre", "Cart")",
            dataType: 'json',
            data:{ 
                   ProductName: ProductName,
                   Price: Price,
                   Qty: Qty,
                   send:"send"
            },
            success: function (run) {
                if (run) {
                    console.log("Ok");
                }
                else {
                    console.log("ERror");
                }
            },
        });
    });
});

控制器方法，

public JsonResult SendOrdre(CustomerOrdersVM model) {

    DateTime CreatedAt = DateTime.Today;
    var SaveOrdrer = new CustomerOrders  {

        Qty = model.Qty
        ProductName = model.ProductName,
        Price = model.Price,
        CreatedAt = CreatedAt,
    };

    db.CustomerOrders.Add(SaveOrdrer);
    db.SaveChanges();

    return Json(model, JsonRequestBehavior.AllowGet);

}

Answer 1

您应该替换

$(el).children('td').children

只需

$(el).find

.children()在DOM中仅向下一层，但是您的商品名称和数量字段实际上在tds中向下几层...因此，很可能是根本找不到页面中的值。 .find()更加灵活，并且会一直向下搜索，直到到达选择器为止。因此，它几乎不再依赖于HTML的精确结构。

您还需要将<span class="price">更改为其他内容-这将复制隐藏字段的“ price”类，并使jQuery混淆您要查找的元素。由于范围是第一个，因此它首先找到，但是范围没有“值”，因此在其上运行.val()不会返回任何结果。

最后，将循环限制为仅在orders表中查找行是明智的，否则可能会对页面中其他表中的行进行操作，这是不希望的。为此，我在表中添加了id="ordersTable"属性，然后将选择器从$("tr")更改为$("#ordersTable tr")，以便它仅在预期表中选择行。

文档：https://api.jquery.com/children/和https://api.jquery.com/find/

这是一个静态演示（我创建了两行，并用虚拟输出替换了Razor代码，并将ajax请求替换为要发送的数据的日志）：

$(function() {
  $(".sendordre").click(function(e) {

    e.preventDefault();

    $("#ordersTable tr").each(function(i, el) {
      var ProductName = $(el).find('.item_name').val();
      var Qty = $(el).find('.quantity').val();
      var Price = $(el).find('.price').val();
      /*$.ajax({
        type: 'POST',
        url: "@Url.Action("
        SendOrdre ", "
        Cart ")",
        dataType: 'json',
        data: {
          ProductName: ProductName,
          Price: Price,
          Qty: Qty,
          send: "send"
        },
        success: function(run) {

          if (run) {

            console.log("Ok");
          } else {
            console.log("ERror");
          }
        },
      });*/
      //dummy test code
      console.log({
          ProductName: ProductName,
          Price: Price,
          Qty: Qty,
          send: "send"
        });
    });
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table id="ordersTable" class="table">
        <tbody>
            <tr>
                <td>
                    <div class="product-title">
                        <a href="/Main/Produktdetaljer/1?proid=1">
                            Product1
                            <input type="hidden" name="item_name" class="item_name" value="Product1">
                        </a>
                    </div>
                </td>
                <td>
                    <ul>
                        <li>
                            <div class="base-price price-box"> <span class="priceSpan"> 100
                             <input type="hidden"  class="price" value="100"></span> </div>
                        </li>
                    </ul>

                </td>
                <td class="QuantityOfProduct1">

                    10
                    <input type="hidden" class="quantity" value="10" />

                </td>
            </tr>
            <tr>
                <td>
                    <div class="product-title">
                        <a href="/Main/Produktdetaljer/2?proid=2">
                            Product2
                            <input type="hidden" name="item_name" class="item_name" value="Product2">
                        </a>
                    </div>
                </td>
                <td>
                    <ul>
                        <li>
                            <div class="base-price price-box"> <span class="priceSpan"> 200
                             <input type="hidden"  class="price" value="200"></span> </div>
                        </li>
                    </ul>

                </td>
                <td class="QuantityOfProduct2">

                    20
                    <input type="hidden" class="quantity" value="20" />

                </td>
            </tr>
        </tbody>
    </table>
<div class="col-sm-6">
    <div> <a class="sendordre">Send</a> </div>
</div>

Answer 2

将val()更改为text()：

var ProductName = $(el).children('td').children('.item_name').text();
var Qty = $(el).children('td').children('.quantity').text();
var Price = $(el).children('td').children('.price').text();

如何在Ajax中传递每个行表的值

2 个答案: