מדריך ASP.NET MVC

מדריך ASP.NET MVC – איך לשלב CSS

‏ • Hi Tech

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

ASP.NET MVC בשונה מ-ASP.NET Web Forms (אשר מכיל תמיכה ב-Theme וב-Skin) איננו מציע אבסטרקציה מעל יכולות ה-CSS. המשמעות היא שלא צריך ללמוד שום דבר חדש על מנת ל"שחק" עם הגדרות התצוגה. כל מה שצריך הוא להגדיר קובץ CSS ולהוסיף אליו קישור מתוך קובץ התצוגה המתאים.

להורדת הקוד של הפרק הקודם לחץ כאן

הרץ את התוכנית. ובחן את התצוגה הנוכחית הפשוטה:

image

העתק את התוכן של קובץ ה-CSS הבא

אל תוך הפרויקט תחת המיקום הבא: Content\Site.css. קובץ זה הינו קובץ ברירת המחדל של ASP.NET MVC עבור הגדרות CSS. ניתן להוסיף קבצי CSS נוספים על פי הצורך ולרוב נשמור אותם תחת המחיצה Content. בנוסף, שים לב כי תצוגת הפריסה של הפרויקט מכילה הפניה לקובץ זה:

<head>
    <title>@ViewBag.Title</title>

    ...

    <link href="@Url.Content("~/Content/Site.css")" 
rel="stylesheet" type="text/css" />

    @RenderSection("head", false)
</head
>

הרץ את התוכנית. שים לב כיצד התצוגה משתנה לכדי תצוגה יותר מרשימה:

image

בחן את התוכן של הקובץ Site.css ושים לב כיצד הוראות ה-CSS מתייחסות לאלמנטים השונים בתוך התצוגות השונות.

אחד המאפיינים היפים של ASP.NET MVC הוא שמפתחים המכירים את הטכנולוגיות הסטנדרטיות בעולם ה-WEB כמו HTML ו-CSS יכולים בקלות להביא יכולות אלו לידי ביטוי. CSS היא דוגמא מצויינת לאופן הקל שבו ניתן לשלבו אל תוך הפרויקט ה-MVC שלנו.

בפרק זה למדנו כיצד ניתן לשלב CSS בתוך הפרויקט. בפרק הבא נלמד כיצד ASP.NET MVC מאפשר לא רק להשתמש בתכונות סטנדרטיות של עולם ה-WEB אלא גם להשתמש בקלות בקוד פתוח של הקהיליה ולשלבו בפרויקט.

תגיות: , , , ,

תגובות בפייסבוק

חדש! אחסון אתרים של וובמאסטר

שירות אחסון אתרים
המקצועי של וובמאסטר!

מומחים באירוח אתרי
WordPress, Joomla, Drupal

  • שרתי לינוקס עם CloudLinux, LiteSpeed
  • 1GB דיסק SSD, 10GB תעבורה חודשית
  • ממשק ניהול cPanel, תעודת SSL חינם

עכשיו במחיר היכרות:
רק 420 ש"ח לשנה!