מדריך CSHTML

פרק זה מסביר כיצד לבצע הגדרות על אתר שלם או תיקיה שלמה, ולא רק על דף בודד.

מה תלמד:

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

הוספת קוד הפעלה לאתר

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

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

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

הגדרת ערכים גלובליים עבור האתר שלך

בתיקיית השורש של האתר, צור קובץ חדש בשם AppStart.cshtml_. הקובץ חייב להיות בתיקיית השורש של האתר.
החלף את הקוד בדף עם הקוד הבא:
```
@{
  AppState["customAppName"] = "Application Name";
}
```
קוד זה מאחסן ערך במילון AppState, אשר יהיה זמין באופן אוטומטי עובר כל הדפים באתר.
בתיקיית השורש של האתר, צור קובץ חדש בשם AppName.cshtml.
החלף את הקוד בדף עם הקוד הבא:
```
<!DOCTYPE html>
<html>
<head>
  <title>Show Application Name</title>
</head>
<body>
  <h1>@AppState["customAppName"]</h1>
</body>
</html>
```
קוד זה מחלץ את הערך מתוך המילון AppState שהגדרת בדף AppStart.cshtml_.
הפעל את הדף AppName.cshtml בדפדפן. הדף מציג את הערך הגלובלי.

הגדרת ערכים עבור Helpers (עוזרים)

שימוש טוב עבור הקובץ AppStart.cshtml_ הוא להגדיר ערכים עבור העוזרים שאתה משתמש בהם באתר שלך וצריכים להיות מאותחלים. דוגמה טובה לכך היא השימוש בעוזר ReCaptcha , אשר מחייב אותך לציין מפתחות פרטיים וציבוריים עבור חשבון ה- reCAPTCHA שלך. במקום להגדיר את המפתחות האלה בכל דף בו ברצונך להשתמש בעוזר ReCaptcha, אתה יכול להגדיר אותם פעם אחת בקובץ AppStart.cshtml_ ולאחר מכן הם כבר מוגדרים עבור כל הדפים באתר שלך. ערכים אחרים שאתה יכול להגדיר בקובץ AppStart.cshtml_ הם ההגדרות עבור שליחת דואר אלקטרוני באמצעות שרת SMTP (כפי שראית במאמר על הוספת אבטחה וחברות).

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

