מדריך CSHTML – סינטקס השפה

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

מה נלמד:

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

8 הטיפים החשובים ביותר

1. הוספת קוד לדף מתבצעת באמצעות התו @

התו @ מתחיל משפטים המשתלבים בקוד CSHTML בתוך דף ה- HTML.
ניתן לשלב בלוקים של משפט אחד ובלוקים של מספר משפטים:

<!-- בלוקים של קוד  -->        
@{ var total = 7; }
@{ var myMessage = "Hello World"; }
 
<!-- שילוב קוד בתוך הטקסט -->
<p>The value of your account is: @total </p>
<p>The value of myMessage is: @myMessage</p>
     
<!-- קטע קוד של מספר שורות -->
@{
    var greeting = "Welcome to our site!";
    var weekDay = DateTime.Now.DayOfWeek;
    var greetingMessage = greeting + " Today is: " + weekDay;
}
<p>The greeting is: @greetingMessage</p>

כך הקוד הנ"ל נראה כאשר הדף פועל בדפדפן:

הערה: קידוד HTML

בעת הצגת תוכן בדף באמצעות התו @, כמו בדוגמאות הקודמות, CSHTML מקודד את הפלט. זה מחליף תווים שמורים (כגון: < > & ) עם קודים המאפשרים לתווים להיות מוצגים כתווים במקום להתפרש כתגיות HTML או כאלמנטים אחרים. ללא קידוד HTML, הפלט של קוד השרת לא היה מוצג כראוי, ועלול היה לחשוף את הדף לסיכוני אבטחה.

2. בלוק של קוד יוקף בסוגריים מסולסלים

בלוק של קוד המכיל פקודה אחת או יותר יוקף בסוגריים מסולסלים.

<!-- בלוק המכיל שורת קוד אחת  -->
@{ var theMonth = DateTime.Now.Month; }
<p>The numeric value of the current month: @theMonth</p>
 
<!-- בלוק המכיל מספר שורות קוד -->
@{
    var outsideTemp = 79;
    var msg = "Hello, it is " + outsideTemp + " degrees.";
}
<p>Today's weather: @msg</p>

התוצאה המוצגת בדפדפן:

3. בתוך בלוק, בסוף כל פקודה יבוא נקודה פסיק ;

@{
    var temp = 79;
    var weatherMessage = "Hello, it is " + temp + " degrees.";
}

4. משתמשים במשתנים כדי לאחסן ערכים

ניתן לאחסן ערכים במשתנה, כולל מחרוזות, מספרים, תאריכים וכו'. יצירת משתנה חדש מתבצעת באמצעות מילת המפתח var. ניתן להוסיף ערכים למשתנה ישירות בדף באמצעות @.

<!-- שמירת מחרוזת במשתנה -->
@{ var welcomeMessage = "Welcome, new members!"; }
<p>@welcomeMessage</p>
 
<!-- שמירת תאריך במשתנה -->
@{ var year = DateTime.Now.Year; }
 
<!-- הצגת הערך השמור במשתנה -->
<p>Welcome to our new members who joined in @year!</p>

התוצאה המוצגת בדפדפן:

5. ערכים מסוג מחרוזת יהיו מוקפים במרכאות כפולות

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

@{ var myString = "This is a string"; }

