Как передать значение каждой таблицы строк в Ajax

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

Изменить 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();

Answer 2

Вы должны заменить

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

просто

$(el).find

.children() только на один уровень вниз в DOM, но ваши поля имени и количества элемента фактически на несколько уровней нижевнутри тдс ... так что, вероятно, это просто не найти значения на странице..find() более гибок и будет продолжать поиск вниз, пока не нажмет на селектор.Так что это гораздо меньше зависит от точной структуры вашего HTML.

Вам также нужно изменить <span class="price"> на что-то другое - это дублирует класс «цены» вашего скрытого поля и сбивает с толку jQuery, о каком элементе выПытаюсь найти.Так как span является первым, он находит это первым, но span не имеет «значения», поэтому выполнение .val() для него ничего не возвращает.

Наконец, было бы разумно ограничить цикл только поискомстрок в таблице заказов, в противном случае он может работать со строками в других таблицах на вашей странице, что нежелательно.Для этого я добавил в таблицу атрибут 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>