Adding the dynamic row in ASP .net mvc jquery grid?

Question

I  need to add the dynamic row in jquery datatable and in ajax success event. but i am getting the undefined method error. Please find the below code and help me to solve.

 

 

Controller:

[HttpPost]
       public ActionResult SaveItems(Int32 customer, Int32 product, Int32 quantity, Int32 saleId)
       {
           if (saleId > 0)
           {
               TBL_Sale obj = new TBL_Sale();
               obj.CustomerId = customer;
               obj.CreatedBy = 1;
               obj.CreatedDate = DateTime.Now;

               objDb.TBL_Sale.Add(obj);
               objDb.SaveChanges();
           }

           TBL_SaleItems saleItemId = SaveIndividualItem(product, quantity, saleId);
           return View(saleItemId);
       }


       public TBL_SaleItems SaveIndividualItem(Int32 product, Int32 quantity, Int32 saleId)
       {
           TBL_Stock objStock = objDb.TBL_Stock.Where(w => w.ProductId == product).SingleOrDefault();

           TBL_SaleItems obj = new TBL_SaleItems();
           obj.ProductId = product;
           obj.Qty = quantity;
           obj.SaleId = saleId;
           obj.PricePerQty = objStock.PricePerQty;
           obj.StockId = objStock.Id;
           obj.SuplierId = objStock.SupplierId;
           obj.Amount = objStock.PricePerQty * quantity;
           objDb.TBL_SaleItems.Add(obj);
           objDb.SaveChanges();

           return obj;
       }

 

 

 

 

 View Code:

<style>
    /*.form-control{
        width:70% !important;
    }*/
</style>



