Most efficient method to display fibonacci entries based on user input

Question

Based on the user's input, How would I properly write an algorithm that displays every entry of Fibonacci inside of a table that has 5 columns for every row.

In this program, The user will enter a number and that number will represent how many numbers in the Fibonacci series will be displayed into a table. The Fibonacci View model is below:

namespace TestingAndLogging.Models
{
    public class Fibonacci
    {
        public int Input { get; set; }
        public List<string> Output { get; set; } = new List<string>();
    }
}

I want the table to be 5 columns wide. If the user enters 11, then the first two rows will contain the first ten numbers, and the last row will contain only one number. Right now, for display purposes, I'm only using one row and displaying all numbers on that one row since every time I tried implementing an algorithm to display numbers, any user input that was not divisible by five would not run through the algorithm properly.

<div class="row mt-5">
        <div class="offset-1 col-10">
            <table class="table table-striped justifiy-content-center" style="background-color: #ADE1FA;">
                <thead>
                    <tr><th colspan="5">Fibonacci Series Results</th></tr>
                </thead>
                <tBody>                    

                    <tr>
                        @for (int i = 0; i < Model.Output.Count; i++)
                        {
                            <td>@Model.Output[i]</td>
                        }
                    </tr>
                                        
                </tBody>
            </table>
        </div>
    </div>

Below is how the numbers are being calculated:

        public List<string> CalculateFibonacci(Fibonacci model)
        {               
            List<string> returnList = new List<string>();
            int num1 = 0;
            int num2 = 1;
            int num3;

            //Put the first two numbers of the fib series into the array
            returnList.Add($"{num1}");
            returnList.Add($"{num2}");
                      
            if (model.Input == 1)
            {
                returnList.RemoveAt(1);
            }

            //Get the subsequent numbers after the first two numbers in the series and put 
            //them into a List of ints 
            else if (model.Input > 2)
            {
                for (int i = 2; i < model.Input; i++)
                {
                    num3 = num1 + num2;

                    num1 = num2;
                    num2 = num3;

                    returnList.Add($"{num3}");
                }

            }          

                            return returnList;
        }

https://tdddemo.herokuapp.com/

Answer 1

Since you want multiple rows with multiple cells each, you will need some sort of nested loop arrangement. Each iteration of the outer loop adds a new row and the inner loop is reponsible for adding the cells in that row.

Note the condition of the inner loop must both check that col is smaller than 5 and that the calculated index row * 5 + col is smaller than the number of elements in total.

<tbody>
    @for (int row = 0; row * 5 < Model.Output.Count; row++)
    {
        <tr>
            @for (int col = 0; col < 5 && row * 5 + col < Model.Output.Count; col++)
            {
                <td>@Model.Output[row * 5 + col]</td>
            }
        </tr>
    }
</tbody>

You might also want to replace all those 5s by a constant, so later on you just need to adjust one value to change the number of columns.