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

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

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

בפרק זה נלמד את היסודות של כתיבת קוד 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 יכולה בדרך כלל לקבוע את סוג הנתונים באופן אוטומטי, לפעמים היא לא יכולה. לכן, ייתכן שיהיה עליך לסייע ל- 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. אם ההמרה מוצלחת, אז ניתן לחבר את המספרים.

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

פונקציה

תיאור

דוגמה

AsInt(),
IsInt()

ממירה מחרוזת המייצגת מספר שלם (כמו "93") למספר שלם.

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

AsBool(),
IsBool()

ממירה מחרוזת כמו "true" או "false " לסוג בוליאני.

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

AsFloat(),
IsFloat()

ממירה מחרוזת בעלת ערך עשרוני כמו "1.3" או "7.439" למספר עשרוני (נקודה צפה).

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

AsDecimal(),
IsDecimal()

ממירה מחרוזת בעלת ערך עשרוני כמו "1.3" או "7.439" למספר עשרוני. (מספר עשרוני מדויק יותר מאשר מספר נקודה צפה).

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

AsDateTime(),
IsDateTime()

ממירה מחרוזת המייצגת תאריך ושעה לאוביקט DateTime של ASP.NET

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

ToString()

ממירה כל סוג נתונים אחר למחרוזת.

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;

!

שלילה.

הופך ערך false ל- true ולהיפך (הופך ערך true ל-false).

bool taskCompleted = false;

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

}

==

שוויון.

מחזיר true אם הערכים שווים.

(שימו לב לכך שיש הבדל בין אופרטור ההקצאה = לבין אופרטור ההשוואה == )

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

!=

אי שוויון.

מחזיר true אם הערכים אינם שווים.

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

&&

||

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

&& - "וגם" (and)

|| - "או" (or)

bool myTaskCompleted = false;
int totalCount = 0;

// עיבוד
if (!myTaskCompleted && totalCount < 12)
{
  // המשך עיבוד
}

+=

-=

אופרטורים לתוספת ולהפחתה של ערך מהמשתנה.

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

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

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

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

תגובות למאמר



עוד במדריך

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

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