Editing a Variable Length List, ASP.NET MVC 3 Style with Table

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

Did you have to modify the HtmlPrefixScopeExtensions from Steven Sanderson's blog to get it to work? If so would you mind sharing the changes you made? I'm trying to do the same thing in MVC3 with razor and the object collection returns null. Thanks — NullReference
– NullReference, Commented Sep 15, 2011 at 18:26
No we didn't have to make any changes to that. The only change was to the syntax mentioned below in the accepted answer. If you want, you can start a new question and I can take a look at your code compared to what we did and I can see if there are any differences. — Nick Olsen
– Nick Olsen, Commented Sep 16, 2011 at 4:17

Major Byte · Accepted Answer · 2011-08-24 18:41:28Z

4

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.

answered Aug 24, 2011 at 18:41

Major Byte

4,1013 gold badges28 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nick Olsen Over a year ago

Somewhat strange looking but it definitely does the trick! Thanks!

Major Byte Over a year ago

I absolutely agree that it looks strange, it brought back some horrible Web Forms memories. The @: is a shorthand for mixing plain text and code [link]haacked.com/archive/2011/01/06/…

Collectives™ on Stack Overflow

Editing a Variable Length List, ASP.NET MVC 3 Style with Table

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related