title: Validation of partial view inside an IEnumerable view
body: <p>I have a view that renders a table of editable data. The page has Ajax controls that allow you to add and delete single rows on the table. I accomplish this with a strongly-typed view that has a model that derives from IEnumerable. In the view, it loops through each item in the model and renders it using a partial view that is strongly-typed to that object. In this way, the controller can use the parent view to render the entire list, and the Ajax endpoint can use the partial view to render and return just one table row for jQuery to insert into the table.</p>
  
  <p>When the save button is clicked, jQuery loops through the table, packages up the data and assigns sequential numbers so that when the data is POSTed to the server, the model binding engine recognizes the data as <code>IEnumerable&lt;TimeLogEntry&gt;</code>.</p>
  
  <p>Here's my list view (with unnecessary code stripped out):</p>
  
  <pre><code>@model IEnumerable&lt;TimeTracker.Models.TimeLogEntry&gt;
  
  &lt;table id="time-log"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.FirstOrDefault().StartTime)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.FirstOrDefault().EndTime)
              &lt;/th&gt;
              &lt;th&gt;
                  @Html.DisplayNameFor(model =&gt; model.FirstOrDefault().Description)
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
  
      &lt;tbody&gt;
          foreach (var item in Model.OrderByDescending(entry =&gt; entry.StartTime))
          {
              Html.RenderPartial("~/Views/TimeLog/_EditEntry.cshtml", item);
          }
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>And the partial view that that displays one single <code>TimeLogEntry</code>:</p>
  
  <pre><code>@model TimeTracker.Models.TimeLogEntry
  
  &lt;tr id="@Model.TimeLogEntryId"&gt;
      &lt;td class="no-wrap"&gt;
          @Html.EditorFor(model =&gt; model.StartTime)
          @Html.ValidationMessageFor(model =&gt; model.StartTime)
      &lt;/td&gt;
      &lt;td class="no-wrap"&gt;
          @Html.EditorFor(model =&gt; model.EndTime)
          @Html.ValidationMessageFor(model =&gt; model.EndTime)
      &lt;/td&gt;
      &lt;td&gt;
          @Html.EditorFor(model =&gt; model.Description)
          @Html.ValidationMessageFor(model =&gt; model.Description)
      &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This code doesn't validate properly because the partial view that renders it is separated from the IEnumerable that the item came from, and thus has no idea that it is executing in the context of a foreach loop. Therefore, the elements in each table row will have identical names and IDs, which causes a problem for client-side validation. For example, all of the <code>StartTime</code> textboxes have an ID of <code>StartTime</code>, instead of <code>[0].StartTime</code>, <code>[1].StartTime</code>, etc. The EditorFor method has no way to set the <code>id</code> or <code>data-valmsg-for</code> attributes. How do I make each textbox <code>id</code> attribute unique, and the <code>data-valmsg-for</code> attribute on each validation message match its corresponding textbox ID? Is there another better way that I should be doing this?</p>