For loop in ASP.NET MVC Razor

By Mar 06, 2016

Description:

We explain how to use For loop in ASP.NET MVC Razor engine with multiple examples. For loop can be used in a C# block or preceded by a @ in the HTML code.

Preferencesoft

In this article, we will give some examples of usage of the for loop in MVC Razor. Classically, the statement for is used to repeat a block of instructions. In a .cshtml page, a for loop can be used to generate HTML code, forming lists, tables, grids etc.

For loop

When you want to use a for loop in a HTML block of a .cshtml page, you must put an "at" symbol (@) before it as follows:

<p>
@for (int i = 1; i <= 200; i++)
    { 
        //instructions executed 200 times
    }
</p>

Note the existence of the function member Raw of the Html class that allows you to insert code into the page.

<p>
@for (int i = 1; i <= 200; i++)
    { 
        Html.Raw("+++++++++++");
    }
</p>

You can also replace Html.Raw("+++++++++++"); " by @:+++

If you want to nest for loops, you should not put symbol @ before the keyword “for” of the inner loop.

<p>
@for (int i = 1; i < 5; i++)
    { 
       for (int j = 1; j < 5; j++)
       { 
          @j
       }
    }
</p>

Text

Suppose that you need to display a list of the whole first 200 multiples of 7 from 7 and separated by a comma. The last multiple of 7 must be completed by a point. For this you can use the for loop statement in Razor.

<p>
@for (int i = 1; i < 200; i++)
    {
        var j = i * 7;
        @j@:,
    }
    @{ var k = 7 * 200; }
    @k@:.
</p>

The result:

7, 14, 21, 28, 35, 42, 49, 56, 63, 70, 77, 84, 91, 98, 105, 112, 119, 126, 133, 140, 147, 154, 161, 168, 175, 182, 189, 196, 203, 210, 217, 224, 231, 238, 245, 252, 259, 266, 273, 280, 287, 294, 301, 308, 315, 322, 329, 336, 343, 350, 357, 364, 371, 378, 385, 392, 399, 406, 413, 420, 427, 434, 441, 448, 455, 462, 469, 476, 483, 490, 497, 504, 511, 518, 525, 532, 539, 546, 553, 560, 567, 574, 581, 588, 595, 602, 609, 616, 623, 630, 637, 644, 651, 658, 665, 672, 679, 686, 693, 700, 707, 714, 721, 728, 735, 742, 749, 756, 763, 770, 777, 784, 791, 798, 805, 812, 819, 826, 833, 840, 847, 854, 861, 868, 875, 882, 889, 896, 903, 910, 917, 924, 931, 938, 945, 952, 959, 966, 973, 980, 987, 994, 1001, 1008, 1015, 1022, 1029, 1036, 1043, 1050, 1057, 1064, 1071, 1078, 1085, 1092, 1099, 1106, 1113, 1120, 1127, 1134, 1141, 1148, 1155, 1162, 1169, 1176, 1183, 1190, 1197, 1204, 1211, 1218, 1225, 1232, 1239, 1246, 1253, 1260, 1267, 1274, 1281, 1288, 1295, 1302, 1309, 1316, 1323, 1330, 1337, 1344, 1351, 1358, 1365, 1372, 1379, 1386, 1393, 1400.

Display now all positive prime numbers up to 1000. As it has no function of primality test, define a helper which returns the list of all first integers less or equal than an integer n.

@helper PrimeList(int n)
{
    @:<p style="color:crimson">2
    for (int k = 3; k <= n; k++)
    {
       if (k % 2 != 0)
       {
            bool isprime = true;
            for (int j = 3; j * j <= k; j += 2)
            {
                if (k % j == 0)
                {
                    isprime = false;
                }
            }
            if (isprime)
            {
               @: , @k
            }
        }
    }
    @:</p>
}
<p>@PrimeList(1000)</p>

The result:

