Hieararchical data in MVC

Question

In webforms I used a repeater inside a repeater(Hieararchical model). How can I achieve the same in MVC?

Example:

Data1           Data2
 subdata1        subddata3
 subdata2        subdata4

Data3            data4
 subdata5         subdata7
 subdata6         subdata8 

I also require a two column layout as shown above. Any ideas ??

Answer 1

I can't remember where I read this, but it applies to you:

-- But won't we nead at least a repeater control in MVC?
-- We have a repeater control. It's called a for each loop

Let's say your view model has a property called Data of type IEnumerable<SuperDuper>. To iterate over it, you'd just do

<% foreach (var sd in Model.Data) { %>
<!-- write out fancy stuff -->
<% } <%>

To iterate over subdata, let's say that SuperDuper has a property named SubData that's also an IEnumerable<Something>. Nothing stops you from doing

<% foreach (var sd in Model.Data) { %>
<!-- write out some fancy stuff -->
    <% foreach (var sub in sd.SubData) { %>
    <!-- write out some more fancy stuff -->
    <% } 
 } %>

For the two-column layout, resort to CSS.

---

And since Razor is on it's way, I can't resist to show you what those examples would look like with the new engine:

@foreach (var sd in Model.Data) {
<!-- write out fancy stuff -->
}


@foreach (var sd in Model.Data) {
<!-- write out some fancy stuff -->
    @foreach (var sub in sd.SubData) {
    <!-- write out some more fancy stuff -->
    } 
}

Answer 2

And with spark view engine you do this:

<div each="var item in Model.Data">
   ${item.Title}
   <div each="var subItem in item.SubData" style="padding-left: 20px">
       ${subItem.Title}
       <!-- Do some fancy stuff -->
   </div>
</div>

Razor? Yuck! ;)