@section Scripts {


    <script>


        var giCount = 1;
        var table = '';

        $(function () {

            table = $('#example').DataTable({
                //responsive: true
            });
            debugger;

            function fnClickAddRow() {
                table.row.add([
                    giCount + ".1",
                    giCount + ".2",
                    giCount + ".3",

                    giCount + ".4",
                    giCount + ".5",
                    giCount + ".6",

                    giCount + ".7",
                    giCount + ".8",
                    giCount + ".9"
                ]).draw(false);;

                giCount++;
            }

           // new $.fn.dataTable.FixedHeader(table);
            //table.row.add([
            //      giCount + ".1",
            //      giCount + ".2",
            //      giCount + ".3",

            //      giCount + ".4",
            //      giCount + ".5",
            //      giCount + ".6",

            //      giCount + ".7",
            //      giCount + ".8",
            //      giCount + ".9"
            //]).draw(false);;





            @*$('#txtSearch').typeahead({
                hint: true,
                highlight: true,
                minLength: 1
                , source: function (request, response) {
                    $.ajax({
                        url: '@Url.Action("New","Billing")',
                        data: "{ 'prefix': '" + request + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            debugger;
                            items = [];
                            map = {};
                            $.each(data.d, function (i, item) {
                                var id = item.split('-')[1];
                                var name = item.split('-')[0];
                                map[name] = { id: id, name: name };
                                items.push(name);
                            });
                            response(items);
                            $(".dropdown-menu").css("height", "auto");
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                updater: function (item) {
                    $('[id*=hfCustomerId]').val(map[item].id);
                    return item;
                }
            });*@
        });






        function SaveItems() {
            let customer = $('#txCustomer').val();
            let product = $('#txtProduct').val();
            let quantity = $('#txtQuantity').val();

            let saleId = $('#hfSaleId').val();


            $.ajax({
                url: '@Url.Action("SaveItems","Home")',
                data: "{ 'customer': " + customer + ",'product':" + product + ",'quantity':" + quantity + ",'saleId':" + saleId + "}",
                dataType: "json",
                type: "POST",
                contentType: "application/json; charset=utf-8",
                success: function (data) {
                    fnClickAddRow();
                },
                error: function (response) {
                    alert(response.responseText);
                }
            });


        }

    </script>

}


<style>
    #divTotal {
        font-size: 12px !important;
    }
</style>


<style type="text/css">
    .bs-example {
        font-family: sans-serif;
        position: relative;
        margin: 100px;
    }

    .typeahead, .tt-query, .tt-hint {
        border: 2px solid #CCCCCC;
        border-radius: 8px;
        font-size: 22px; /* Set input font size */
        height: 30px;
        line-height: 30px;
        outline: medium none;
        padding: 8px 12px;
        width: 396px;
    }

    .typeahead {
        background-color: #FFFFFF;
    }

        .typeahead:focus {
            border: 2px solid #0097CF;
        }

    .tt-query {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
    }

    .tt-hint {
        color: #999999;
    }

    .tt-menu {
        background-color: #FFFFFF;
        border: 1px solid rgba(0, 0, 0, 0.2);
        border-radius: 8px;
        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
        margin-top: 12px;
        padding: 8px 0;
        width: 422px;
    }

    .tt-suggestion {
        font-size: 22px; /* Set suggestion dropdown font size */
        padding: 3px 20px;
    }

        .tt-suggestion:hover {
            cursor: pointer;
            background-color: #0097CF;
            color: #FFFFFF;
        }

        .tt-suggestion p {
            margin: 0;
        }
</style>

<script type="text/javascript">






</script>




<div class="container">

    <form class="form-horizontal" action="/action_page.php">
        <br />

        <div class="form-group">

            <input type="text" class="typeahead tt-query" autocomplete="off" spellcheck="false">

            <label class="control-label col-sm-1" for="txCustomer">Customer</label>
            <div class="col-md-8">
                <input type="text" class="form-control" id="txCustomer" placeholder="Customer" name="Customer">
            </div>
            <div class="col-md-2">
                <button type="submit" class="btn btn-default">Submit</button>
            </div>

        </div>
        <div class="form-group">

            <label class="control-label col-sm-1" for="txtProduct">Product</label>

            <div class="col-md-2">
                <input type="text" class="form-control" id="txtProduct" placeholder="Product Name" name="Product">
            </div>


            <label class="control-label col-sm-1" for="txtProductCode">Product</label>

            <div class="col-md-2">
                <input type="text" class="form-control" id="txtProductCode" placeholder="Product Code" name="ProductCode">
            </div>


            <label class="control-label col-sm-1" for="txtQuantity">Quantity</label>

            <div class="col-md-2">
                <input type="text" class="form-control" id="txtQuantity" placeholder="Quantity" name="Quantity">
            </div>

            <div class="col-md-1">
                <button type="button" onclick="return fnClickAddRow();" class="btn btn-default">Submit</button>
            </div>
        </div>

    </form>

    <div class="row">
        @Html.Partial("_BillingGrid")
    </div>
    <br />

    <div class="row" id="divTotal">

        <form class="form-horizontal" action="/action_page.php">
            <br />


            <div class="form-group">

                <label class="control-label col-sm-1" for="txtProduct">Cash Type</label>

                <div class="col-md-3">
                    <select class="form-control"></select>
                </div>


                <label class="control-label col-sm-1" for="txtProduct">Discount(%)</label>

                <div class="col-md-2">
                    <select class="form-control"></select>
                </div>

                <label class="control-label col-sm-1" for="txtProductCode">Discount</label>

                <div class="col-md-1">
                    <input type="text" class="form-control" id="txtProductCode" placeholder="Product Code" name="ProductCode">
                </div>

                <div class="col-md-1">
                    <button type="button" class="btn btn-default">Print</button>
                </div>

            </div>
            <div class="form-group">

                <label class="control-label col-sm-1" for="txtQuantity">Quantity</label>

                <div class="col-md-3">
                    <input type="text" class="form-control" id="txtQuantity" placeholder="Quantity" name="Quantity">
                </div>

                <label class="control-label col-sm-1" for="txtItems">Items</label>

                <div class="col-md-2">
                    <input type="text" class="form-control" id="txtItems" placeholder="Items" name="Items">
                </div>

                <label class="control-label col-sm-1" for="txtAmount">Amount</label>

                <div class="col-md-1">
                    <input type="text" class="form-control" id="txtAmount" placeholder="Total Amount" name="Total Amount">
                </div>

                <div class="col-md-1">
                    <button type="button" class="btn btn-default">Cancel</button>
                </div>
            </div>

        </form>


    </div>

</div>