使用 javascript 将表数据从视图传递到控制器答案

【问题标题】：Pass table data from view to controller using javascript使用 javascript 将表数据从视图传递到控制器
【发布时间】：2016-06-30 06:37:06
【问题描述】：

我正在尝试使用 java 脚本将表数据从视图传递到控制器，但它不起作用。我正在使用 java-script 将表数据传递给我的模型类。

我的模型类有我的共享类的对象数组，我在其中填充我的数据。

我的共享课是这样的：

 public class BomItemsDTO : IBomItems
{
   public int stockitemid { get; set; }
   public string itemname { get; set; }
   public int quantity { get; set; }
   public string description { get; set; }
   public string approvedsupplier { get; set; }
   public int priceperunit { get; set; }
   public int totalprice { get; set; }
}

我的模型类是这样的：

public class BiddingSecondStepModel
{
    public BomItemsDTO[] BomItems { get; set; }

}

我的 javascript 代码是这样的：

<script type="text/javascript">
    $("#btnsendtoadvancepurchase").on('click', function () {
        var BomItems = [];
        $('#tblBom tr').each(function (row, tr) {
                BomItems.push({
                    itemcode: $(tr).find('td:eq(0)').text().trim(),
                    desc: $(tr).find('td:eq(1)').text(),
                    quant: $(tr).find('td:eq(2)').text(),
                    supplier: $(tr).find('td:eq(3)').text(),
                });
        });
            var model = {
                BomItems: BomItems
            };


            debugger;
            $.ajax({
                url:'@Url.Action("AdvancePurchase", "CreateBid")',
                type: "POST",
                contentType: 'application/json; charset=utf-8',
                data: MODEL,
                dataType:'json',
                success: function (data) {
                    alert('Document Saved.');
                }
            });
        });

</script>

我的html表格是这样动态生成的：

<table class="TableID2" id="tblBom">
                                    <thead>
                                        <tr>
                                            <th>Item Code</th>
                                            <th>Description</th>
                                            <th>Quantity</th>
                                            <th>Approved Supplied</th>
                                            <th></th>
                                        </tr>
                                    <tr><td>
                TD6915PLBOXSTRG00
            </td><td>456 n6</td><td>789456</td><td>aa</td><td><img src="../Content/Images/deleterow.png" class="btnDelete"></td></tr><tr><td>
                SG0242108JAD1HG10
            </td><td>125 v4</td><td>456123</td><td>aa</td><td><img src="../Content/Images/deleterow.png" class="btnDelete"></td></tr></thead>

                                </table>

我的控制器操作是这样的：

 [HttpPost]
    public ActionResult AdvancePurchase(BiddingSecondStepModel data)
    {

    }

当控制器操作接收到数据时，我还没有编写代码来处理我的数据。我主要关心的是如何将我的表格数据从视图发送到我的控制器操作。

请帮忙。提前致谢

【问题讨论】：

使用 data: JSON.stringify({ data: model }), 您还需要更改所有 javascript 属性名称以匹配模型属性名称 - 例如stockitemid（不是itemcode）、description（不是desc）等
@StephenMuecke 非常感谢先生...我在过去 2 小时内遇到了这个问题...但现在它正在工作...
我还怀疑您想将 id="tblBom" 放在 <tbody> 元素上，这样您就不会发送表格标题行（但您问题中的 html 无效 - 没有关闭 @ 987654333@ - 所以不确定它到底是什么）
实际上我正在使用javascript动态添加行，因此我的所有行都添加到中。的关闭也存在于那里，但由于添加了新行，它被转移到添加了最后一行。
A <thead> 用于表格标题！使用正确的元素:)

【解决方案1】：

也许您在 js 中的模型创建不正确！您可以使用序列化表单获取模型，而不是像那样获取每个字段。首先为表单定义 id，然后在脚本中通过 id 获取整个表单，然后您可以序列化表单中的模型的所有字段，例如：

var model=$("#Myform").serialize();

现在您可以在您的 url 之后绑定您的模型并将其发送到您的控制器，例如：

$.ajax({
         url:'@Url.Action("AdvancePurchase","CreateBid")?'+model,
         type: "POST",
         success: function (data) {
         alert('Document Saved.');
                }
                });

它会起作用的。

【讨论】：

OP 没有任何表单控件（只是一个带有文本的表格）。 var model=$("#Myform").serialize(); 不会返回任何东西！