Facebook
Twitter
RSSמדריך CSHTML – עיצוב האתר: העברת נתונים בין דפי תוכן לדפי תבנית ע”י PageData
לפעמים, אתה צריך להעביר נתונים מדף התוכן לדף התבנית. לדוגמא, ייתכן שתרצה להציג את מצב ההתחברות (login) של המשתמש, או אולי תרצה להציג או להסתיר את אזורי התוכן על בסיס קלט מהמשתמש.
כדי להעביר נתונים בין דף התוכן לתבנית העיצוב, אתה יכול לשים ערכים במאפיין PageData של דף התוכן. המאפיין PageData הוא אוסף של זוגות ערכים מסוג שם + ערך אשר מחזיקים את הנתונים שברצונך להעביר בין הדפים. לאחר מכן, בתבנית העיצוב, תוכל לקרוא את הערכים מתוך המאפיין PageData.
הנה דיאגרמה נוספת המראה כיצד שפת CSHTML יכולה להשתמש במאפיין PageData להעביר ערכים מדף תוכן לתבנית העיצוב. כאשר CSHTML מתחילה בבניית דף אינטרנט, היא יוצרת את האוסף PageData. בדף התוכן, אתה כותב קוד להכנסת נתונים לאוסף PageData. ערכים באוסף PageData ניתנים לגישה גם על ידי מקטעים אחרים של דף התוכן על ידי בלוקים של תוכן נוספים.
המדריך הבא מדגים כיצד להעביר את הנתונים מדף התוכן לדף התבנית. כאשר הדף פועל, הוא מציג כפתור המאפשר למשתמש להסתיר או להציג רשימה שהוגדרה בתבנית העיצוב. כאשר משתמשים לוחצים על הכפתור, הוא קובע ערך true/false (בוליאני) במאפיין PageData. תבנית העיצוב קוראת את הערך, ואם הוא false, מסתירה את הרשימה. הערך משמש גם בדף התוכן לקבוע אם להציג את הכפתורHide List או את הכפתור Show List.
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">
© 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 בתחתית הדף.
5. לחץ על Hide List. הרשימה נעלמת והכפתור משתנה ל- Show List.
6. לחץ על כפתור Show List, והרשימה מוצגת שוב.
תגובות בפייסבוק