וובמאסטר - תיכנות ובניית אתרים

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

ori_calvo ,‏ מכללת הי טק‏ ‏/‏ 11 פברואר, 2011
F+
F-

בפרקים הקודמים במדריך יצרנו תצוגות שונות המשתלבות יחדיו לכדי תוכנית שלמה. במקרים אשר בנינו 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 אלא גם להשתמש בקלות בקוד פתוח של הקהיליה ולשלבו בפרויקט.

תגיות: מדריך‏  /  פיתוח‏  /  צד שרת‏  /  ASP.NET MVC‏  /  .net‏  

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

תגובות למאמר



עוד במדריך

תגיות פופולאריות

X
הצטרף לעמוד שלנו בפייסבוק להישאר מעודכן!
וובמאסטר © כל הזכויות שמורות