Pass table data from view to controller using javascript

Question

I am trying to pass my table data from view to controller using java-script but it's not working. I am passing my table data to my model class using java-script.

My model class has array of objects of my shared class in which i'm filling my data.

My shared class is like this:

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

My model class is like this:

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

}

My javascript code is this:

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

My html table is like this which is made dynamically:

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

My controller action is this:

 [HttpPost]
    public ActionResult AdvancePurchase(BiddingSecondStepModel data)
    {

    }

I haven't written code for what i have to do with my data when controller action receives the data. My main concern is how to send data of my table from view to my controller action.

Please help. Thanks in advance

Answer 1

maybe your model in js didn't create right! you can get your model with serialize form instead of get each fields like that.for do this first define id for your form and in script get your whole form by id, then you can serialize all fields of model that is in your form like:

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

now you can bind your model after your url and send it to your controller like:

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

it will work.