Updating Master-Detail / Parent-Child data in MVC - asp.net

Question

Have a view with a master-detail style view for an invoice. Master is invoice, detail is invoice lines. I'm trying to get detail data items to save on upon an edit post but the detail data is lost upon reaching the post Edit on the controller. So the master data saves fine but the detail is obviously not saved.
Invoice Class:
public class Invoice
{
public Invoice()
{
}
[Required]
[Key]
public int InvoiceID { get; set; }
[Required]
[StringLength(30)]
[DisplayName("Invoice Number")]
public string InvoiceNumber { get; set; }
[Required, DatabaseGenerated(DatabaseGeneratedOption.Computed)]
[DataType(DataType.Date)]
[Column(TypeName = "Date")]
[DisplayName("Invoice Date")]
public DateTime InvoiceDate { get; set; }
public List<InvoiceLine> InvoiceLines { get; set; }
[ForeignKey("Client")]
public int OwnerClientIDFK { get; set; }
[DisplayName("Client")]
public Client Client { get; set; }
}
Invoice Line class:
public class InvoiceLine
{
public InvoiceLine()
{
}
[Key]
[Required]
public int InvoiceLineId { get; set; }
[Required]
[StringLength(255)]
[DisplayName("Item")]
public string ItemName { get; set; }
[DisplayName("Description")]
public string ItemDescription { get; set; }
[Required]
public int Quantity { get; set; }
[Required]
[DisplayFormat(DataFormatString = "{0:C}", ApplyFormatInEditMode = true)]
public decimal Value { get; set; }
[ForeignKey("ParentInvoice")]
public int InvoiceID { get; set; }
public Invoice ParentInvoice { get; set; }
}
Controller Edit (get):
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
// Invoice invoice = db.Invoices.Find(id);
Invoice invoice = db.Invoices.Include(i => i.InvoiceLines)
.Include(i => i.Client)
.Where(c => c.InvoiceID == id).FirstOrDefault();
if (invoice == null)
{
return HttpNotFound();
}
ViewBag.OwnerClientIDFK = new SelectList(db.Clients, "ClientId", "CompanyName", invoice.OwnerClientIDFK);
return View(invoice);
}
Controller Edit (post):
public ActionResult Edit([Bind(Include = "InvoiceID,InvoiceNumber,InvoiceDate,OwnerClientIDFK")] Invoice invoice)
{
if (ModelState.IsValid)
{
db.Entry(invoice).State = EntityState.Modified;
foreach (var invLine in invoice.InvoiceLines)
{
db.Entry(invLine).State = EntityState.Modified;
}
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.OwnerClientIDFK = new SelectList(db.Clients, "ClientId", "CompanyName", invoice.OwnerClientIDFK);
return View(invoice);
}
So in the above, when it reaches the foreach, it throws an exception because InvoiceLines is null.
View:
#model DemoApp.Entities.Invoice
#{
ViewBag.Title = "Edit";
}
<h2>Edit</h2>
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>Invoice</h4>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.InvoiceID)
<div class="form-group">
#Html.LabelFor(model => model.InvoiceNumber, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.InvoiceNumber, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.InvoiceNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.InvoiceDate, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.InvoiceDate, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.InvoiceDate, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
#Html.LabelFor(model => model.OwnerClientIDFK, "OwnerClientIDFK", htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.DropDownList("OwnerClientIDFK", null, htmlAttributes: new { #class = "form-control" })
#Html.ValidationMessageFor(model => model.OwnerClientIDFK, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<h2>Invoice Lines</h2>
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="row">
<div class="col-md-8">
<table class="table">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Qty</th>
<th>Unit Value</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.InvoiceLines.Count; i++)
{
<tr>
<td>#Html.EditorFor(x => x.InvoiceLines[i].ItemName, new { htmlAttributes = new { #class = "form-control" } })</td>
</tr>
}
</tbody>
</table>
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
#Html.ActionLink("Back to List", "Index")
</div>
#section Scripts {
#Scripts.Render("~/bundles/jqueryval")
}
How do I get it to update the detail / child data?
Any help appreciated. Thanks in advance.

Answer 1

You are not binding InvoiceLines on edit post action method
public ActionResult Edit([Bind(Include = "InvoiceID,InvoiceNumber,InvoiceDate,OwnerClientIDFK,InvoiceLines")] Invoice invoice)
{

Answer 2

What you probably need is to load the Invoice Lines when you get the parent entity.
db.Entry(invoice).Collection(i=>i.InvoiceLines).Load() should do that.

Answer 3

First off, this is kind of a tricky scenario. There are a lot of moving parts. I got really interested in this and wrote a sample application. :)
Here's the link to the repo on GitHub:
https://github.com/benday/asp-mvc-invoice-sample
There are a handful of things going on that are conspiring to cause problems in your code.
1) ironically, the Bind[] that you have in your Edit(Invoice model) method is getting in your way. If you remove it entirely, ASP MVC will attempt to bind everything. Right now, it's only binding what you tell it to bind and since you don't include the InvoiceLines collection, then it's coming up null.
2) if you want ASP MVC to attempt to bind data into your model, you need to POST that data back to the server. If those invoice lines aren't in an html form and aren't represented as form fields, then that data is just going to be missing.
The code you have to draw your invoice lines is missing most of the fields that would be required to populate your InvoiceLine objects.
#Html.EditorFor(x => x.InvoiceLines[i].ItemName, new {
htmlAttributes = new { #class = "form-control" } })
Editor Template for the InvoiceLine class
In my sample code, I created an editor template for the InvoiceLine class. This allows me to easily create bindable html for the InvoiceLines by calling #Html.EditorFor(model => model.Invoice.InvoiceLines) asdf
I know this isn't the simplest answer ever but I hope this helps you over the hump.