הוסף לאתר שלך את החבילה: ASP.NET Web Helpers Library במידה ועדיין לא עשית זאת. (ניתן לעשות זאת ע"י הפעלת האתר ופניה לתיקיה Admin_ . לדוגמה: http://localhost:11111/_Admin ולהוסיף מרשימת ה- Online Packages את החבילה ASP.NET Web Helpers Library).
אם עדיין לא עשית זאת, רשום את אתר האינטרנט שלך ב- http://recaptcha.net. כאשר תשלים את ההרשמה, תקבל מפתח ציבורי (public key) ומפתח פרטי (private key).
אם עדיין לא יצרת את הקובץ AppStart.cshtml_ , צור קובץ חדש בשם AppStart.cshtml_ בתיקיית השורש של האתר.

החלף את הקוד הקיים בקובץ עם הקוד הבא:

@{
  // הוסף לשני המאפיינים הבאים את   
  //ReCaptcha.Net המפתח הציבורי והפרטי שקיבלת מאתר 
  ReCaptcha.PublicKey = "";  
  ReCaptcha.PrivateKey = "";  
}

הגדר את המאפיינים PublicKey ו- PrivateKey באמצעות המפתח הציבורי והפרטי שקיבלת מאתר ReCaptcha.Net.
שמור את הקובץ AppStart.cshtml_ וסגור אותו.
בתיקיית השורש של האתר, צור קובץ חדש בשם Recaptcha.cshtml.

החלף את הקוד הקיים בדף עם הקוד הבא:

@{
  var showRecaptcha = true;
  if (IsPost)
  {
    if (ReCaptcha.Validate())
    {  
  @:Your response passed!
        showRecaptcha = false;
    }
    else
    {
  @:Your response didn't pass!
    }
  }  
}
<!DOCTYPE html>
<html>
<head>
  <title>Testing Global Recaptcha Keys</title>
</head>
<body>
  <form action="" method="post">
  @if (showRecaptcha == true)
  {
    if (ReCaptcha.PrivateKey != "")
    {
    <p>@ReCaptcha.GetHtml()</p>
    <input type="submit" value="Submit" />
    }
    <p>
      You can get your public and private keys
      at the ReCaptcha.Net website
      (<a href="http://recaptcha.net">http://recaptcha.net</a>).
      Then add the keys to the AppStart.cshtml_ file.</p>
  }
  }
  </form>
</body>
</html>

הפעל את הדף Recaptcha.cshtml בדפדפן. אם PrivateKey מכיל ערך חוקי, הדף מציג את הפקד reCAPTCHA ולחצן. אם לא הגדרת את המפתחות גלובלית בקובץ AppStart.html_, הדף יציג הודעת שגיאה.
הזן את המילים לבדיקה. אם עברת את מבחן ה- reCAPTCHA, אתה רואה הודעה על כך, אחרת אתה רואה הודעת שגיאה ואת פקד reCAPTCHA מוצג מחדש.

הפעלת קוד לפני ואחרי קבצים בתיקייה

בדיוק כמו שאתה יכול להשתמש בקובץ AppStart.cshtml_ כדי לכתוב קוד המתבצע לפני שהדפים באתר רצים, אתה יכול לכתוב קוד שרץ לפני (ואחרי) כל דף שרץ בתיקייה מסוימת. זה שימושי עבור מקרים כמו הגדרת פריסת עמוד זהה עבור כל העמודים בתיקייה, או לבדיקה שהמשתמש מחובר לפני הפעלת דף בתיקיה.

עבור דפים בתיקיות מסוימות, תוכל ליצור קוד בקובץ בשם PageStart.cshtml_. כך שסדר הפעולות באתר יהיה כדלהלן:

1. בקשה לדף מסוים באתר מגיעה לשרת.

2. CSHTML בודקת האם קיים קובץ AppStart.html_ באתר, במידה וכן – היא מפעילה אותו.

3. CSHTML בודקת האם קיים קובץ PageStart.cshtml_ בתיקיה של הקובץ המבוקש, במידה וכן – היא מפעילה אותו.

(יש לשים לב שבמידה והקובץ נמצא בתיקיה שבתוך תיקייה וכו' (היררכיה), אם יש בתיקיות אלו קבצי PageStart.cshtml_, הם יתבצעו בסדר הבא: קודם כל הקובץ שנמצא בתיקיה הקרובה ביותר לתיקיית השורש, לאחר מכן הקובץ בתת-התיקייה וכן הלאה, עד לקובץ PageStart.cshtml_ שנמצא בתיקיה המכילה את הדף המבוקש).

4. הדף המבוקש יופעל.

לדוגמה, ייתכן שיש לך את השילוב הבא של קבצי PageStart.cshtml_ וקובץ default.cshtml:

@* /PageStart.cshtml_ *@
@{
  PageData["Color1"] = "Red";
  PageData["Color2"] = "Blue";
}
 
 
@* /myfolder/PageStart.cshtml_ *@
@{
  PageData["Color2"] = "Yellow";
  PageData["Color3"] = "Green";
}
 
 
@* /myfolder/default.cshtml *@
@PageData["Color1"]
<br/>
@PageData["Color2"]
<br/>
@PageData["Color3"]

כאשר אתה מפעיל את default.cshtml, תראה את הפלט הבא:

Red

Yellow

Green

הרצת קוד אתחול עבור כל הדפים בתיקיה

שימוש טוב עבור קבצי PageStart.cshtml_ הוא לאתחל את הדף באותה פריסה של כל הקבצים בתוך תיקייה אחת.

בתיקיית השורש של האתר, צור תיקייה חדשה בשם InitPages.

בתיקייה InitPages, צור קובץ בשם PageStart.cshtml_ והחלף את הקוד בקובץ עם הקוד הבא:

@{
  // עבור כל הדפים בתיקייה layout page מגדיר את 
  Layout = "/Shared/_Layout1.cshtml";
 
  // מגדיר משתנה הזמין לכל הדפים בתיקייה.
  PageData["MyBackground"] = "Yellow";
}

בתיקיית השורש של האתר, צור תיקייה בשם Shared.

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

@{
  var backgroundColor = PageData["MyBackground"];
}
<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <link type="text/css" href="/Styles/Site.css"
        rel="stylesheet" />
</head>
<body>
  <div id="header">
    Using the PageStart.cshtml_ file
  </div>
  <div id="main" 
       style="background-color:@backgroundColor">
    @RenderBody()
  </div>
  <div id="footer">
    &copy; 2011 Contoso. All rights reserved
  </div>
</body>
</html>

בתיקייה InitPages, צור קובץ בשם Content1.cshtml והחלף את הקוד בקובץ עם הקוד הבא:
```
<p>This is content page 1.</p>
```
בתיקייה InitPages, צור קובץ בנוסף בשם Content2.cshtml והחלף את הקוד בקובץ עם הקוד הבא:
```
<p>This is content page 2.</p>
```
הפעל את הדף Content1.cshtml בדפדפן.
כאשר הדף Content1.cshtml פועל, הקובץ PageStart.cshtml_ מגדיר את ה- Layout וגם קובע צבע ב- ["PageData["MyBackground. בדף Content1.cshtml, הפריסה והצבע מוחלים.
הצג את הדף Content2.cshtml בדפדפן.
הפריסה זהה לדף הראשון, משום ששני הדפים השתמשו בדף באותה פריסה וצבע שאותחלו בקובץ PageStart.cshtml_.

שימוש ב- PageStart.cshtml_ כדי לטפל בשגיאות

שימוש טוב נוסף לקובץ PageStart.cshtml_ הוא ליצור דרך לטפל בשגיאות תכנות (חריגים) שעשויות להתרחש באחד מדפי ה- cshtml. בתיקיה. דוגמה זו מראה לך דרך אחת כיצד לעשות זאת.

בתיקיית השורש של האתר, צור תיקייה בשם InitCatch.
בתיקייה InitCatch, צור קובץ בשם PageStart.cshtml_ והחלף את הקוד בקובץ עם הקוד הבא:
```
@{ 
    try
    {
        RunPage();
    }
    catch (Exception ex)
    {
      Response.Redirect("/Error.cshtml?source=" +
      HttpUtility.UrlEncode(
      Request.AppRelativeCurrentExecutionFilePath));
    }
}
```
בקוד זה, אתה מנסה להפעיל את הדף המבוקש במפורש על ידי קריאה לפונקציה RunPage בתוך בלוק try. אם שגיאה כלשהי תתרחש בדף המבוקש, הקוד בבלוק catch יפעל. במקרה זה, הקוד יפנה לדף Error.cshtml (אנחנו ניצור את דף זה בהמשך) ויעביר את השם של הקובץ שנתקל בשגיאה כחלק מכתובת URL.
בתיקייה InitCatch, צור קובץ בשם Exception.cshtml והחלף את הקוד בקובץ עם הקוד הבא:
```
@{ 
  var db = Database.Open("invalidDatabaseFile");
}
```
לצורך דוגמה זו, אתה יוצר בכוונה שגיאה בדף על ידי ניסיון לפתוח קובץ מסד נתונים שאינו קיים.
בתיקיית השורש של האתר, צור קובץ בשם Error.cshtml והחלף את הקוד בקובץ עם הקוד הבא:
```
<!DOCTYPE html>
<html>
<head>
  <title>Error Page</title>
</head>
<body>
  <h1>
    Error report</h1>
  <p>
    An error occurred while running the following file:
    @Request["source"]</p>
</body>
</html>
```
בדף זה, הביטוי ["Request["source מקבל את הערך מתוך כתובת ה- URL של האתר ומציג אותו.
שמור את הקובץ.
הפעל את הדף Exception.cshtml בדפדפן.
מיכוון שהתרחשה שגיאה בדף Exception.cshtml, הדף PageStart.cshtml_ מפנה לדף השגיאות Error.cshtml, אשר מציג את ההודעה על השגיאה.

שימוש PageStart.cshtml_ כדי להגביל את הגישה לתיקיות

ניתן גם להשתמש בקובץ PageStart.cshtml_ כדי להגביל את הגישה לכל הקבצים בתיקייה.

צור אתר חדש באמצעות האפשרות Site From Template.
מרשימת התבניות הזמינות, בחר בתבנית Starter Site.
בתיקיית השורש של האתר, צור תיקייה בשם AuthenticatedContent.
בתיקייה AuthenticatedContent, צור קובץ בשם PageStart.cshtml_ והחלף את הקוד בקובץ עם הקוד הבא:
```
@{
  Response.CacheControl = "no-cache";
 
  if (!WebSecurity.IsAuthenticated)
  {
    Response.Redirect("/Account/Login");
  }
}
```
הקוד מתחיל בכך שהוא מונע מכל הקבצים בתיקייה מלהיות במטמון. (זה נדרש עבור תרחישים כמו במחשבים ציבוריים, שבהם אתה לא רוצה שהדפים במטמון של המשתמש יהיו זמינים למשתמש הבא). לאחר מכן, הקוד קובע האם המשתמש התחבר לאתר כדי שיוכל להציג את כל אחד מהדפים בתיקייה. אם המשתמש אינו מחובר, הקוד יפנה אותו אוטומטית אל דף ההתחברות (הדף Login).
צור דף חדש בתיקייה AuthenticatedContent בשם Page.cshtml.

החלף את הקוד בדף עם הקוד הבא:

@{  
  Layout = "/_SiteLayout.cshtml";
  Page.Title = "Authenticated Content";
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
</head>
<body>
  Thank you for authenticating!
</body>
</html>

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

יצירת כתובות URL נוחות יותר לקריאה ולחיפוש

כתובות ה- URL של הדפים באתר שלך יכולים להשפיע על מידת ההצלחה של האתר. כתובת URL "ידידותית" יכולה להקל על אנשים להשתמש באתר. זה גם יכול לעזור עם אופטימיזציה של מנועי חיפוש (SEO) לאתר. אתרי CSHTML כוללים את היכולת להשתמש בכתובות ידידותיות באופן אוטומטי.

אודות ניתוב

CSHTML מאפשרת ליצור כתובות URL משמעותיים המתארים פעולות של המשתמש, ולא רק הצבעה על קובץ בשרת. השווה את שני זוגות כתובות ה- URL הבאים עבור בלוג דמיוני:

http://www.contoso.com/Blog/blog.cshtml?categories=hardware

http://www.contoso.com/Blog/blog.cshtml?startdate=2009-11-01&enddate=2009-11-30

http://www.contoso.com/Blog/categories/hardware

http://www.contoso.com/Blog/2009/November

בזוג הראשון, המשתמש יצטרך לדעת שהבלוג מוצג באמצעות דף blog.cshtml, ולאחר מכן יצטרך לבנות מחרוזת שאילתה שמקבלת את הקטגוריה הנכונה או טווח תאריכים. הזוג השני של הדוגמאות הרבה יותר קל להבנה ויצירה.

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

ב- CSHTML אתה יכול ליצור כתובות ידידותיות כמו בדוגמאות שלעיל על-ידי ניתוב (Routing). ניתוב יוצר מיפוי לוגי מ-URL לדף (או דפים) שיכול למלא את הבקשה. בגלל שהמיפוי הוא לוגי (לא פיזי, לקובץ ספציפי), ניתוב מספק גמישות רבה באיך שאתה מגדיר את כתובות ה- URL עבור האתר שלך.

כיצד ניתוב עובד

כאשר CSHTML מעבדת בקשה, היא קוראת את ה-URL, כדי לקבוע כיצד לנתב אותה. CSHTML מנסה להתאים קטעים בודדים של כתובת האתר לקבצים בדיסק (משמאל לימין). אם קיימת התאמה, כל דבר הנותר ב-URL עובר לדף בתור מידע על הנתיב.

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

נניח שיש לך קובץ בשם ViewCustomers.cshtml והאתר שלך מקבל את הבקשה הזו:

http://mysite.com/myWebSite/ViewCustomers/1000

הבקשה תועבר אל הדף שלך. בתוך הדף, אתה יכול להשתמש בקוד הבא כדי לקבל את מידע הנתיב (במקרה זה, את הערך "1000"):

<!DOCTYPE html>
<html>
<head>
  <title>URLData</title>
</head>
<body>
  Customer ID: @UrlData[0].ToString()
</body>
</html>

URLData Customer id 1000

תגיות: ASP.Net, CSHTML

ליאור זמיר

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

מאמרים נוספים של ליאור זמיר

מדריך CSHTML – התאמה אישית של התנהגות ברחבי האתר