How to pass data from view to controller by ajax request as input parameters to controller action method

See more:

MVC5

entity-framework

, +

Problem

cannot pass data from view to controller by ajax request as input parameters to controller action method

I have class model name SalesHeader as following

public class SalesHeader
    {
        public int SalesOrderNo { get; set; }
        public int SalesYear { get; set; }
        public int CustomerID { get; set; }
        public Customer Customers { get; set; }
        public ICollection<SalesFooter> SalesFooters { get; set; }
    
    }

I make controller SalesOrder Based on SalesHeader model

in salesorder controller i have actionresult Create

I need to pass data from view of create action result to controller salesorder Create Method As Input parameters

[HttpPost]
public ActionResult Create(SalesHeader sh, SalesFooter[] orderItems)
{
}
sales header represented bySalesHeader sh as ( SalesOrderNo,SalesYear,CustomerId )
sales Footer represented by SalesFooter sh as ( SalesLineNo,ItemCode,Quantity,UnitPrice,Total )
and SalesFooter[] orderItems represent public ICollection<salesfooter> SalesFooters { get; set; }
and i will receive items data from view to controller as array of items
Design of form

on Header(represent by Sales Header Model) 
SalesOrderNO   1
SalesYear      2019
CustomerNo     2509
on Footer(represent by Sales Footer Model)
SalesLineNo ItemCode  Quantity  Price Total
1            12929       5        10   50
2            17918       4         5   20

so that i will put break point on create method and when click save button

it must have one record on sales header(sh) and two records on sales footer ( orderItems)

so that my main question how to pass these record from view to controller

I work on asp.net core 2.1 visual studio 2017 sql server 2012

after click save button i make inspect i found two records already sent but on controller nothing exist on sales header or footet paramters of create

What I have tried:

my view as following

@model TabDataAccess.Dto.SalesHeader


<script>
    $(document).ready(function () {
        var orderItems = [];
        //Add button click function
        $('#add').click(function () {
            //Check validation of order item
            var isValidItem = true;
            
            //Add item to list if valid
            if (isValidItem) {
                orderItems.push({
                    SalesLineNo: $('#SalesLineNo').val().trim(),
                    ItemCode: $('#ItemCode').val().trim(),
                    Quantity: parseInt($('#Qunatity').val().trim()),
                    UnitPrice: parseFloat($('#UnitPrice').val().trim()),
                    Total: parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim())
                });

                ////Clear fields
                $('#SalesLineNo').val('').focus();
           
                $('#ItemCode','#Qunatity,#UnitPrice').val('');

            }
            //populate order items
            GeneratedItemsTable();

        });
        function GeneratedItemsTable() {
            if (orderItems.length > 0) {
                var $table = $('<table/>');
                $table.append('<thead><tr><th>SalesLineNo</th><th>ItemCode</th><th>Qunatity</th><th>UnitPrice</th><th>Total</th><th></th></tr></thead>');
                var $tbody = $('<tbody/>');
                $.each(orderItems, function (i, val) {
                    var $row = $('<tr/>');
                    $row.append($('<td/>').html(val.SalesLineNo));
                    $row.append($('<td/>').html(val.ItemCode));
                    $row.append($('<td/>').html(val.Qunatity));
                    $row.append($('<td/>').html(val.UnitPrice));
                    $row.append($('<td/>').html(val.Total));
                    var $remove = $('<a href="#">Remove</a>');
                    $remove.click(function (e) {
                        e.preventDefault();
                        orderItems.splice(i, 1);
                        GeneratedItemsTable();
                    });
                    $row.append($('<td/>').html($remove));
                    $tbody.append($row);
                });
                console.log("current", orderItems);
                $table.append($tbody);
                $('#orderItems').html($table);
            }
            else {
                $('#orderItems').html('');
            }
        }
        $("#saveOrder").click(function (e) {
            e.preventDefault();

            var orderItems = [];
            orderItems.length = 0;

            orderItems.push({
                SalesLineNo: $('#SalesLineNo').val().trim(),
                ItemCode: $('#ItemCode').val().trim(),
                Quantity: parseInt($('#Qunatity').val().trim()),
                UnitPrice: parseFloat($('#UnitPrice').val().trim()),
                Total: parseInt($('#Qunatity').val().trim()) * parseFloat($('#UnitPrice').val().trim())
            });


            var data = JSON.stringify({
                orderfooter: orderItems
            });
            $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'POST',
                url: '/SalesOrder/Create',
                data: orderItems,
                success: function (result) {
                    alert(result);
                    location.reload();
                },
                error: function () {
                    alert("Error!")
                }
            });
        });
    });
   
    
    
</script>
<h2>Create</h2>

<h4>SalesHeader</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="SalesOrderNo" class="control-label"></label>
                <input asp-for="SalesOrderNo" class="form-control" />
                <span asp-validation-for="SalesOrderNo" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="SalesYear" class="control-label"></label>
                <input asp-for="SalesYear" class="form-control" />
                <span asp-validation-for="SalesYear" class="text-danger"></span>
            </div>
           
           
           
            <div class="form-group">
                <label asp-for="CustomerID" class="control-label"></label>
                @*<select asp-for="CustomerID" class="form-control" asp-items="ViewBag.CustomerID"></select>*@
                <input asp-for="CustomerID" class="form-control" />
                <span asp-validation-for="CustomerID" class="text-danger"></span>
            </div>
           
            <div class="details">
                <h4>Order Items</h4>
                <table width="100%">
                    <tr>
                        <td>SalesLineNo</td>
                        <td>ItemCode</td>
                        <td>Quantity</td>
                        <td>UnitPrice</td>
                        <td>Total</td>
                        <td> </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" id="SalesLineNo" />
                            <span class="error">Item name required</span>
                        </td>
                        <td>
                            <input type="text" id="ItemCode" />
                            <span class="error">Valid quantity required</span>
                        </td>
                        <td>
                            <input type="text" id="Qunatity" />
                            <span class="error">Valid rate required</span>
                        </td>
                        <td>
                            <input type="text" id="UnitPrice" />
                            <span class="error">Valid rate required</span>
                        </td>
                        <td>
                            <input type="text" id="Total" />
                            <span class="error">Valid rate required</span>
                        </td>
                        <td>
                            <input type="button" id="add" value="add" />
                        </td>
                    </tr>
                </table>
                <div id="orderItems" class="tablecontainer">

                </div>
                @*<div style="padding:10px 0px; text-align:right">
            <input id="submit" type="button" value="Save" style="padding:10px 20px" />
        </div>*@
                <div class="form-group">
                    @*<input type="submit" value="Create" class="btn btn-default" />*@
                    <button id="saveOrder" type="submit"value="Create" class="btn btn-default">Save Order</button>
                </div>
            </div>
            </form>
 
</div>
    </div>