מדריך ASP.NET MVC – תצוגת פרטים

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

ליצירת View חדש יש לבצע את הפעולות הבאות:

• פתח את Solution Explorer ע"י בחירה של View | Solution Explorer
• תחת ספריית ה-Controllers פתח את הקובץ GroupController
• עמוד על הפונקציה Index לחץ על עכבר ימני ובחר Add View
• הדלק את האפשרות "Create a strongly-typed view" ובחר את המחלקה Group
• לחץ על כפתור ה-Add

תחת ספריית ה-Views נוצרה ספריה חדשה בשם Group וקובץ חדש בשם Index.cshtml

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

שים לב כי הקובץ מכיל הגדרה בשם "@model". הגדרה זו מספרת לתשתיות של ASP.NET MVC מהו סוג המודל ש-View זה אמור לקבל מה-Controller. למעשה, בכל מקום בקובץ אשר נכתוב בתוכו את ההגדרה this.Model הכוונה תהיה לאובייקט מסוג Group.

שנה את הקוד כך שיציג את הפרטים של הקבוצה:

@model AddressBook.Models.Group
           
@using AddressBook.Models;
 
<div class="groupTitle">
    @this.Model.Name
</div>
 
@if (this.Model.Items.Count == 0)
{
    <span>No items are defined</span>
}
else
{
    foreach (BookItem item in this.Model.Items)
    {
    <div class="item">
        @item.Description
    </div>
    }
}

יש לציין כמה נקודות בהקשר לקוד מעלה

• הקוד מכיל HTML ו-#C יחדיו
• כדי לעבור ממצב של עריכת HTML למצב עריכת קוד עליך להשתמש בתו המיוחד "@". תו זה הינו חלק מ-Synatx מיוחד הקרוי Razor ובעזרתו ניתן לשלב קוד ו-HTML
• שים לב כיצד לאובייקט this.Model יש תכונה הנקראת Name. הסיבה לכך נעוצה בעובדה שה-View מגדיר בתחילת הקובץ כי המודל הנוכחי הינו מסוג Group ולמחלקה זו יש Property הקרוי Name
• השתמשנו ב-CSS Classes אבל עדיין לא הגדרנו אותם. נעשה זאת בפרקים הבאים.

על מנת להריץ את הקוד עליך לבחור Debug | Start Debugging או ללחוץ על מקש F5. עם הרצת הקוד תתקבל שגיאה “The resource cannot be found”:

השגיאה מתקבלת מאחר ולא תיקנו עדיין את ברירות המחדל של ה-Routing System.

בשלב זה נתעלם מהשגיאה ונכניס לשורת הכתובת את ה-URL הבא: http://localhost:1880/Group/Index שים לב כי יש לשנות את ה-Port

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

• פתח את הקובץ global.asax
• זהה את הפונקציה RegisterRoutes
• תקן את הקוד באופן הבא

לפני

new{controller="Home",action="Index",id=UrlParameter.Optional}

אחרי

new{controller="Group",action="Index",id=UrlParameter.Optional}

הרץ שוב את הפרויקט ובחן כיצד התצוגה הנכונה חוזרת למרות שה-URL הינו חלקי ולא מכיל את שם ה-Controller או את שם ה-Action

בפרק זה למדנו כיצד להוסיף View חדש. ה-View מורכב מקוד ומ-HTML. ראינו כי ה-View מכריז על המודל אותו הוא מציג וכי הוא יכול לגשת לאובייקט המודל בעזרת הקוד this.Model.

בפרק הבא נכיר כמה עובדות חשובות בעבודה עם CSHTML ונראה כיצד ניתן לפתור שגיאות שכיחות בעבודה עם ה-Razor Syntax.