Break nested loop until next condition is meet

Question

I have the following code I am taking a list and equally dividing it across three columns:

<div>
    @{
        double num = listing.Count() / 3.0;
        double blockSize = Math.Ceiling(num);
        for (int i = 0; i < Math.Ceiling(listing.Count() / blockSize); i++)
        {

            <div class="col-sm-4">
                @for (int j = i * (int)blockSize; j < (i * blockSize) + (int)blockSize && j < listing.Count(); j++)
                {
                    /// How can I only display this header once?
                    foreach(string letter in letters)
                    {
                        if (letter.ToLower() == listing.ElementAt(j).Title.Substring(0,1).ToLower())
                        {    
                            <h5 class="title"><a name="@letter.ToLower()">@letter.ToUpper()</a></h5>
                        }
                    }


                    <p><a href="#">@listing.ElementAt(j).Value</a></p>

                }                                    
            </div>
        }                       
    }
</div>

My question is how can I code the nested foreach loop to only be true once per letter match? Producing an output like:

<div class="row colIndentTop">
    <div class="col-sm-4">
        <h5 class="title"><a name="a">A</a></h5>
        <p><a href="#">Alice</a></p>
        <p><a href="#">Amy</a></p>


        <h5 class="title"><a name="d">D</a></h5>
        <p><a href="#">David</a></p>

        <h5 class="title"><a name="f">F</a></h5>
        <p><a href="#">Frank</a></p>

        <h5 class="title"><a name="i">I</a></h5>
        <p><a href="#">Ibrahim</a></p>
    </div>
    <div class="col-sm-4">
        <h5 class="title"><a name="n">N</a></h5>
        <p><a href="#">Nancy</a></p>

        <h5 class="title"><a name="o">O</a></h5>
        <p><a href="#">Olive</a></p>

        <h5 class="title"><a name="p">P</a></h5>
        <p><a href="#">Paul</a></p>                        
        <p><a href="#">Patrick</a></p>
    </div>
    <div class="col-sm-4">
        <p><a href="#">Patricia</a></p>

        <h5 class="title"><a name="s">S</a></h5>
        <p><a href="#">Sally</a></p>
        <p><a href="#">Sean</a></p>

        <h5 class="title"><a name="t">T</a></h5>
        <p><a href="#">Thomas</a></p>
    </div>
</div>

And not:

<div class="row colIndentTop">
    <div class="col-sm-4">
        <h5 class="title"><a name="a">A</a></h5>
        <p><a href="#">Alice</a></p>
        <h5 class="title"><a name="a">A</a></h5>
        <p><a href="#">Amy</a></p>


        <h5 class="title"><a name="d">D</a></h5>
        <p><a href="#">David</a></p>

        <h5 class="title"><a name="f">F</a></h5>
        <p><a href="#">Frank</a></p>

        <h5 class="title"><a name="i">I</a></h5>
        <p><a href="#">Ibrahim</a></p>
    </div>
    <div class="col-sm-4">
        <h5 class="title"><a name="n">N</a></h5>
        <p><a href="#">Nancy</a></p>

        <h5 class="title"><a name="o">O</a></h5>
        <p><a href="#">Olive</a></p>

        <h5 class="title"><a name="p">P</a></h5>
        <p><a href="#">Paul</a></p>   
        <h5 class="title"><a name="p">P</a></h5>                     
        <p><a href="#">Patrick</a></p>
    </div>
    <div class="col-sm-4">
        <h5 class="title"><a name="p">P</a></h5>
        <p><a href="#">Patricia</a></p>

        <h5 class="title"><a name="s">S</a></h5>
        <p><a href="#">Sally</a></p>
        <h5 class="title"><a name="s">S</a></h5>
        <p><a href="#">Sean</a></p>

        <h5 class="title"><a name="t">T</a></h5>
        <p><a href="#">Thomas</a></p>
    </div>
</div>

Thanks in advance!

Answer 1

Well. There are probably far more elegant solutions to the entire code you have, but as for your specific question, you can add a simple check.

This code will add the letter value to the variable thisLetter and check the next foreach to make sure you letter is new (otherwise letter != thisLetter will fail and it will skip adding the h5)

var thisLetter = '';

foreach(string letter in letters)
{
    if ((letter.ToLower() == listing.ElementAt(j).Title.Substring(0,1).ToLower()) && letter != thisLetter)
    {    
        <h5 class="title"><a name="@letter.ToLower()">@letter.ToUpper()</a></h5>
    }
    thisLetter = letter;
}

You can clean it up a little like the following as well with continue logic, this will not create the h5 and also skip the unnecessary re-assignment of the value to thisLetter. As an explanation, continue will skip to the next iteration of the for loop without executing any of the code after the continue in the loop.

var thisLetter = '';

foreach(string letter in letters)
{
    //Note!: The if logic is 'opposite' in this structure.
    if ((letter.ToLower() != listing.ElementAt(j).Title.Substring(0,1).ToLower()) || letter == thisLetter)
        continue;

    <h5 class="title"><a name="@letter.ToLower()">@letter.ToUpper()</a></h5>
    thisLetter = letter;
}

Answer 2

First of all sort your names (indexNavigation) by alphabet. Then do like this (may not compile, I have no IDE now):

<div>
    @{
        double num = listing.Count() / 3.0;
        double blockSize = Math.Ceiling(num);
        char currentLetter = '.'
        for (int i = 0; i < Math.Ceiling(listing.Count() / blockSize); i++)
        {

            <div class="col-sm-4">
                @for (int j = i * (int)blockSize; j < (i * blockSize) + (int)blockSize && j < listing.Count(); j++)
                {
                    var name = indexNavigation.ElementAt(j).Title;
                    if (currentLetter != name.Title.Substring(0,1).ToLower()[0])
                    {    
                        <h5 class="title"><a name="@letter.ToLower()">@letter.ToUpper()</a></h5>
                        currentLetter = name.Title.Substring(0,1).ToLower()[0];
                    }

                    <p><a href="Faculty_and_Research/Academic_Careers.html">@indexNavigation.ElementAt(j).Title</a></p>    
                }                                    
            </div>
        }                       
    }
</div>