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

我有一个显示订单列表的页面。我试图在用户单击按钮时传递表中每一行的值，但它总是向我的控制器和数据库传递空值。 有谁能帮我或给我指出正确的方向吗？ 提前谢谢

这是我的代码：

这个观点,

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

控制器方法

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

}

你应该替换

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

简单地

$(el).find

.children（）
.find（）
更灵活，将继续向下搜索，直到找到选择器为止。因此，它对HTML的精确结构的依赖性要小得多

您还需要将
更改为其他内容-这将复制隐藏字段的“price”类，并混淆jQuery关于您要查找的元素。由于span是第一个，它会找到第一个，但span没有“值”，因此对其运行
.val（）
，不会返回任何结果

最后，将循环限制为仅查找orders表中的行是明智的，否则它可能会对页面中其他表中的行进行操作，这是不可取的。为此，我在表中添加了一个
id=“ordersTable”
属性，然后将选择器从
$（“tr”）
更改为
$（“#ordersTable tr”）
，因此它只选择所需表中的行

医生：和

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


$（函数（）{
$（“.sendordre”）。单击（函数（e）{
e、 预防默认值（）；
$（“#ordersTable tr”）。每个（函数（i，el）{
var ProductName=$（el）.find（'.item_name'）.val（）；
变量数量=$（el）.find（'.quantity'）.val（）；
var Price=$（el.find（'.Price'）.val（）；
/*$.ajax({
键入：“POST”，
url:@url.Action（“
SendOrdre“
",，
数据类型：“json”，
数据：{
ProductName:ProductName，
价格：价格，
数量:数量,，
发送：“发送”
},
成功：功能（运行）{
如果（运行）{
控制台日志（“Ok”）；
}否则{
控制台日志（“错误”）；
}
},
});*/
//虚拟测试代码
console.log({
ProductName:ProductName，
价格：价格，
数量:数量,，
发送：“发送”
});
});
});
});



100


10


200


20
邮寄
将
val（）
更改为
text（）
：

如果你把控制器给我看，会有很大帮助的code@ADyson稍等：）@ADyson我刚用控制器更新了我的问题：）好的，谢谢。很抱歉，我们也能看到CustomerOrdersVM的结构吗。。。您是否在客户端调试了请求？i、 e.您是否在浏览器的网络工具中查看了AJAX请求，并检查了请求正文是否包含每个变量的预期值？text（）适用于price（因为跨度），但不适用于其他变量。您没有用.children（）修复遍历问题。在发布之前测试代码是明智的。代码片段特性使Javascript问题变得非常简单。另外，你甚至没有解释为什么有人应该应用你的改变。任务完成了！你被耍了，伙计！这都是关于意图的！谁演的？关于什么？打算做什么？你好像在说谜语…你兴奋吗…？你在这个缓慢的星期五早上招待我们！谢谢，伙计：）现在我的表格中只有一行，但当我查看我的数据库时，每次我按下按钮，它都会在数据库中插入4行。我不知道，在同一页中还有其他表格吗？因为
$（“tr”）
将选择页面中的所有表行，而不仅仅是上面显示的表中的行。这可能是a）它发布的次数比您预期的要多，b）它在某些情况下发布空值（因为这些字段在另一个表中不存在）的合理原因。我已经更新了答案，添加了一个修复程序来防止出现这种情况。我无法想象是什么原因导致了这种情况——如果你注意到的话，我的演示没有做到这一点。可能您的Razor逻辑正在打印一行，其中包含一些空白值或其他内容（例如，可能模型中的某个项不包含任何数据）-使用brower View源代码或HTML Inspector工具检查您的实际HTML输出。哦，实际上我想知道，您的表实际上是否有标题行？可能就是这样。如果是，请尝试再次将选择器更改为“#ordersTable tbody tr”，以仅获取正文行
$(el).find

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();