MVC .net Core2 - Model is null at controller (when using Jquery ajax)

[afrika]

Hey guys
I am using asp.net core2 and jquery ajax

I am using Jquery ajax to post to a controller. However at the controller action all values are null

However when I try to post it via ajax to the server, the values appear as null What am I doing wrong ? Here is my code Kindly advise, many thanks E

function ehi(e) {

var fd = new FormData($("#Basket")[0]);


$.ajax({

    type: "POST",
    url: "/Shopping_Basket/Shops_AddToBasket_Update",//"/Shops/AddToBasket", //
    contentType: false,
    processData: false,
    data: fd,
    success: function (message) {

and the View Page

public class Shops_Basket
{
    [Key]
    public int BasketID { get; set; }
    [Required]
    public string UserName { get; set; }
    [Required]
    public int ProductID { get; set; }
    [Required]
    public DateTime Dates { get; set; }
    [Required]
    public int Quantity { get; set; }
    [Required]
    public decimal Price_Unit { get; set; }

    public decimal Total { get; set; }



    public bool IsCompleted { get; set; }

    public Products products { get; set; }

    public decimal Basket_Total
    {
        get { return Quantity * Price_Unit; }
       // set { Basket_Total = Basket_Total; }
    }
    public decimal Invoice
    {
        get { return Quantity * Price_Unit; }
        // set { Basket_Total = Basket_Total; }
    }

and finally the view page

<form id="Basket">
 <thead>
                    <tr>

                        <th>
                            @Html.DisplayNameFor(model => model.Dates)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Quantity)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Price_Unit)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.Total)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.IsCompleted)
                        </th>
                        <th>
                            @Html.DisplayNameFor(model => model.products)
                        </th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    @foreach (var item in Model) {
                    <tr>

                        <td>
                            @Html.DisplayFor(modelItem => item.Dates) 
                            <img src="/images/Department_Categories/@(item.ProductID).png" alt="@(item.products.Product_Name)" class="img-fluid img-thumbnail_50 rounded" />
                        </td>
                        <td>
                            <input asp-for="@item.Quantity" class="col-2 form-control75 col-md-5" type="number" autocomplete="off" style="width:20px;" min="1" size="5" max="10000" value="1" />
</form>