I am currently trying to incorporate Steve Sanderson’s example code into my MVC 3 application and I’m having difficulty.
http://blog.stevensanderson.com/2010/01/28/editing-a-variable-length-list-aspnet-mvc-2-style/
The problem is that when I submit the form, the order details property of the order entity remains empty. I have looked at the following answer:
Editing a Variable Length List, ASP.NET MVC 3 Style with Table
but I still can’t get it to work. I should point out that I’m relatively new to MVC and web development in general. I’ve looked through the site and failed to find any answer to this, so I apologise if there is one that I’ve missed. I have listed the relevant code below:
Create.cshtml
@model NorthwindLight.Models.Order
@using NorthwindLight.HtmlHelpers
@{
ViewBag.Title = "Create";
AjaxOptions newOpts = new AjaxOptions();
newOpts.UpdateTargetId = "tabledata";
newOpts.InsertionMode = InsertionMode.InsertAfter;
}
<h2>Create</h2>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@using (Html.BeginForm("Create", "Order", FormMethod.Post, new { name = "mainform", id = "mainform" })) {
@Html.ValidationSummary(true)
<fieldset>
<legend>Order</legend>
<div class="editor-label">
@Html.LabelFor(model => model.CustomerId, "Customer")
</div>
<div class="editor-field">
@Html.DropDownList("CustomerId", String.Empty)
@Html.ValidationMessageFor(model => model.CustomerId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.OrderDate)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.OrderDate)
@Html.ValidationMessageFor(model => model.OrderDate)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipName)
@Html.ValidationMessageFor(model => model.ShipName)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipAddress)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipAddress)
@Html.ValidationMessageFor(model => model.ShipAddress)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipCity)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipCity)
@Html.ValidationMessageFor(model => model.ShipCity)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipRegion)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipRegion)
@Html.ValidationMessageFor(model => model.ShipRegion)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipPostalCode)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipPostalCode)
@Html.ValidationMessageFor(model => model.ShipPostalCode)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.ShipCountry)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.ShipCountry)
@Html.ValidationMessageFor(model => model.ShipCountry)
</div>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<br />
<table>
<thead>
<tr>
<th>Order</th>
<th>Product</th>
<th>Unit Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody id="tabledata">
@Html.Action("OrderDetailPartial")
</tbody>
</table>
@Ajax.ActionLink("New Record", "OrderDetailPartial", newOpts)
</fieldset>
}
<div>
<a href="javascript:document.mainform.submit();">Create</a>
@Html.ActionLink("Back to List", "Index")
</div>
OrderDetailPartial.cshtml
@model NorthwindLight.Models.OrderDetail
@using NorthwindLight.Models
@using NorthwindLight.HtmlHelpers
@{
Layout = null;
var context = new NorthwindContext();
}
<tr>
<td>
@using (Html.BeginCollectionItem("items"))
{
@:</td>
@:<td>
@Html.Hidden("OrderId")
@:</td>
@:<td>
@Html.DropDownListFor(m => Model.ProductId, new SelectList (context.Products, "ProductId", "ProductName"), string.Empty)
@:</td>
@:<td>
@Html.EditorFor(m => Model.UnitPrice)
@:</td>
@:<td>
@Html.EditorFor(m => Model.Quantity)
@:</td>
@:<td>
<a href="#" class="deleteRow">Delete</a>
}
</td>
</tr>
Action methods of OrderController
public ActionResult Create()
{
ViewBag.CustomerId = new SelectList(db.Customers, "CustomerId", "CompanyName");
return View();
}
[HttpPost]
public ActionResult Create(Order order)
{
if (ModelState.IsValid)
{
db.Orders.Add(order);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.CustomerId = new SelectList(db.Customers, "CustomerId", "CompanyName", order.CustomerId);
return View(order);
}
public ViewResult OrderDetailPartial()
{
OrderDetail orderDetail = new OrderDetail();
return View(orderDetail);
}
Order.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace NorthwindLight.Models
{
public class Order
{
public int OrderId { get; set; }
public int CustomerId { get; set; }
public DateTime OrderDate { get; set; }
public string ShipName { get; set; }
public string ShipAddress { get; set; }
public string ShipCity { get; set; }
public string ShipRegion { get; set; }
public string ShipPostalCode { get; set; }
public string ShipCountry { get; set; }
public virtual Customer Customer { get; set; }
public byte[] RowVersion { get; set; }
public virtual List<OrderDetail> OrderDetails { get; set; }
public Order()
{
OrderDetails = new List<OrderDetail>();
}
}
}
OrderDetail.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace NorthwindLight.Models
{
public class OrderDetail
{
public int OrderId { get; set; }
public int ProductId { get; set; }
public decimal UnitPrice { get; set; }
public int Quantity { get; set; }
public virtual Order Order { get; set; }
public virtual Product Product { get; set; }
}
}
The previous mentioned user stated that he got his example to work without having to change anything in the Html.BeginCollectionItem code that Steve Sanderson supplied, but I include that also (I should point out that this code item is totally beyond me at this time. I was hoping to use it as a black box).
using System;
using System.Web.Mvc;
using System.Web;
using System.Collections.Generic;
namespace NorthwindLight.HtmlHelpers
{
public static class HtmlPrefixScopeExtensions
{
private const string idsToReuseKey = "__htmlPrefixScopeExtensions_IdsToReuse_";
public static IDisposable BeginCollectionItem(this HtmlHelper html, string collectionName)
{
var idsToReuse = GetIdsToReuse(html.ViewContext.HttpContext, collectionName);
string itemIndex = idsToReuse.Count > 0 ? idsToReuse.Dequeue() : Guid.NewGuid().ToString();
// autocomplete="off" is needed to work around a very annoying Chrome behaviour whereby it reuses old values after the user clicks "Back", which causes the xyz.index and xyz[...] values to get out of sync.
html.ViewContext.Writer.WriteLine(string.Format("<input type=\"hidden\" name=\"{0}.index\" autocomplete=\"off\" value=\"{1}\" />", collectionName, html.Encode(itemIndex)));
return BeginHtmlFieldPrefixScope(html, string.Format("{0}[{1}]", collectionName, itemIndex));
}
public static IDisposable BeginHtmlFieldPrefixScope(this HtmlHelper html, string htmlFieldPrefix)
{
return new HtmlFieldPrefixScope(html.ViewData.TemplateInfo, htmlFieldPrefix);
}
private static Queue<string> GetIdsToReuse(HttpContextBase httpContext, string collectionName)
{
// We need to use the same sequence of IDs following a server-side validation failure,
// otherwise the framework won't render the validation error messages next to each item.
string key = idsToReuseKey + collectionName;
var queue = (Queue<string>)httpContext.Items[key];
if (queue == null) {
httpContext.Items[key] = queue = new Queue<string>();
var previouslyUsedIds = httpContext.Request[collectionName + ".index"];
if (!string.IsNullOrEmpty(previouslyUsedIds))
foreach (string previouslyUsedId in previouslyUsedIds.Split(','))
queue.Enqueue(previouslyUsedId);
}
return queue;
}
private class HtmlFieldPrefixScope : IDisposable
{
private readonly TemplateInfo templateInfo;
private readonly string previousHtmlFieldPrefix;
public HtmlFieldPrefixScope(TemplateInfo templateInfo, string htmlFieldPrefix)
{
this.templateInfo = templateInfo;
previousHtmlFieldPrefix = templateInfo.HtmlFieldPrefix;
templateInfo.HtmlFieldPrefix = htmlFieldPrefix;
}
public void Dispose()
{
templateInfo.HtmlFieldPrefix = previousHtmlFieldPrefix;
}
}
}
}
I have also included below a sample of the html that is created from the above code.
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths"><head>
<meta charset="utf-8">
<title>Create</title>
<link type="text/css" rel="stylesheet" href="/Content/Site.css">
<script type="text/javascript" src="/Scripts/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/Scripts/modernizr-1.7.min.js"></script>
<script type="text/javascript" src="/Scripts/DeleteRow.js"></script>
<script type="text/javascript" src="/Scripts/jquery.unobtrusive-ajax.js"></script>
</head>
<body>
<div class="page">
<header>
<div id="title">
<h1>My MVC Application</h1>
</div>
<div id="logindisplay">
[ <a href="/Account/LogOn">Log On</a> ]
</div>
<nav>
<ul id="menu">
<li><a href="/">Home</a></li>
<li><a href="/Home/About">About</a></li>
</ul>
</nav>
</header>
<section id="main">
<h2>Create</h2>
<script type="text/javascript" src="/Scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<form name="mainform" method="post" id="mainform" action="/Order/Create"> <fieldset>
<legend>Order</legend>
<div class="editor-label">
<label for="CustomerId">Customer</label>
</div>
<div class="editor-field">
<select name="CustomerId" id="CustomerId" class="valid"><option value=""></option>
<option value="1">One Company</option>
<option value="2">Two Company</option>
<option value="3">Three Company</option>
</select>
<span data-valmsg-replace="true" data-valmsg-for="CustomerId" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="OrderDate">OrderDate</label>
</div>
<div class="editor-field">
<input type="text" value="" name="OrderDate" id="OrderDate" data-val-required="The OrderDate field is required." data-val="true" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="OrderDate" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipName">ShipName</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipName" id="ShipName" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipName" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipAddress">ShipAddress</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipAddress" id="ShipAddress" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipAddress" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipCity">ShipCity</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipCity" id="ShipCity" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipCity" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipRegion">ShipRegion</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipRegion" id="ShipRegion" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipRegion" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipPostalCode">ShipPostalCode</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipPostalCode" id="ShipPostalCode" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipPostalCode" class="field-validation-valid"></span>
</div>
<div class="editor-label">
<label for="ShipCountry">ShipCountry</label>
</div>
<div class="editor-field">
<input type="text" value="" name="ShipCountry" id="ShipCountry" class="text-box single-line valid">
<span data-valmsg-replace="true" data-valmsg-for="ShipCountry" class="field-validation-valid"></span>
</div>
</fieldset>
<fieldset>
<legend>Order Details</legend>
<br>
<table>
<thead>
<tr>
<th>Product</th>
<th>Unit Price</th>
<th>Quantity</th>
<th></th>
</tr>
</thead>
<tbody id="tabledata">
<tr>
<td>
<input type="hidden" value="96300b05-ec2e-4058-b380-b67976c6ae41" autocomplete="off" name="items.index">
<select name="items[96300b05-ec2e-4058-b380-b67976c6ae41].ProductId" id="items_96300b05-ec2e-4058-b380-b67976c6ae41__ProductId" data-val-required="The ProductId field is required." data-val-number="The field ProductId must be a number." data-val="true" class="valid"><option value=""></option>
<option value="1">One Product</option>
<option value="2">Two Product</option>
<option value="3">Three Product</option>
<option value="4">Four Product</option>
</select> </td>
<td>
<input type="text" value="0.00" name="items[96300b05-ec2e-4058-b380-b67976c6ae41].UnitPrice" id="items_96300b05-ec2e-4058-b380-b67976c6ae41__UnitPrice" data-val-required="The UnitPrice field is required." data-val-number="The field UnitPrice must be a number." data-val="true" class="text-box single-line valid"> </td>
<td>
<input type="text" value="0" name="items[96300b05-ec2e-4058-b380-b67976c6ae41].Quantity" id="items_96300b05-ec2e-4058-b380-b67976c6ae41__Quantity" data-val-required="The Quantity field is required." data-val-number="The field Quantity must be a number." data-val="true" class="text-box single-line valid"> </td>
<td>
<a class="deleteRow" href="#">Delete</a>
</td>
<td><input type="hidden" value="" name="items[96300b05-ec2e-4058-b380-b67976c6ae41].OrderId" id="items_96300b05-ec2e-4058-b380-b67976c6ae41__OrderId" data-val-required="The OrderId field is required." data-val-number="The field OrderId must be a number." data-val="true">
</td>
</tr>
<tr>
<td>
<input type="hidden" value="a7286ad0-8389-4613-aefe-120a54f57318" autocomplete="off" name="items.index">
<select name="items[a7286ad0-8389-4613-aefe-120a54f57318].ProductId" id="items_a7286ad0-8389-4613-aefe-120a54f57318__ProductId" class="valid"><option value=""></option>
<option value="1">One Product</option>
<option value="2">Two Product</option>
<option value="3">Three Product</option>
<option value="4">Four Product</option>
</select> </td>
<td>
<input type="text" value="0.00" name="items[a7286ad0-8389-4613-aefe-120a54f57318].UnitPrice" id="items_a7286ad0-8389-4613-aefe-120a54f57318__UnitPrice" class="text-box single-line valid"> </td>
<td>
<input type="text" value="0" name="items[a7286ad0-8389-4613-aefe-120a54f57318].Quantity" id="items_a7286ad0-8389-4613-aefe-120a54f57318__Quantity" class="text-box single-line valid"> </td>
<td>
<a class="deleteRow" href="#">Delete</a>
</td>
<td><input type="hidden" value="" name="items[a7286ad0-8389-4613-aefe-120a54f57318].OrderId" id="items_a7286ad0-8389-4613-aefe-120a54f57318__OrderId">
</td>
</tr></tbody>
</table>
<a href="/Order/OrderDetailPartial" data-ajax-update="#tabledata" data-ajax-mode="after" data-ajax="true">New Record</a>
</fieldset>
</form>
<div>
<a href="javascript:document.mainform.submit();">Create</a>
<a href="/Order">Cancel</a>
</div>
</section>
<footer>
</footer>
</div>
</body></html>
What happens is that when I press submit, the Order entity has its properties caught by the model binder, but the List has a count of 0.
Any help would be greatly appreciated.
Edit: Is there anything wrong with the way that I’ve asked this question. It’s not that I’m impatient, but I thought that I would have had a comment by now. If anyone has any way of this question being improved, please let me know.
Edit: After waiting a week and getting no responses, I’ve been trying to get around using the defaultbinder by changing the create method to the following:
[HttpPost]
public ActionResult Create(FormCollection formCollection)
{
Order order = new Order();
UpdateModel(order);
order.OrderDetails = new List<OrderDetail>();
UpdateModel(order.OrderDetails);
if (ModelState.IsValid)
{
db.Orders.Add(order);
db.SaveChanges();
return RedirectToAction("Index");
}
ViewBag.CustomerId = new SelectList(db.Customers, "CustomerId", "CompanyName", order.CustomerId);
return View(order);
}
This has worked to a certain extent, in that I now get the following keys in the FormCollection object:
[0] = "CustomerId"
[1] = "OrderDate"
[2] = "ShipName"
[3] = "ShipAddress"
[4] = "ShipCity"
[5] = "ShipRegion"
[6] = "ShipPostalCode"
[7] = "ShipCountry"
[8] = "items.index"
[9] = "items[c2e8e9de-f81a-4b9b-9763-55dda8acd892].ProductId"
[10] = "items[c2e8e9de-f81a-4b9b-9763-55dda8acd892].UnitPrice"
[11] = "items[c2e8e9de-f81a-4b9b-9763-55dda8acd892].Quantity"
[12] = "items[c2e8e9de-f81a-4b9b-9763-55dda8acd892].OrderId"
[13] = "items[dafbddb2-efb0-42b8-ac03-177e29e70f2b].ProductId"
[14] = "items[dafbddb2-efb0-42b8-ac03-177e29e70f2b].UnitPrice"
[15] = "items[dafbddb2-efb0-42b8-ac03-177e29e70f2b].Quantity"
[16] = "items[dafbddb2-efb0-42b8-ac03-177e29e70f2b].OrderId"
I got the idea from this site http://goneale.com/2009/07/27/updating-multiple-child-objects-and-or-collections-in-asp-net-mvc-views/ but I still do not know how to get the child values into the OrderDetails property of the order object.
Again, any comments would be greatly appreciated, as I’m not even sure that I’m asking this question in the right way.
Edit: I have received an answer from another forum, so I thought that I’d add it to this post. My error was that I’d entered “items” to BeginCollectionItem, when I should have entered “OrderDetails”. The code for the partial view is now as follows:
@model NorthwindLight.Models.OrderDetail
@using NorthwindLight.Models
@using NorthwindLight.HtmlHelpers
@{
Layout = null;
var context = new NorthwindContext();
}
<tr>
@using (Html.BeginCollectionItem("OrderDetails"))
{
@:<td>
@Html.DropDownListFor(m => Model.ProductId, new SelectList(context.Products, "ProductId", "ProductName"), string.Empty)
@:</td>
@:<td>
@Html.EditorFor(m => Model.UnitPrice)
@:</td>
@:<td>
@Html.EditorFor(m => Model.Quantity)
@:</td>
@:<td>
<a href="#" class="deleteRow">Delete</a>
@:</td>
@:<td>@Html.HiddenFor(m => m.OrderId);
}
</td>
</tr>
It’s obvious now that I’ve seen it, but I couldn’t see the wood for the trees. Many thanks to all those that looked at the code.
I received an answer from another fourm and I thought that I’d post it here. The problem was in the string ‘items’ in the code below:
This meant that the OrderDetails rows in the HTML were beginning with items.
This stopped the ModelBinder from detecting that they were children of the Order object. When the code was changed to this:
The HTML generated was as follows:
The code now works fine and the child objects are bound by the ModelBinder