מדריך CSHTML – יסודות כתיבת קוד ב- CSHTML

בפרק זה נלמד את היסודות של כתיבת קוד CSHTML וכללי שפת התכנות.

אם יש לך ניסיון עם תכנות (במיוחד אם השתמשת ב- C, C++, C#, Visual Basic, או JavaScript) חלק מהדברים הבאים יהיו לך מוכרים. בכל מקרה, אופן השילוב של הקוד בתגיות בקבצי cshtml היינו ייחודי.

שילוב של טקסט, תגיות וקוד בבלוקים של קוד

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

הקף את הטקסט בתגית HTML, למשל: <p></p> או <em></em> :

@if(IsPost) 
{
  // <p> שורה זו כוללת את כל התוכן בין תגיות ה
  <p>Hello, the time is @DateTime.Now and this is a postback!</p>
}
else 
{
   // כל התוכן בין התגיות ולאחר מכן קוד שרת
   <p>Hey <em>you</em>, today is: <br /> </p>  @DateTime.Now
}

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

השתמש באופרטור @: או בתגית <text> :

האופרטור :@ משמש לפלט של שורה אחת של תוכן המכיל טקסט רגיל או תגיות HTMLללא סגירה; התגית <text> משמשת לפלט של מספר שורות. אפשרויות אלה שימושיות כאשר אתה לא רוצה לרנדר תגיות HTML כחלק מהפלט.

@if (!IsPost)
{
  // טקסט פשוט ולאחריו תגית ללא תגית סוגר וקוד שרת.
  @: The time is: <br />@DateTime.Now
 
  // קוד שרת, טקסט פשוט, תגית מכולה ושוב טקסט פשוט
  @DateTime.Now @:is the <em>current</em> time.
}

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

@if (IsPost)
{
  // Repeat the previous example, but use <text> tags.
  <text> The time is: <br />
  @DateTime.Now
  @DateTime.Now is the <em>current</em> time.
  </text>
}
 
@{
  var minTemp = 75;
  <text> It is @DateTime.Now.ToString("MM"), and <em>rainy</em>
  day! <br />
  <p>You can go swimming if it's at least @minTemp degrees. </p>
  </text>
}

רווחים

רווחים מיותרים בקוד (ומחוץ למחרוזת מילולית) אינם משפיעים על הקוד:

@{ var lastName = "Smith"; }

גם למעבר שורה בקוד אין כל השפעה על הקוד, ולכן ניתן לשבור שורות על-מנת לשמור על קריאות הקוד.

המשפטים הבאים זהים:

@{ var personName1 = "Smith"; }

@{
  var
  personName2
  =
  "Smith"
  ;
}

עם זאת, לא ניתן לשבור שורה באמצע מחרוזת מילולית. הדוגמה הבאה לא עובדת:

@{ var test = "This is 
            a long
            string"; }  // לא עובד

קיימות שתי אפשרויות לשלב מחרוזת ארוכה על-פני מספר שורות: אתה יכול להשתמש באופרטור השרשור ( + ) אשר נראה בהמשך או להשתמש בתו המקדים @ כדי ליצור מחרוזת מילולית, לדוגמה:

@{ var longString = @"This is 
            a long
            string";
}

הערות בקוד ובתגיות

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

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

הערות בשפת CSHTML נכתבות באופן הבא: אתה מתחיל את ההערה עם *@ ומסיים אותה עם @* .

הערה יכולה להיות בשורה אחת או מספר שורות:

@*  שורה עם הערת קוד אחת *@ 
 
@*
  מספר שורות עם הערה בקוד..
  יכול להימשך על-פני כמה שורות שרוצים.
*@ 

(שימו לב שב- WebMatrix הערות יופיע בד"כ בצבע ירוק).

דוגמה להערה בתוך בלוק קוד:

@{
  @*זו הערה  *@
  var theVar = 17;
}

בתוך בלוק קוד, ניתן גם להשתמש בתחביר ההערות של שפת #C במקום CSHTML :

@{
  // זו הערה  
  var myVar = 17;
  
  /* זו הערה על פני מספר שורות  
     C# המשתמשת בתחביר ההערות של שפת  */
}

שפת #C שורה אחת בודדת של הערה מתבצעת עם התחלתה בתווים // ולמספר שורות של ההערה ניתן להתחיל את ההערה ב- /* ולסיים ב- */ .

עבור תגיות HTML ניתן ליצור הערה באופן הבא:

<!-- זו הערה  -->

משתנים

משתנה הוא אובייקט עם שם אשר בתוכו ניתן לאחסן נתונים. באפשרותך לתת למשתנים כל שם אך השם חייב להתחיל באחת מאותיות ה- abc והוא לא יכול להכיל רווחים או מילים שמורות.

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

משתנים יכולים להכיל מחרוזת (כמו "שלום עולם"), מספר שלם (כמו 3 או 79), תאריך (כמו 12/01/2011 או מרץ 2010) ויש הרבה סוגי נתונים אחרים שניתן להשתמש. עם זאת, בדרך כלל לא צריך לציין את סוג ה משתנה. רוב הזמן, CSHTML יכול להבין את סוג המשתנה על סמך הנתון שנמצא בשימוש במשתנה.

מצהירים על משתנה באמצעות מילת המפתח var (אם אתה לא רוצה לציין סוג) או באמצעות כתיבת סוג המשתנה:

@{
  // הקצאת מחרוזת למשתנה
  var greeting = "Welcome!";
 
  // הקצאת מספר למשתנה
  var theCount = 3;
 
  // הקצאת ביטוי למשתנה
  var monthlyTotal = theCount + 5;
 
  // הקצאת תאריך למשתנה
  var today = DateTime.Today;
 
  // הקצאת כתובת אינטרנט למשתנה
  var myPath = this.Request.Url;
 
  // הצהרה על משתנה על-ידי שימוש בסוג מסויים בצורה מפורשת
  string name = "Joe";
  int count = 5;
  DateTime tomorrow = DateTime.Now.AddDays(1);
}

הדוגמה הבאה מציגה כמה שימושים נפוצים למשתנים בדף אינטרנט:

@{
    // שילוב הערך של המשתנה בתוך תגית
  <p>@greeting, friends!</p>
            
    // שימוש במשתנה כחלק מביטוי בתוך השורה
  <p>The predicted annual total is: @( monthlyTotal * 12)</p>
            
    // הצגת כתובת הדף באמצעות משתנה
  <p>The URL to this page is: @myPath</p>
}

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

המרות ובדיקות סוגי נתונים

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

הדוגמה הבאה מציגה מקרה טיפוסי שבו עליך להמיר מחרוזת למספר.

@{
  var total = 0;
 
  if (IsPost)
  {
    // החזרת המספר שהמשתמש הכניס
    var num1 = Request["text1"];
    var num2 = Request["text2"];
    
    // המרת המחרוזות שהוכנסו למספרים שלמים וחיבורם
    total = num1.AsInt() + num2.AsInt();
  }
}

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

Cannot implicitly convert type 'string' to 'int'. (לא ניתן להמיר במרומז את סוג של מחרוזת למספר שלם.)

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

הטבלה הבאה מפרטת את הפונקציות השכיחות להמרה ולבדיקת משתנים.

var myIntNumber = 0;
var myStringNum = "539";
if (myStringNum.IsInt() == true)
{
  myIntNumber = myStringNum.AsInt();
}

var myStringBool = "True";
var myVar = myStringBool.AsBool();

var myStringFloat = "41.432895";
var myFloatNum = myStringFloat.AsFloat();

var myStringDec = "10317.425";
var myDecNum = myStringDec.AsDecimal();

var myDateString = "12/27/2010";
var newDate = myDateString.AsDateTime();

int num1 = 17;
int num2 = 76;
 
// התוצאה תהיה 1776
string myString = num1.ToString() +
num2.ToString();

אופרטורים

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

הטבלה הבאה מסכמת את האופרטורים הנפוצים ביותר.

var myUrl = Request.Url;
var count = Request["Count"].AsInt();

@(3 + 7) 
@Request.MapPath(Request.FilePath);

var income = Request["AnnualIncome"];

var age = 17;

bool taskCompleted = false;
 
// פעולות עיבוד כלשהן
if (!taskCompleted)
{
  // המשך עיבוד
 
}

var myNum = 15;
if (myNum == 15)
{
  // פעולות כלשהן
}

var theNum = 13;
 
if (theNum != 15)
{
  // פעולות כלשהן
}

if (2 < 3)
{
  // פעולות כלשהן
}
 
var currentCount = 12;
if (currentCount >= 12)
{
  // פעולות כלשהן
}

@(5 + 13)
@{ var netWorth = 150000; }
@{ var newTotal = netWorth * 2; }
@(newTotal / 2)

// "abcdef" התוצאה:
@("abc" + "def")

bool myTaskCompleted = false;
int totalCount = 0;
 
// עיבוד
if (!myTaskCompleted && totalCount < 12)
{
  // המשך עיבוד
}

int theCount = 0;
theCount += 1; // הוספת 1