Chapter 25: Razor VB Loops
Razor – VB Loops and Arrays — that is, how you work with repeating content and collections (arrays, lists, etc.) when you are writing Razor pages in VB.NET (.vbhtml files).
This is the VB.NET version of the C# loops & arrays lesson we did earlier. The concepts are exactly the same:
- you have a collection of items
- you want to repeat some HTML for each item
- sometimes you need position/index, alternating styles, empty checks, etc.
But the syntax is very different — and that’s where most people get stuck when they switch between C# and VB examples.
I will explain it slowly, step-by-step, like we are building a real page together — and I will show many complete examples so you can see exactly how it looks and feels in VB Razor.
1. The Two Main Loop Constructs in VB Razor
A. @For Each … Next
→ This is the most common loop — used whenever you want to go through every item in a collection.
B. @For … Next (with counter)
→ Used when you need the position / index or want to control the step/count.
Both are placed inside HTML and repeat the HTML block they contain.
2. Basic @For Each Example – Simple List
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
@Code Dim foods As New List(Of String) From { "Hyderabadi Biryani", "Haleem", "Pathar ka Gosht", "Irani Chai", "Osmania Biscuit", "Double Ka Meetha" } End Code <h2>Popular Foods in Hyderabad</h2> <ul class="food-list"> @For Each food In foods @<li>@food</li> Next </ul> |
Rendered HTML:
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<ul class="food-list"> <li>Hyderabadi Biryani</li> <li>Haleem</li> <li>Pathar ka Gosht</li> <li>Irani Chai</li> <li>Osmania Biscuit</li> <li>Double Ka Meetha</li> </ul> |
Important VB Razor loop rules:
- @For Each item In collection
- The repeated HTML starts right after the @For Each line
- Use @<tag>…</tag> or just plain HTML
- End with Next (no curly braces!)
3. @For Each with Conditions and Formatting
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
@Code Dim products As New List(Of Object) From { New With {.Name = "Dum Biryani", .Price = 399, .InStock = True}, New With {.Name = "Mutton Haleem", .Price = 450, .InStock = True}, New With {.Name = "Pathar ka Gosht", .Price = 520, .InStock = False}, New With {.Name = "Qubani ka Meetha", .Price = 180, .InStock = True} } End Code <div class="products"> @For Each p In products Dim stockClass As String = If(p.InStock, "in-stock", "out-of-stock") Dim stockText As String = If(p.InStock, "In Stock", "Out of Stock") @<div class="product-card @stockClass"> <h3>@p.Name</h3> <p class="price">₹@p.Price.ToString("N2")</p> <p class="stock">@stockText</p> @If p.InStock Then @<button class="btn-add">Add to Cart</button> Else @<button class="btn-notify" disabled>Notify Me</button> End If </div> Next </div> |
Key VB points here:
- If … Then … Else … End If (multi-line)
- If(condition, trueValue, falseValue) (inline / ternary)
- No parentheses needed around conditions in single-line If
- @<tag> is often used when starting HTML right after @If or @For Each
4. @For … Next – When You Need Index / Position
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
@Code Dim foods As New List(Of String) From { "Biryani", "Haleem", "Kebab", "Qubani ka Meetha", "Irani Chai" } End Code <ol class="ranking"> @For i As Integer = 0 To foods.Count - 1 Dim rank As Integer = i + 1 Dim isTop As Boolean = rank <= 2 @<li class="@(If(isTop, "top-pick", ""))"> Rank #@rank — @foods(i) @If isTop Then @<span style="color:gold;">★ Top Pick</span> End If </li> Next </ol> |
Important notes:
- For i As Integer = 0 To foods.Count – 1
- Use foods(i) to access by index (parentheses in VB)
- To is inclusive — so To 4 means 0,1,2,3,4
5. Checking for Empty Collections (Very Important Pattern)
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
@Code Dim items As New List(Of String) ' maybe from DB – could be empty ' items = GetItemsFromDatabase() ← real case End Code @If items.Any() Then <ul> @For Each item In items @<li>@item</li> Next </ul> Else @<div class="alert alert-info"> No items found. </div> End If <!-- Shorter version --> @If items.Count > 0 Then <!-- show list --> Else <!-- show empty message --> End If |
6. Full Realistic Example – Menu with Active Item Highlight
HTML
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@Code Dim menuItems As New List(Of Object) From { New With {.Path = "/", .Title = "Home", .Icon = "🏠"}, New With {.Path = "/Menu", .Title = "Menu", .Icon = "🍛"}, New With {.Path = "/About", .Title = "About", .Icon = "ℹ️"}, New With {.Path = "/Contact",.Title = "Contact", .Icon = "✉️"} } Dim currentPath As String = Request.Path End Code <nav class="navbar"> @For Each item In menuItems Dim isActive As Boolean = currentPath = item.Path OrElse _ currentPath.StartsWith(item.Path & "/") @<a href="@item.Path" class="nav-link @(If(isActive, "active", ""))"> @item.Icon @item.Title </a> Next </nav> |
7. VB Razor Loops & Arrays – Quick Reference Table
| Task | VB Razor Syntax | C# Razor equivalent (for comparison) |
|---|---|---|
| Loop over collection | @For Each x In list … Next | @foreach (var x In list) { … } |
| Loop with index | @For i = 0 To list.Count – 1 … Next | @for (int i = 0; i < list.Count; i++) { … } |
| Access by index | list(i) | list[i] |
| Inline if | If(condition, true, false) | condition ? true : false |
| Multi-line if | If … Then … Else … End If | if (…) { … } else { … } |
| Empty check | If items.Any() Then or If items.Count > 0 Then | if (items.Any()) |
| Create list | New List(Of String) From { … } | new List<string> { … } |
8. Teacher Closing Thoughts
ASP.NET Razor – VB Loops and Arrays means:
- Use @For Each item In collection … Next for simple iteration (most common)
- Use @For i = start To end … Next when you need index or position
- Repeat HTML inside the loop — same as C#
- VB uses If … Then … End If, For Each … Next, list(i), & for strings
- Always check for empty collections (items.Any() or items.Count > 0)
- All the same patterns you learned in C# (alternating rows, first/last, no-items message) work exactly the same — only syntax changes
You now understand both C# and VB Razor looping styles — very useful for reading old code or W3Schools examples.
Next questions?
- Want to see pagination with VB loops?
- Or nested loops (categories → products)?
- Or convert a full product grid from C# to VB?
- Or move forward to modern Razor Pages (which is almost always C#)?
Just tell me — you’re doing excellent work! Keep going strong from Hyderabad! 🚀🇮🇳 😊