2 , 3 , 5 , 7 , 11 , 13 , 17 , 19 , 23 , 29 , 31 , 37 , 41 , 43 , 47 , 53 , 59 , 61 , 67 , 71 , 73 , 79 , 83 , 89 , 97 , 101 , 103 , 107 , 109 , 113 , 127 , 131 , 137 , 139 , 149 , 151 , 157 , 163 , 167 , 173 , 179 , 181 , 191 , 193 , 197 , 199 , 211 , 223 , 227 , 229 , 233 , 239 , 241 , 251 , 257 , 263 , 269 , 271 , 277 , 281 , 283 , 293 , 307 , 311 , 313 , 317 , 331 , 337 , 347 , 349 , 353 , 359 , 367 , 373 , 379 , 383 , 389 , 397 , 401 , 409 , 419 , 421 , 431 , 433 , 439 , 443 , 449 , 457 , 461 , 463 , 467 , 479 , 487 , 491 , 499 , 503 , 509 , 521 , 523 , 541 , 547 , 557 , 563 , 569 , 571 , 577 , 587 , 593 , 599 , 601 , 607 , 613 , 617 , 619 , 631 , 641 , 643 , 647 , 653 , 659 , 661 , 673 , 677 , 683 , 691 , 701 , 709 , 719 , 727 , 733 , 739 , 743 , 751 , 757 , 761 , 769 , 773 , 787 , 797 , 809 , 811 , 821 , 823 , 827 , 829 , 839 , 853 , 857 , 859 , 863 , 877 , 881 , 883 , 887 , 907 , 911 , 919 , 929 , 937 , 941 , 947 , 953 , 967 , 971 , 977 , 983 , 991 , 997

 

Lists

Suppose you have a list of poker players and you want to display this list sorted alphabetically, as well as the list of these players ranked in terms of their gain at the poker.

If the list is very long, so a bit of programming will save you sorting by hand.

@{ 
    string[] players = new string[] { "Joe", "Jennie", "Catie", "Steven", "Donald", "Douglas" };
    int[] gains = new int[] { 0, 5, 1000, 500, 20, 0 };
    int n = players.Length;
    string[] play = (string[])players.Clone();
    Array.Sort(play);
}
<ol style="list-style-type: lower-roman;">
    @for (int i = 0; i < n; i++)
    {
        <li>@play[i]</li>
    }
</ol>

The result:

  1. Catie
  2. Donald
  3. Douglas
  4. Jennie
  5. Joe
  6. Steven

@{ 
        Array.Sort(gains, players);
 }
    @for (int i = n-1; i >= 0; i--)
    {
        <li>@players[i] (gain @gains[i])</li>
    }

The result:

  1. Catie (gain 1000)
  2. Steven (gain 500)
  3. Donald (gain 20)
  4. Jennie (gain 5)
  5. Douglas (gain 0)
  6. Joe (gain 0)

 

Tables

To create tables, you can obviously use the HTML. But if you later want to add a row or column or change the style, it can be tedious.

The idea is to separate the contents of the table. Give examples:

@{
    var headers = new string[] { "Product", "in-stock products", "Price" };
    var rows = new string[,] {
         { "Toothpaste", "20", "2$" },
         { "tagliatelle", "50", "3.5$" },
         { "Camembert cheese", "100", "10$" },
         { "Pepsi-Cola", "150", "2$" }
    };
}
<table style="border:medium">
    <tr>
        @for (int i = 0; i < 3; i++)
        {
            <th style="border: 2px solid black; text-align: center; width: 12%">@headers[i]</th>
        }
    </tr>
@for (int i = 0; i < 4; i++)
{
    @:<tr>
        for (int j = 0; j < 3; j++)
        {
        <td style="border: 2px solid black; text-align: center; word-wrap: break-word;">@rows[i, j]</td>
        }
    @:</tr>
    }
}
</table>

The result:

Product

in-stock products

Price

Toothpaste

20

2$

tagliatelle

50

3.5$

Camembert cheese

100

10$

Pepsi-Cola

150

2$

 

<table style="border:medium">
    <tr>
        @for (int i = 0; i < 3; i++)
            {
            <th style="border: 2px solid red; text-align: center; width: 12%;color:blue">@headers[i]</th>
        }
    </tr>
    @for (int i = 0; i < 4; i++)
    {
        @:<tr>
        for (int j = 0; j < 3; j++)
        {
            <td style="border: 2px solid red; text-align: center; word-wrap: break-word;background-color:navajowhite">@rows[i, j]</td>
        }
        @:</tr>
    }
</table>

The result:

Product

in-stock products

Price

Toothpaste

20

2$

tagliatelle

50

3.5$

Camembert cheese

100

10$

Pepsi-Cola

150

2$


ASP.NET

Categories

Share

Follow


KodFor Privacy Policy