How to post single table row data in controller in ASP.NET core 6.0

See more:

ASP.NET-Core

Hello, Good day, I have two class Called Order and OrderDetails. To have the both classes displayed in a single view i had to wrap them in single class.

<pre> public class Order
    {
        [Key]
        public int OrderId { get; set; }

        [Display(Name = "CustomerName")]
       
        public string? CustomerName { get; set; }
              
        public ICollection<OrderDetail>? OrderDetails { get; set; }
       
    }

OrderDetails Class

public class OrderDetail
    {
        [Key]
        public int DetailId { get; set; }
 [ForeignKey("OrderId")]
        public int OrderId { get; set; }
        [Display(Name = "Service")] 
        public string ServiceName { get; set; }

        [Display(Name = "Quantity")]
        public int Quantity { get; set; }
      
        [Display(Name ="Unit Price")]
        public float UnitPrice { get; set; }       
        public Order? Order { get; set; }
    }

To have both classes displayed in a single view I wrapped them like this

<pre>  public class MultipleOrderModel
    {
        public Order Order { get; set; }
        public List<OrderDetail> OrderDetails { get; set; }
    }

on my View I have a form and table that on submit

<pre><form asp-action="Order">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            
                <div class="col-md-4">
                 
                <label asp-for="Order.CustomerID" class="control-label"></label>
                <select asp-for="Order.CustomerID"  class="dropdown form-control select2" asp-items="ViewBag.CustomerID" id="CustomerID" name="CustomerID">
                     <option value="" selected disabled>---Customer---</option>
                </select>
             <span asp-validation-for="Order.CustomerID" class="text-danger"></span>
                </div>
               
            
            <div class="form-group">
             <table id="zero_config" class="table table-striped table-bordered display">
    <thead>
        <tr>
            <th>
                SN
            </th>
            <th>
                Services
            </th>
            <th>
                Qty/Hrs
            </th>
            <th>
                Unit Price
            </th>
           
            <th>
                Total
            </th>
        </tr>
    </thead>
    <tbody>
                                        @if (Model.OrderDetails != null && Model.OrderDetails.Count > 0)
                                        {
                                            int j = 0;
                                            int sno = 0;
                                            
                                            foreach (var item in Model.OrderDetails)
                                            {

                                                <tr>
                                                    <td>
                                                        @{
                                                            sno++;
                                                        }
                                                        @sno
                                                    </td>
                                                    <td>
                                                        <select asp-for="OrderDetails[j].ServiceName" asp-items="ViewBag.ServiceID" class="dropdown form-control select2">
                                                             <option value="" selected disabled>---Services---</option>
                                                        </select>
                                                   
                                                    </td>
                                                    <td>
                                                       <input asp-for="OrderDetails[j].Quantity" class="form-control" type="number" placeholder="Qty/Hrs" />
                                                      
                                                       

                                                    </td>
                                                    <td>
       <input asp-for="OrderDetails[j].UnitPrice" class="form-control" type="number" placeholder="Unit Price" />
                                                        

                                                    </td>
                                                   
                                                    <td>
                                                        <input asp-for="OrderDetails[j].TotalAmount" class="form-control" type="number" placeholder="Total Amount"/>
                                                        

                                                    </td>
                                                </tr>
                                            }
                                        }
                                    </tbody>
</table>
            </div>
            
            <div class="form-group">
                <input type="submit" value="Add New Order" class="btn btn-primary" />
            </div>
        </form>

I am able to display the rows to the table... But my issue now is on post instead of seeing the multiple rows in the table it only shows one single row. I want to be able to see the multiple rows in the table in my controller .

What I have tried:

public IActionResult Order(MultipleOrderModel model)
       {

           int count = 0;
           if (!ModelState.IsValid)
           {
               TempData["ErrorMessage"] = "Kindly complete the form before submiting";
               return View(model);


           }
           foreach (var item in model.OrderDetails)
           {

               count++;
           }
           TempData["Message"] = count.ToString();
           return View(model);

       }