נציג בדף טקסט ורשימת שמות שמגיעים מ־C#. נשתמש בתנאי כדי לטפל ברשימה ריקה ובלולאה כדי ליצור שורה לכל שם.
הפרק הקודם: 11 — מבינים את Razor Pages ואת התבנית המשותפת · הפרק הבא: 13 — מכרטיס HTML לאובייקט Animal
במסך מגע אפשר להחליק ימינה לפרק הבא ושמאלה לפרק הקודם.
מה נלמד
- להציג ערך דרך Model.
- לשלב if ו־foreach ב־Razor.
- להבחין בין נתונים בזיכרון לבין נתונים שנשמרו.
מתחילים מסונכרנים
פתחו את תיקיית הפרויקט הנכונה, בדקו שאין שינוי לא שמור והפעילו Pull. אם Git מציג התנגשות, פנו למורה; אל תמחקו עבודה ואל תבצעו Force Push.
מחברים ידע שכבר יש לנו
OnGet רצה כשהדפדפן מבקש את הדף. היא מכינה Greeting ורשימת שמות. List<string> היא אוסף של מחרוזות, ו־foreach עוברת על המחרוזות בזו אחר זו. עקבו אחר שם אחד: מצאו אותו ברשימה ב־C# ובשורה שנוצרה בדף.
השינויים בקוד
RazorTaba/Pages/Discover.cshtml
קובץ חדש. צרו את RazorTaba/Pages/Discover.cshtml והדביקו את התוכן הבא:
@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
קובץ חדש. צרו את RazorTaba/Pages/Discover.cshtml.cs והדביקו את התוכן הבא:
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
בקובץ הקיים בצעו את השינוי הבא. סימני + ו־- מציינים שינוי ואינם חלק מהקוד:
<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>
מריצים ובודקים
- ב־/Discover מופיעים שלושת השמות.
- הוסיפו שם ברשימה: מופיעה שורה נוספת בלי להעתיק li.
- רוקנו זמנית את הרשימה וראו את הודעת המצב הריק. החזירו את הנתונים.
משימה אישית ובדיקת הבנה
הוסיפו שם והסבירו כמה פעמים גוף הלולאה פועל. הסבירו מדוע שינוי ברשימה זו אינו טופס לשמירת מידע.
בסיום שינוי משמעותי: בדקו את ה־diff, בצעו Stage, כתבו הודעת commit שמתארת מה שיניתם, ובצעו Push. ודאו ב־GitHub שהשינוי הגיע. נדרשים לפחות 50 commits משמעותיים לאורך השנה, גם למי שעובד תמיד באותו מחשב נייד.
AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.