מדריך ASP.NET MVC – תצוגת יצירה

בפרקים הקודמים למדנו כיצד להוסיף תצוגת פרטים. בפרק זה ניצור תצוגה חדשה אשר מאפשרת למשתמש לשלוח נתונים לשרת. בפרק הבא נלמד כיצד לטפל בנתונים בצד השרת.

ההבדל המרכזי בין תצוגת פרטים לתצוגת יצירה הוא השימוש בתגיות input המאפשרות למשתמש להקליד נתונים. להבדיל מתצוגת הפרטים אותה בנינו באופן ידני, עבור תצוגת היצירה אנו נשתמש ביכולות ה-Scaffolding של Visual Web Developer אשר יודע לייצר באופן אוטומטי את ה-CSHTML בהתאם לתכונות של אובייקט המודל.

להוספת תצוגה חדשה יש לבצע את הפעולות הבאות:

פתח את הקובץ GroupController.cs והוסף Action חדש בשם Create:

public ActionResult Create()
{
  return View();
}

עמוד על הפונקציה New ולחץ מקש ימני בעכבר. בחר Add View …

בחר את האפשרויות המסומנות מטה באדום ולחץ על Add:

שים לב לבחירה של “Scaffold template”. אפשרות זאת תבנה את התצוגה באופן אוטומטי על סמך התכונות של המחלקה Group

הקוד המתקבל נראה כך:

@model AddressBook.Models.Group
 
@{
    ViewBag.Title = "Create";
}
 
<h2>Create</h2>

 
@using (Html.BeginForm()) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Group</legend>
 
        <div class="editor-label">
            @Html.LabelFor(model => model.Name)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.Name)
            @Html.ValidationMessageFor(model => model.Name)
        </div>
 
        <p>
            <input type="submit" value="Create" />
        </p>
    </fieldset>
}
 
<div>
    @Html.ActionLink("Back to List", "Index")
</div>

הקוד מכיל את החלקים הבאים:

• Html.BeginForm – קוד זה מייצר HTML Form כך שהוא מבצע Submit ל-Controller ול-Action המתאימים
• Html.LabelFor – כותב לתוך ה-HTML את השם של ה-Property אליו הוא מחובר. במקרה שלנו מדובר בטקסט "Name"
• Html.EditorFor – כותב לתוך ה-HTML תגית HTML מסוג input ומאתחל אותה בערך הנוכחי של ה-Name
• “input type = “submit – כפתור Submit אשר לחיצה עליו תגרום ל-Browser לשלוח את הנתונים לשרת

בשלב זה ניתן להריץ את ה-Action החדש ללא שינוי בקוד

על מנת להריץ את ה-Action החדש יש לפנות ל-URL המתאים: http://localhost:1880/Group/Create

לחיצה על מקש ה-Create תגרום ל-Browser לשלוח את הנתונים בחזרה לשרת לאותו URL ממנו הגענו. מאחר ועדיין לא כתבנו קוד בצד השרת שמטפל בנתונים, התצוגה שמוחזרת ל-Browser הינה אותה תצוגה כמו בבקשה הראשונה.

על מנת שלא נצטרך לרשום את ה-URL כל פעם מחדש נוסיף לינק לתצוגה הראשית. פתח את הקובץ Views\Group\Index.cshtml והוסף את הקוד הבא:

<div class="menu">
    @Html.ActionLink("Add New Group", "Create")
</div>

לאחר העדכון התצוגה נראית כך:

לחיצה על הלינק "Add New Group" תוביל לתצוגת היצירה של קבוצה חדשה. כאמור, עדיין לא טפלנו בצד השרת עבור המקרה בו המשתמש לוחץ על כפתור ה-Create. זאת נעשה בפרק הבא.

בפרק זה ראינו כיצד ניתן לייצר תצוגת יצירה חדשה ולשלבה בתוך הפרויקט שלנו. כמו כן ראינו כיצד ליצור לינק מתצוגה אחת לאחרת. בפרק הבא נלמד כיצד ניתן לטפל בנתונים שנשלחים לשרת ולעדכן את המודל בהתאם.