מחברים דפים ובונים טופס

נוסיף דף לאתר ונקשר אליו מהתפריט. נבנה בו טופס עם שדות ותוויות, ונבדוק איך משתמשים בו.

אם קישור הקוד אינו נפתח, בקשו גישה למאגר.

מה נלמד

לקשר בין דפי האתר.
לקשר label לשדה באמצעות for ו־id.
להבדיל בין טופס מעוצב לבין שמירת נתונים.

מתחילים מסונכרנים

פתחו את תיקיית הפרויקט הנכונה, בדקו שאין שינוי לא שמור והפעילו Pull. אם Git מציג התנגשות, פנו למורה; אל תמחקו עבודה ואל תבצעו Force Push.

דף נוסף, אותו אתר

צרו Pages/Contact.cshtml. השורה @page מאפשרת להגיע לדף בכתובת /Contact. את התפריט עורכים פעם אחת ב־Layout. כרגע מתייחסים ל־asp-page ככתובת לדף בפרויקט; בהמשך נסביר כיצד Razor יוצר href. הכפתור type="button" אינו שולח את הטופס. לחצו עליו ובדקו שהדף נשאר במקומו.

השינויים בקוד

`RazorTaba/Pages/Contact.cshtml`

קובץ חדש. צרו את RazorTaba/Pages/Contact.cshtml והדביקו את התוכן הבא:

@page
@{
    ViewData["Title"] = "נשארים בקשר";
}
<h1>נשארים בקשר</h1>
<p class="alert alert-info">זהו תרגול של טופס HTML. הפרטים עדיין אינם נשלחים או נשמרים.</p>
<form class="card p-4 col-lg-7">
    <label for="visitor" class="form-label">השם שלכם</label>
    <input id="visitor" class="form-control mb-3" required maxlength="50" />
    <label for="topic" class="form-label">על מה תרצו לקרוא?</label>
    <textarea id="topic" class="form-control mb-3" rows="4"></textarea>
    <button type="button" class="btn btn-primary">כפתור לדוגמה — עדיין לא שולח</button>
</form>

`RazorTaba/Pages/Shared/_Layout.cshtml`

בקובץ הקיים בצעו את השינוי הבא. סימני + ו־- מציינים שינוי ואינם חלק מהקוד:

--- a/RazorTaba/Pages/Shared/_Layout.cshtml
+++ b/RazorTaba/Pages/Shared/_Layout.cshtml
@@ -11,8 +11,9 @@
     <header class="site-header">
         <nav class="container py-3 d-flex gap-3 align-items-center flex-wrap" aria-label="ניווט ראשי">
             <a class="brand" asp-page="/Index">🐾 החיות שלי</a>
             <a asp-page="/Index">בית</a>
+            <a asp-page="/Contact">קשר</a>
         </nav>
     </header>
     <main class="container py-4">
         @RenderBody()

מריצים ובודקים

קישור קשר מוביל לדף החדש.
לחיצה על תווית השם מעבירה את המיקוד לשדה.
אין שליחת מידע כשלוחצים על הכפתור.

משימה אישית ובדיקת הבנה

הוסיפו שדה רלוונטי לנושא שלכם עם תווית מתאימה. הסבירו מדוע טופס יפה אינו הוכחה שהנתונים נשמרים.

בסיום שינוי משמעותי: בדקו את ה־diff, בצעו Stage, כתבו הודעת commit שמתארת מה שיניתם, ובצעו Push. ודאו ב־GitHub שהשינוי הגיע. נדרשים לפחות 50 commits משמעותיים לאורך השנה, גם למי שעובד תמיד באותו מחשב נייד.

AI יכול לעזור להבין הודעת שגיאה ולנפות תקלה. אתם אחראים לכתוב, לבדוק ולהסביר את הקוד; אין להפעיל סוכן שיכתוב את הפרויקט.

המשך

כותבים תוכן ב־Markdown