We will display text and a list of names supplied by C#. We will use a condition to handle an empty list and a loop to create one row for each name.
Previous lesson: 11 — Understand Razor Pages and the shared layout · Next lesson: 13 — From an HTML card to an Animal object (Hebrew)
On a touchscreen, swipe right for the next lesson and left for the previous lesson.
What we will learn
- Display a value through
Model. - Combine
ifandforeachin Razor. - Distinguish between data in memory and saved data.
Start in sync
Open the correct project folder. Make sure your work from the previous session is saved both in the files and in a Commit, and that there are no pending changes in Source Control or Git Changes. Now Pull. If Git reports a conflict, ask the teacher; do not delete work or Force Push.
RazorTaba is an example name in this lesson too. Use your own project folder, and replace this prefix in namespace and the name after @model with the prefix before .Pages in your existing Pages/Index.cshtml.cs. Do not create a new project or an extra RazorTaba folder.
Connect knowledge we already have
OnGet runs when the browser requests the page. It prepares Greeting and a list of names. List<string> is a collection of strings, and foreach goes through the strings one by one. Follow one name: find it in the C# list and in the row generated on the page.
This example uses no database. Every GET request runs OnGet again and recreates the list from the names written in the code; it does not save changes made by a visitor.
Code changes
RazorTaba/Pages/Discover.cshtml
New file. Create RazorTaba/Pages/Discover.cshtml and paste in the following content:
@page
@model RazorTaba.Pages.DiscoverModel
@{
ViewData["Title"] = "מגלים";
}
<h1>@Model.Greeting</h1>
@if (Model.Names.Count == 0)
{
<p>עדיין אין חיות ברשימה.</p>
}
else
{
<ul class="list-group">
@foreach (string name in Model.Names)
{
<li class="list-group-item">@name</li>
}
</ul>
}
RazorTaba/Pages/Discover.cshtml.cs
New file. Create RazorTaba/Pages/Discover.cshtml.cs and paste in the following content:
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace RazorTaba.Pages;
/// <summary>דוגמה ראשונה להעברת נתונים מ־C# לדף; אין כאן מסד נתונים.</summary>
public class DiscoverModel : PageModel
{
public string Greeting { get; private set; } = "";
public List<string> Names { get; private set; } = new();
/// <summary>מכין נתונים לכל בקשת GET.</summary>
public void OnGet()
{
Greeting = "יש לנו חברים חדשים להכיר";
Names = new List<string> { "נורי", "תום", "לונה" };
}
}
RazorTaba/Pages/Shared/_Layout.cshtml
Make the following change in the existing file. The + and - signs show changes and are not part of the code:
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Guide">מדריך</a>
</li>
+ <li class="nav-item">
+ <a class="nav-link text-dark" asp-area="" asp-page="/Discover">מגלים</a>
+ </li>
</ul>
</div>
</div>
Run and check
- The three names appear at
/Discover. - Add a name to the list: another row appears without copying
li. - Temporarily empty the list and see the empty-state message. Restore the data.
Personal task and understanding check
Add a name and explain how many times the loop body runs. Explain why changing this list is not a form for saving information.
After a meaningful change: inspect the diff, Stage, write a commit message describing your change, Commit and Push. Check in GitHub that the change arrived. At least 50 meaningful commits are required throughout the year, even if you always work on the same laptop.
AI can help you understand an error message and troubleshoot a problem. You are responsible for writing, testing and explaining the code; do not run an agent to write the project for you.