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

מדריך CSHTML – עיצוב האתר: דפי תבנית ומקטעים (Sections)

ליאור זמיר ,‏ ג'ון ברייס הדרכה‏ ‏/‏ 27 ינואר, 2011
F+
F-

בפרק הקודם ראינו שדף תבנית (Layout Page) משתמש בפונקציה RenderBody ומשלב את חלק התוכן המרכזי של עמוד התוכן. דפי תבנית יודעים לשלב בתוכם יותר מחלק תוכן אחד ע"י שימוש במקטעים – Sections.
בדף התוכן, נגדיר לכל מקטע שם ייחודי.  (מקטע התוכן המרכזי נשאר ללא שם). ב- Layout Page, נשתמש בפונקציה RenderBody כדי לציין היכן מקטע התוכן המרכזי אמור יופיע ולאחר מכן נוסיף קריאות לפונקציה RenderSection כדי לשלב מקטעים נוספים.
התרשים הבא מראה כיצד שפת CSHTML מטפלת בתוכן שמחולק למקטעים מרובים.  כל מקטע בעל שם ייחודי מוכל בבלוק המוגדר כ- section@ בדף התוכן.  (יש להם את השמות Header  ו- List  בדוגמה.) CSHTML משלבת את ה- Sections לתוך ה- Layout Page בנקודה שבה הפונקציה RenderSection נקראת.  המקטע המרכזי (ללא השם מוכנס בשלב שבו הפונקציה RenderBody נקראת, כפי שראינו קודם.

CSHTML Section RenderSection סקשן

השלבים הבאים (המתבססים על האתר הבסיסי שבנינו בפרק הקודם) מדגימים כיצד ליצור דף תוכן עם מקטעי תוכן מרובים, ואיך להציג אותו באמצעות Layout Page התומך במקטעי תוכן מרובים.

1. בתיקיה Shared , צור קובץ בשם layout2.cshtml_.
2.  החלף את כל התוכן הקיים עם הקוד הבא:

<!DOCTYPE html>
<
html
>
<
head>
  <title>Multisection Content</title>
  <link href="@Href("/Styles/Site.css")" 
        rel="stylesheet" type="text/css" 
/>
</
head
>
<
body>
  <div id="header">
    @RenderSection("header")
  </div>
  <div id="list">
    @RenderSection("list")
  </div>
  <div id="main">
    @RenderBody()
  </div>
  <div id="footer">
    &copy; 2010 Contoso Pharmaceuticals.
    All rights reserved.
  </div
>
</
body
>
</
html
>

שים לב לשימוש בפונקציה RenderSection להציג את המקטעים header  ו- list.

3. בתיקייה הראשית של האתר, צור קובץ בשם content2.cshtml והחלף את התוכן הקיים בקוד הבא:

@{ 
  Layout = "/shared/_layout2.cshtml";
}

@section header {
  <div id="header">
    Using Layout Pages with sections
  </div>
}



@section list {
  <ul>
    <li>Lorem</li>
    <li>Ipsum</li>
    <li>Dolor</li>
    <li>Consecte</li>
    <li>Eiusmod</li>
    <li>Tempor</li>
    <li>Incididu</li>
  </ul>
}

<h1>Multisection Content</h1
>
<
p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
   sed do eiusmod tempor incididunt ut labore et dolore magna
   aliqua. Ut enim ad minim veniam, quis nostrud exercitation
   ullamco laboris nisi ut aliquip ex ea commodo consequat.
   Duis aute irure dolor in reprehenderit in voluptate velit
   esse cillum dolore eu fugiat nulla pariatur. Excepteur
   sint occaecat cupidatat non proident, sunt in culpa qui
   officia deserunt mollit anim id est laborum.</p
>

דף תוכן זה מכיל בלוק של קוד בראש הדף, המדגיר את השימוש בדף התבנית.  ישנם שני מקטעים (List ו- Header המוגדרים ע”י שימוש במילה section@ ובתוך סוגריים מסולסלים). בהמשך, מכיל העמוד את מקטע התוכן המרכזי ללא שם.

4.  הפעל את הדף בדפדפן.

CSHTML Section RenderSection סקשן

ניתן לראות שדף המוצג מכיל את הכותרת (שהוגדרה ע”י המקטע header) ואת הרשימה (שהוגדרה ע”י המקטע list).

יצירת מקטעי תוכן אופציונליים

בדרך כלל, המקטעים שתיצור בדף התוכן צריכים להתאים למקטעים שמוגדרים ב- Layout Page.  אתה עלול לקבל שגיאות אם אחד מהמקרים הבאים יתרחש:

  • דף התוכן מכיל מקטע שאין לו מקטע תואם ב- Layout Page.
  • Layout Page מכיל מקטע שעבורו אין תוכן.
  • Layout Page כולל קריאות לפונקציות שמנסות לרנדר את אותו מקטע יותר מפעם אחת.

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

1. פתח את הקובץ content2.cshtml והסר את המקטע הבא:

@section header {
  <div id="header">
    Using Layout Pages with sections
  </div>
}

2. שמור את הדף ולאחר מכן הפעל אותו בדפדפן.  הודעת השגיאה “Section not defined” מוצגת, כי דף התוכן אינו מספק תוכן עבור מקטע מוגדר ב- Layout Page - המקטע header.

CSHTML Section RenderSection סקשן

3. בתיקיה Shared , פתח את הדף _Layout2.cshtml והחלף את השורה הזו:

@RenderSection("header")

בשורה:

@RenderSection("header", required: false)

כאלטרנטיבה, אתה יכול להחליף את השורה הנ"ל בלוק הקוד הבא, אשר מייצר את אותן התוצאות:

@if (IsSectionDefined("header") {
    @RenderSection("header")
}

4. הפעל את הדף content2.cshtml בדפדפן שוב.  (אם הדף עדיין פתוח לך בדפדפן, אתה יכול רק לרענן אותו.) הפעם הדף מוצג ללא שגיאה, למרות שאין לו header.

CSHTML Section RenderSection סקשן

נשים לב כי הדף המוצג לא מכיל את הכותרת שהוגדרה קודם במקטע header.

ליאור זמיר, ג'ון ברייס הדרכה

כיום אני ה- Webmaster של תוכנית החדשנות של HPE Software.
לפני כן, הייתי מנהל תחום Webmaster ומרצה בכיר בג'ון-ברייס (במשך 9 שנים) בקורסים לפיתוח ותיכנות באמצעות Microsoft .NET, מולטימדיה, בניית אתרי אינטרנט ואינטראנט. פיתוח הדרכה ומתן ייעוץ טכנולוגי.
תגיות: CSHTML‏  /  מדריך‏  /  בניית אתרים‏  /  צד שרת‏  

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

תגובות למאמר



עוד במדריך

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

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