MVC BeginCollectionItem Hidden index

Question

I am using BeginCollectionItem HTMLHelper. It works as a charm but it messes up the layout I'm using. BeginCollectionItem renders a <ul> and <li> to hide it's hidden fields (which contains the unique indexes). So each 'row' you have in your collection will generate a <li>.

When you populate your table with BeginCollectionItem it generates the following above the <table>.

<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

The question: I don't want those <li> and <ul> to be visible as the content of those are 'hidden fields' anyway. How can I achieve this?

Thanks for the help,

You could hide the `ul` (or `li`) elements with some CSS: `div#gridDiv ul { display: none; }` — DavidG, Sep 23 '14 at 12:02
That's one solution, but not a very clean one. I was hoping to not generate the elements at all. But thanks for the suggestion, didn't come up with that one yet. — gerb0n, Sep 23 '14 at 12:07
I've not used that NuGet package, but is there a file called `Collection.cshtml` in the `Views/Shared/EditorTemplates` folder in your project? — DavidG, Sep 23 '14 at 12:13
Yes there is. And yes, the `li` and `ul` elements are located there. I removed them and now it works as a charm. Thanks alot DavidG! — gerb0n, Sep 23 '14 at 12:30

score 2 · Accepted Answer · answered Sep 23 '14 at 12:32

You simply need to edit the template file which is called Collection.cshtml and resides in the Views/Shared/EditorTemplates folder in your project.

By default it looks like this:

@using HtmlHelpers.BeginCollectionItem

<ul>                                 
    @foreach (object item in Model)
    {
        <li>
            @using (Html.BeginCollectionItem(Html.ViewData.TemplateInfo.HtmlFieldPrefix))
            {
                @Html.EditorFor(_ => item, null, "")
            }
        </li>
    }
</ul>

So just edit it to suit your needs (perhaps simply removing the ul and li tags.

MVC BeginCollectionItem Hidden index

1 Answers1