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

מדריך CSHTML – עיצוב האתר: העברת נתונים בין דפי תוכן לדפי תבנית ע”י PageData

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

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

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

הנה דיאגרמה נוספת המראה כיצד שפת CSHTML יכולה להשתמש במאפיין PageData להעביר ערכים מדף תוכן לתבנית העיצוב.  כאשר CSHTML מתחילה בבניית דף אינטרנט, היא יוצרת את האוסף PageData.  בדף התוכן, אתה כותב קוד להכנסת נתונים לאוסף PageData.  ערכים באוסף PageData ניתנים לגישה גם על ידי מקטעים אחרים של דף התוכן על ידי בלוקים של תוכן נוספים.

CSHTML PageData העברת נתונים בין דפים

המדריך הבא מדגים כיצד להעביר את הנתונים מדף התוכן לדף התבנית.  כאשר הדף פועל, הוא מציג כפתור המאפשר למשתמש להסתיר או להציג רשימה שהוגדרה בתבנית העיצוב.  כאשר משתמשים לוחצים על הכפתור, הוא קובע ערך true/false  (בוליאני) במאפיין PageData.  תבנית העיצוב קוראת את הערך, ואם הוא false, מסתירה את הרשימה.  הערך משמש גם בדף התוכן לקבוע אם להציג את הכפתורHide List  או את הכפתור Show List.

CSHTML PageData העברת נתונים בין דפים

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

@{ 
  Layout = "/shared/_layout3.cshtml";

  PageData["Title"] = "Passing Data";
  PageData["ShowList"] = true;

  if (IsPost)
  {
    if (Request["list"] == "off")
    {
      PageData["ShowList"] = false;
    }
  }
}

@section header {
  <div id="header">
    Passing Data to Layout Pages
  </div>
}

<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>

@if (PageData["ShowList"] == true)
{
  <form method="post" action="">
  <input type="hidden" name="list" value="off" />
  <input type="submit" value="Hide List" />
  </form>
}
else
{
  <form method="post" action="">
  <input type="hidden" name="list" value="on" />
  <input type="submit" value="Show List" />
  </form>
}

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

שים לב ששפת CSHTML מאפשרת לך לשים תגיות HTML בדף בצורה מותנית באמצעות בלוק קוד.  לדוגמה, בלוק if/else בגוף הדף קובע איזה טופס להציג בהתאם להאם ["PageData["Show List  מוגדר כ- true.

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

<!DOCTYPE html>
<
html
>
<
head>
  <title>@PageData["Title"]</title>
  <link href="@Href("/Styles/Site.css")"
        rel="stylesheet" type="text/css" 
/>
</
head
>
<
body>
  <div id="header">
    @RenderSection("header")
  </div>
  @if (PageData["ShowList"] == true) {
    <div id="list">
      @RenderPage("/shared/_list.cshtml")
    </div>
  }
  <div id="main">
    @RenderBody()
  </div>
  <div id="footer">
    &copy; 2010 Contoso Pharmaceuticals.
    All rights reserved.
  </div
>
</
body
>
</
html
>

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

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

<ul>
  <li>Lorem</li>
  <li>Ipsum</li>
  <li>Dolor</li>
  <li>Consecte</li>
  <li>Eiusmod</li>
  <li>Tempor</li>
  <li>Incididu</li
>
</
ul
>

4. הפעל את הדף Content3.cshtml בדפדפן.  הדף מוצג עם הרשימה מוצגת בצד השמאלי של העמוד ועם הכפתור Hide List  בתחתית הדף.

CSHTML PageData העברת נתונים בין דפים

5. לחץ על Hide List.  הרשימה נעלמת והכפתור משתנה ל- Show List.

CSHTML PageData העברת נתונים בין דפים

6. לחץ על כפתור Show List, והרשימה מוצגת שוב.

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

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

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

תגובות למאמר



עוד במדריך

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

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