Question

I am following Steven Sanderson’s blog post here to create an editable and variable length list of items. In his post he uses divs to display a new item in the list but I am using a table. Thus, my partial view for each item is rendering a tr tag with the various fields to edit. Right now my partial view looks something like this:

<tr>                
       @using (Html.BeginCollectionItem("LineItems"))
       {             
            <td>        
                @Html.TextBoxFor(m => m.Description)
                @Html.ValidationMessageFor(m => m.Description)                              
            </td>
            <td>
                @Html.TextBoxFor(m => m.Quantity)        
                @Html.ValidationMessageFor(m => m.Quantity)
            </td>
            <td>
                @Html.TextBoxFor(m => m.Amount)          
                @Html.ValidationMessageFor(m => m.Amount)       
            </td>
       }       
</tr>

This actually renders correctly on all browsers I have tested but the problem is that this really generates invalid HTML as it places a hidden input tag right after the opening tr tag.

<tr>
   <input type="hidden" name="LineItems.index" .... />
   <td>
      ...
   </td>
   ...
</tr>

There is a comment by another user on the linked post that says you can move the using statement into the first tag and it works but I haven’t been able to get this to work using ASP.NET MVC 3 and the Razor view engine.

Does anyone have any idea how to use the logic presented by Steven Sanderson but get the hidden index input field inside the first td so as not to generate invalid HTML?

Thanks

Answer 1

After a bit of experimenting I came up with:

<tr>                
   <td>        
   @using (Html.BeginCollectionItem("LineItems"))
   {             
            @Html.TextBoxFor(m => m.Description)
            @Html.ValidationMessageFor(m => m.Description)                              
        @:</td>
        @:<td>
            @Html.TextBoxFor(m => m.Quantity)        
            @Html.ValidationMessageFor(m => m.Quantity)
        @:</td>
        @:<td>
            @Html.TextBoxFor(m => m.Amount)          
            @Html.ValidationMessageFor(m => m.Amount)       
   }       
   </td>
</tr>

that did the trick for me.