אם המחרוזת מכילה תו לוכסן-אחורי (\) או מרכאות כפולות, יש להוסיף את הקידומת @ בעת השמת הערך של המחרוזת לתוך משתנה. (בשפת #C, לתו \ יש משמעות מיוחדת, אלא אם כן משתמשים בקידומת @.)

@{ var myFilePath = @"C:\MyFolder\"; }
<p>The path is: @myFilePath</p>

כדי לשלב מרכאות כפולות בתוך מחרוזת יש לכתוב פעמיים את המרכאות:

@{ var myQuote = @"He said: ""Hello, today is Monday."""; }
<p>@myQuote</p>

התוצאה מוצגת בדפדפן:

6. הקוד רגיש לאותיות גדולות/קטנות

ב- #C, מילות מפתח (… var, true, if ) ושמות המשתנים רגישים לאותיות גדולות/קטנות (case sensitive).

שורות הקוד הבאות יוצרות שני משתנים שונים – lastName ו- LastName.

@{
    var lastName = "Smith";
    var LastName = "Jones";
}

אם מצהירים על משתנה כמו “var lastName = "Smith;  וננסה להפנות משתנה בדף ל- @LastName, התוצאות תהיה שגיאה בגלל ש- LastName לא יוכר.

7. אובייקטים הם חלק מהקוד

אובייקט מייצג דבר שניתן לתכנת איתו – דף, תיבת טקסט, קובץ, תמונה, בקשת אינטרנט, הודעת דואר אלקטרוני, רשומת לקוח (שורה בבסיס-נתונים) וכו'. לאובייקטים יש מאפיינים המתארים את התכונות שלהם. לאובייקט תיבת טקסט יש בין השאר מאפיין Text, להודעת דוא"ל יש מאפיין From, לאובייקט לקוח יש מאפיין FirstName.

לאוביקטים יש גם פונקציות שהן "פעולות" שהם יכולים לבצע. למשל לאובייקט קובץ יש פונקציה הנקראת Save, לאוביקט תמונה יש פונקצית Rotate ולאוביקט הדוא"ל יש את הפונקציה Send.

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

דוגמה זו מראה כיצד לגשת למאפיינים של האובייקט Request וכיצד להפעיל את הפונקציה MapPath של אובייקט Request, אשר נותנת לנו את הנתיב המוחלט של הדף על השרת:

<table border="1">
<tr>
    <td>Requested URL</td>
    <td>Relative Path</td>
    <td>Full Path</td>
    <td>HTTP Request Type</td>
</tr>
<tr>
    <td>@Request.Url</td>
    <td>@Request.FilePath</td>
    <td>@Request.MapPath(Request.FilePath)</td>
    <td>@Request.RequestType</td>
</tr>
</table>

התוצאה מוצגת בדפדפן:

8. כתיבת קוד שמבצע החלטות

תכונה מרכזית של דפי אינטרנט דינמיים היא היכולת לקבוע מה לעשות בהתבסס על תנאי. הדרך הנפוצה ביותר לעשות זאת היא עם משפט if (ואפשרות למשפט else ).

@{
    var result = "";
    if (IsPost)
    {
        result = "This page was posted using the Submit button.";
    }
    else
    {
        result = "This was the first request for this page.";
    }
}
?
<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <form method="POST" action="">
    <input type="Submit" name="Submit" value="Submit" />
    <p>@result</p>
    </form>
</body>
</html>

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

התוצאה המוצגת בדפדפן (לאחר לחיצה על Submit):

דוגמת קוד פשוטה

ההליך הבא מראה לך כיצד ליצור דף המדגים טכניקות תכנות בסיסי.

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

1. בתוך WebMatrix, צור קובץ חדש בשם AddNumbers.cshtml.

2. העתק את הקוד הבא (כולל התגיות) לתוך הדף חדש שיצרת (במקום הקוד הקיים כבר בדף):

@{
    var total = 0;
    var totalMessage = "";
    if (IsPost)
    {
 
        // שליפת המספרים שהמשתמש הקליד
        var num1 = Request["text1"];
        var num2 = Request["text2"];
 
        // המרה למספרים שלמים וחיבור ביניהם
        total = num1.AsInt() + num2.AsInt();
        totalMessage = "Total = " + total;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Add Numbers</title>
    <meta charset="utf-8" />
    <style type="text/css">
        body
        {
            background-color: beige;
            font-family: Verdana, Arial;
            margin: 50px;
        }
        form
        {
            padding: 10px;
            border-style: solid;
            width: 250px;
        }
    </style>
</head>
<body>
    <p>
        Enter two numbers and click <strong>Add</strong>.</p>
    <form action="" method="post">
    <p>
        <label for="text1">
            First Number:</label>
        <input type="text" name="text1" />
    </p>
    <p>
        <label for="text2">
            Second Number:</label>
        <input type="text" name="text2" />
    </p>
    <p>
        <input type="submit" value="Add" /></p>
    </form>
    <p>@totalMessage</p>
</body>
</html>

הסבר על הקוד בדוגמה:

• התו @ מתחיל את הבלוק הראשון של הקוד, והוא מקדים את המשתנה totalMessage המשולב בחלקו התחתון של הדף.
• הבלוק בחלק העליון של הדף מוקף בסוגריים מסולסלים.
• בבלוק בראש הדף, כל סוף פקודה מסתיימת עם נקודה פסיק.
• המשתנים total ,num1 , num2 , ו- totalMessage מאחסנים מחרוזות ומספרים.
• המחרוזת בתוך המשתנה totalMessage עטופה במרכאות כפולות.
• מיכוון שהקוד רגיש לאותיות גדולות/קטנות, המשתנה totalMessage המוזכר בחלקו התחתון של הדף חייב להתאים בדיוק לשמו בראש הדף.
• הביטוי ()num1.AsInt() + num2.AsInt מראה כיצד לעבוד עם אובייקטים ופונקציות. הפונקציה AsInt ממירה את המחרוזת שהוזנה על ידי המשתמש למספר שלם כך שניתן לבצע עליה פעולות אריתמטיות.
• התגית <form> כוללת את התכונה “method="post הקובעת שכאשר המשתמש לוחץ על Add, הדף ישלחו לשרת באמצעות שיטת HTTP POST.
  
  כאשר תתבצע פעולת Submit על הדף והנתונים ישלחו, הבדיקה (if(IsPost תוערך כאמת, והקוד המותנה ירוץ ויציג את התוצאה של חיבור המספרים.

3. שמור את הדף והפעל אותו בדפדפן. הזן שני מספרים שלמים, ולאחר מכן לחץ על לחצן Add.