Question

I have the following code:

@foreach (Content topic in Model.Topics)
{
    if (topic.RowKey.Substring(2, 2) == "00")
    {
        <h3>@topic.RowKey.Substring(0, 2).TrimStart('0') - @Html.Raw(topic.Title)</h3>
    }
    else
    {
        <p>@String.Format("{0}.{1}",topic.RowKey.Substring(0, 2).TrimStart('0'),topic.RowKey.Substring(2, 2).TrimStart('0').PadLeft(1, '0')) - @Html.Raw(topic.Title)</p>
    }
}

My input data (value of topic.RowKey) looks like this:

0100 <- This is topic 1
0101 <- This is topic 1.1
0102 <- This is topic 1.2
0103 <- This is topic 1.3
0200 <- This is topic 2
0201 <- This is topic 2.1
etc....

This works but what I would really like to do is to have an h3 heading every time the first two digits of the RowKey change and then between then and then next h3 heading I would like to have an unordered list instead of just <p>xxx</p>. I have tried lots of different combinations of things but nothing works. Is this even possible to do with Razor? Where I had huge problems was how can I get the <ul> and </ul>s to appear correctly? I know I can put a <ul> after the <h3> but how can I place the </ul>?

Answer 1

not checked in razor, there may be an @ missing here or there, but…

@var groupedTopics = Model.Topics.GroupBy(t => t.RowKey.Substring(0, 2));

@foreach (var group in groupedTopics) {
  var firstTopic = group.First();
  <h3>@firstTopic.RowKey.Substring(0, 2).TrimStart('0') - @Html.row(firstTopic.Title)</h3>
  <ul>
  @foreach (var topic in group.Skip(1)) {
      <li>@String.Format("{0}.{1}",topic.RowKey.Substring(0, 2).TrimStart('0'),topic.RowKey.Substring(2, 2).TrimStart('0').PadLeft(1, '0')) - @Html.Raw(topic.Title)</li>
  }
  </ul>

}