🔁 Razor C# – Loops – Iterate Through Data in Razor Views

🧲 Introduction – Why Use Loops in Razor?

Loops in Razor syntax allow you to repeat HTML output based on C# data structures like arrays, lists, or object collections. Whether you’re displaying a list of users, products, or table rows, Razor loops help you generate dynamic, structured content easily inside .cshtml files.

🎯 In this guide, you’ll learn:

• How to use for, foreach, and while loops in Razor
• Real-world examples of list rendering
• Looping with conditions and counters
• Best practices for loop-based UI rendering in ASP.NET

---

🔁 Razor for Loop Example

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

🧪 Output:

Item number 1  
Item number 2  
Item number 3  
Item number 4  
Item number 5

---

🔄 Razor foreach Loop – Ideal for Collections

@{
    var fruits = new[] { "Apple", "Banana", "Cherry" };
}

<ul>
@foreach (var fruit in fruits)
{
    <li>@fruit</li>
}
</ul>

🧪 Output:

• Apple
• Banana
• Cherry

---

🔂 Razor while Loop

@{
    int count = 1;
    while (count <= 3)
    {
        <p>Loop count: @count</p>
        count++;
    }
}

---

📊 Loop with Index & Conditional Logic

@{
    var colors = new[] { "Red", "Green", "Blue" };
}

<ol>
@for (int i = 0; i < colors.Length; i++)
{
    if (i == 0)
    {
        <li><strong>@colors[i] (First)</strong></li>
    }
    else
    {
        <li>@colors[i]</li>
    }
}
</ol>

🧪 Output:

• Red (First)
• Green
• Blue

---

🧩 Loop Over Model Data

Assume your view is strongly typed:

@model List<string>

✅ Razor Code

<ul>
@foreach (var name in Model)
{
    <li>@name</li>
}
</ul>

✅ Controller Code (ASP.NET MVC)

public IActionResult Index()
{
    var users = new List<string> { "Alice", "Bob", "Charlie" };
    return View(users);
}

---

🧬 Nested Loops Example

@{
    var matrix = new int[,] { {1,2}, {3,4}, {5,6} };
}

@for (int i = 0; i < 3; i++)
{
    <p>
    @for (int j = 0; j < 2; j++)
    {
        @matrix[i, j] 
    }
    </p>
}

🧪 Output:

1 2  
3 4  
5 6

---

📘 Best Practices for Razor Loops

✅ Do:

• Use foreach for clean looping over lists or models
• Format HTML elements inside loops (e.g., <li>, <tr>, <div>)
• Use @index wisely to control output (e.g., alternating row styles)

❌ Avoid:

• Writing heavy business logic inside Razor loops
• Modifying data structures during loop execution
• Using loops without checking for null or empty collections

---

📌 Summary – Recap & Next Steps

Razor loops help render dynamic, repeated content using familiar C# constructs like for, foreach, and while. Whether iterating over arrays or models, Razor ensures clean and readable output.

🔍 Key Takeaways:

• Use for when you need index control
• Use foreach for simple data iteration
• Use loops to generate clean HTML for lists, tables, cards, etc.

⚙️ Real-world Use Cases:

• Display product grids or user lists
• Render table rows dynamically
• Apply CSS classes based on index

---

❓ FAQs – Razor Loops in C#

---

❓ Can I use nested loops in Razor views?
✅ Yes. Razor supports full C# syntax including nested for or foreach loops.

---

❓ Should I use loops in controller or Razor view?
✅ Use Razor for UI rendering loops. Perform business logic and filtering in the controller.

---

❓ How do I alternate row colors in a loop?
✅ Use the loop index:

<tr class="@(i % 2 == 0 ? "even" : "odd")">

---

Share Now :