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

Question

I have page where it displays a list of orders. I'm trying pass the value of each row of the table when a user clicks on a button, but it always passes a null value to my controller & database. Can anyone please help me or point me in to the right direction? Thanks in advance.

This is my code:

The view,

<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>

The 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");
                }
            },
        });
    });
});

The controller method,

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

You should replace

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

with simply

$(el).find

.children() only goes one layer down in the DOM, but your item name and quantity fields are actually several layers down inside the tds...so probably it's simply not finding the values in the page. .find() is more flexible and will keep on searching down until it hits the selector. So it's far less dependent on the precise structure of your HTML.

You also need to change <span class="price"> to something else - this duplicates the "price" class of your hidden field, and confuses jQuery about which element you're trying to find. Since the span is first, it finds that first, but spans don't have a "value", so running .val() on it returns nothing.

Lastly it would be sensible to restrict the loop just to finding rows within the orders table, otherwise it may operate on rows in other tables in your page, which is not desirable. For that purpose I've added an id="ordersTable" attribute to the table, and then changed the selector from $("tr") to $("#ordersTable tr") so it selects rows only within the intended table.

Docs: https://api.jquery.com/children/ and https://api.jquery.com/find/

Here's a static demo (I created two rows, and replaced the Razor code with dummy output, and the ajax request with a log of the data to be sent):

 $(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

Change val() to 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();