How to bind value from UI to controller with complex model in c# mvc

Question

I'm new to .net. I have this model that has been a real trouble for me for days.

class DetailedRecordModel

public class DetailedRecordModel
    {
        public string RecordID { get; set; }
        public string EmployeeID { get; set; }
        public string CustomerID { get; set; }

        [DataType(DataType.Date)]
        public string InitDate { get; set; }

        [DataType(DataType.Date)]
        public string DeliveryDate { get; set; }
        public virtual ICollection<PurchaseDetail> detail{ get; set; }
}

class PurchaseDetail

public class PurchaseDetail
    {
        public string ProductID { get; set; }
        public int Qty { get; set; }
        public double price { get; set; }
        public string RecordID { get; set; }

    }

controller

        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(DetailedRecordModel record)
        {
            if (ModelState.IsValid)
            {
            return View(record);
             
            }
                return RedirectToAction("ViewRecords");
        }

html

<div class="form-group">
            @Html.LabelFor(model => model.EmployeeID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.EmployeeID, (IEnumerable<SelectListItem>)ViewData["sellistemp"])
                @Html.ValidationMessageFor(model => model.EmployeeID, "", new { @class = "text-danger" })
            </div>
        </div>

        <div class="form-group">
            @Html.LabelFor(model => model.CustomerID, htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownListFor(model => model.CustomerID, (IEnumerable<SelectListItem>)ViewData["sellistcust"])
                @Html.ValidationMessageFor(model => model.CustomerID, "", new { @class = "text-danger" })
            </div>
        </div>
 <tr>
       <td style="display:none" id="Index0" name="detail.Index" value="0"></td>
       <td>1</td>
       <td id="ProductID" name="detail[0].ProductID" value="sp00002">sp00002</td>
       <td id="Qty" name="detail[0].Qty" value="12123">12123</td>
       <td id="price" name="detail[0].price" value="2312">2312</td>
</tr>
<tr>
       <td style="display:none" id="Index1" name="detail.Index" value="1"></td>
       <td>2</td>
       <td id="ProductID" name="detail[1].ProductID" value="sp00003">sp00003</td>
       <td id="Qty" name="detail[1].Qty" value="2323">2323</td>
       <td id="price" name="detail[1].price" value="3223">3223</td>
</tr>

for RecordID, EmployeeID, CustomerID, InitDate and DeliveryDate passing them to the controller is all fine, however I always get null for <PurchaseDetail> detail . How can I solve this problem?

Answer 1

you have to pass the model to the view by using View(myModel) or RedirectToAction("ViewRecords", record)

    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create(DetailedRecordModel record)
    {
        if (ModelState.IsValid)
        {
            return RedirectToAction("ViewRecords", record);
         
        }
        return View(record);
    }

    public IActionResult ViewRecords(DetailedRecordModel model)
    {
        return View(model);
    }

then in the View you can access the model like here How to pass model in MVC view

1. add the definition of your model at the top of @model DetailedRecordModel;
2. after you added the model you can access it everywhere in your file with @Model (in html) or Model

 @model DetailedRecordModel; @{ ViewData["Title"] = "ViewRecords"; } <h1>ViewRecords</h1> <div class="form-group"> @Html.LabelFor(model => model.EmployeeID, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.EmployeeID, (IEnumerable<SelectListItem>)ViewData["sellistemp"]) @Html.ValidationMessageFor(model => model.EmployeeID, "", new { @class = "text-danger" }) </div> </div> <div class="form-group"> @Html.LabelFor(model => model.CustomerID, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> @Html.DropDownListFor(model => model.CustomerID, (IEnumerable<SelectListItem>)ViewData["sellistcust"]) @Html.ValidationMessageFor(model => model.CustomerID, "", new { @class = "text-danger" }) </div> </div> @foreach (var entry in Model.detail) { <tr> <td style="display:none" id="Index0" name="detail.Index" value="0"></td> <td>1</td> <td id="ProductID" name="@entry.ProductID" value="sp00002">sp00002</td> <td id="Qty" name="@entry.Qty" value="12123">12123</td> <td id="price" name="@entry.price" value="2312">2312</td> </tr> }

Answer 2

After 2 wretching days of desperation I know that in order to bind the values, I found the answer by declaring an object DetailedRecordModel inside model PurchaseDetail and I have to change the name of each <input> tag into detail[index].somevariable