שפת Razor לכתיבת View

תמלול ההרצאה: שפת Razor לכתיבת View

הטקסט המלא של הדקות הראשונות בהרצאה «שפת Razor לכתיבת View» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:01

   כעת אנחנו מגיעים לתחביר Razor. Razor זאת השפה שבה אנחנו כותבים בדפי ה-View שלנו. בדפי ה-View אנחנו כותבים את ה-HTML שאנחנו רוצים שיגיע ללקוח, אבל בנוסף אנחנו רוצים הרבה פעמים לשלב קוד C-Sharp.

2. 00:19

   איך אנחנו יכולים לכתוב גם C-Sharp וגם HTML בדף אחד? אז Razor הוא באמת תחביר שמאפשר לנו לשלב קוד C-Sharp בדפים עצמם.

3. 00:30

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

4. 00:44

   בואו לצורך הדוגמה נוסיף קונטרולר, נקרא לו testraiser, ניקח פה איזושהי פונקציה אינדקס, פונקציה דיפולטית שקיימת ונשלח מידע בין הקונטרולר לבין ה-view.

5. 01:02

   נגיד שאנחנו רוצים לשלוח ליסט של סטרינג והיא מכילה cities, בואו נכניס פה מספר ערים, תל אביב, חיפה, ג'רוזלם ונתניה.

6. 01:33

   ניקח את ה-Cities ונשלח אותו כמודל שאנחנו עובדים איתו לדף שאנחנו רוצים להציג, ובדף ברצוננו להציג אותו. אז בואו נחזור בחזרה לדף, Add View.

7. 01:49

   אנחנו רואים שהולך להיווצר לנו View שנקרא Index. אם היינו מסמנים פה Create a Strongly Type View, אז היינו צריכים לציין בדיוק מהו הטיפוס נתונים של המודל שאנחנו מעבירים ושימו לב שאנחנו לא מעבירים סטרינג אנחנו מעבירים ליסט של סטרינג ולכן ניתן לציין

8. 02:10

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

9. 02:43

   הדף הזה בעל סיומת cs HTML והרעיון הוא שבתוך הדף הזה יש גם קוד HTML של תגיות וגם קוד C-Sharp, זה ה-CS שיש פה, שמתבצע בשרת ומביא מידע מהשרת ומשלב אותו בתוך הדף.

10. 03:00

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

11. 03:16

    עכשיו יש שתי שיטות להגיע לקוד Razor. אם אנחנו לא נמצאים בשום תגית צהובה כזאת, זה אומר שאנחנו כבר נמצאים בתוך HTML ואנחנו יכולים לכתוב פה HTML כמה שבא לנו בעזרת תגיות רגילות, אנחנו רואים גם שהInteliface עוזר לנו, בואו ניקח h1 test razor ואנחנו רואים שיש לנו אפשרות לכתוב תגיות HTML בצורה ממש פשוטה.

12. 03:48

    בואו נייצר כאן רשימה, Unordered List, תגיד UL רגילה. כעת אנחנו רוצים לרוץ ולהביא את הנתונים מהשר"ט, מהמודל.

13. 04:02

    כלומר, הקונטרולר שלח לנו מידע ואנחנו רוצים עכשיו לרוץ על המידע הזה ולהציג אותו. אז אנחנו יכולים להשתמש בתחביר Razor בשביל להגיע ל-C-Sharp לדוגמה לכלי לולאה, for each.

14. 04:17

    אז אנחנו נמצאים כרגע בקוד HTML. אם אנחנו רוצים קוד צד שרת בעזרת רייזור, אמרנו יש לנו שתי דרכים. הדרך הראשונה זה פשוט לכתוב בתוך הקוד html שטרודל ואז את פקודת ה-C-Sharp הדרושה.

15. 04:35

    לדוגמה for each. אז אנחנו רוצים לרוץ for each string ct in והמידע של כל הערים ששלחנו נמצא לנו במודל שהגיע מהקונטרולר. כעת אנחנו רואים שהצלחנו להגדיר פקודת c-sharp אחת ויחידה בתוך קוד html.

16. 05:00

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

17. 05:23

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

18. 05:47

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

19. 06:02

    בעבר אם רצינו באמת לגשת למודל היינו צריכים לגשת על ידי שטרודל מודל, כי המשתנה מודל זה משתנה ששייך לצד השרת והוא כתוב ב-C-Sharp, ואז היינו יכולים לרשום נקודה ולהגיע אליו.

20. 06:18

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

21. 06:37

    כאן אנחנו כבר נמצאים בפקודת רייזור, כי הפקודה הזאת מתחילה בשטרודל, ולכן כל הפקודה מבחינת המנוע של ה-view זה רייזור. אז הגענו לצד השרת, יש לנו פעולה, ולכן בכל הפקודה הזאת אנחנו יכולים עדיין להיות בתחום של צד השרת, C-Sharp.

22. 06:58

    אז אין לנו צורך לרשום את השטרודל שרשמנו כאן. אוקיי, מה אנחנו רוצים לרשום בתוך הלולאה? בתוך הלולאה אנחנו רוצים list item, פריט ברשימה וכאן פתאום עברתי ל-HTML טהור.

23. 07:14

    עכשיו אני רוצה לשלב את ה-EAR. אם אני רושם CITY אני עדיין בתוך ה-HTML, כי שימו לב איך החשיבה צריכה להיות בנוגע ל-RAור. הפקודה שמתחילה בשטרודל זאת Razor ולכן רק השורה הזאת מבחינת המערכת שייכת לצד השרת.

24. 07:34

    בגלל שלולאה זו פקודה אחת, אז הפתיחת סוגריים והסגירת סוגריים גם היא שייכת ללולאה ולכן רייזור יודעת שזה גם חלק מהלולאה אבל מבחינת רייזור זה כבר html טהור ולכן אם אני פשוט רושם ct אני לא נמצא בתחום של csharp אני נמצא בתחום של html בואו נראה מה יקרה כשנריץ את זה אנחנו צריכים לגלוש לקונטרולר שלנו שנקרא test.razor והפונקציה index הוא אוטומטית התבצע ואנחנו רואים שהוא פשוט

25. 08:12

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

26. 08:26

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

27. 08:42

    אז השיטה הראשונה שבה אנחנו יכלנו לכתוב בשפת רייזור זה פשוט מאוד בכל מקום אנחנו כותבים html רגיל, כאשר אנחנו רוצים פקודה ב-c-sharp,