שימוש ב-Html Helpers

תמלול ההרצאה: שימוש ב-Html Helpers

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

1. 00:00

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

2. 00:14

   בשרת ראינו איך אנחנו לוקחים את המידע ויכולים להוסיף אותו לדאטאבייסט, יכולים להוסיף אותו לקאש או לכל מיני מקומות.

3. 00:22

   איך עשינו את זה? היה לנו כאן מחלקה product, מתארת רק מידע של product name ו-unit price, השמות של המשתנים הם חשובים, אנחנו מתעסקים איתם בהמשך.

4. 00:34

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

5. 01:00

   יכול לקרוא לה רק אם הוא גולש בפוסט לשרת. זה בגלל ה-attributes שהגדרנו מעל הפונקציות האלה. אז mvc מבדילה את הגלישות השונות ב-get או בפוסט, ולפי זה יודעת לנתב ולהחזיר או לבצע איזו פונקציה שמתאימה ל-verb המתאים שנשלח ב-request.

6. 01:21

   ה-verb זה המילה הראשונה שכתובה ב-request, והיא מתארת האם אני get, האם אני פוסט, האם אני put, האם אני delete או האם אני משהו אחר.

7. 01:29

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

8. 01:50

   וראינו ש-MVC קודם כל מנסה למצוא האם המידע, לאכלס אותו בתוך המשתנה שמתקבל לפונקציה, נמצא ב-Route. אם הוא נמצא ב-Route, היא מוציאה אותו משם ושמה במשתנים.

9. 02:03

   אם המידע הזה לא נמצא ב-rout אז היא פונה לפורום ורואה אם המידע הגיע בתיבות קלט שנקלטו מהמשתמש. אם המידע לא נמצא בפורום MVC הולכת ומחפשת את המידע הזה ב-query string.

10. 02:16

    אם היא לא מוצאת ב-query string ומוגדר שהפרמטרים הם אופציונליים אז אין שום בעיה והם יהיו נאל. אם לא מוגדר שהם אופציונליים אז תעלה חריגה למשתמש.

11. 02:26

    כאן ב-create כל מה שעשינו זה לקחנו את המוצר והוספנו אותו לאוסף המוצרים שיש לנו ואז עשינו read direct בכדי להציג את כל המוצרים.

12. 02:36

    בואו נראה קודם כל איך האתר עובד בצורה הזאת. יש לנו גלישה לדף אינדקס, אנחנו רואים את כל המוצרים, אנחנו יכולים ללחוץ על Create New Product, אנחנו מגיעים למוצר חדש, שימו לב שהגענו בדיוק למיקום הנכון, מוסיפים מוצר, בואו נוסיף 111 ו-222, נבצע Create,

13. 02:58

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

14. 03:20

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

15. 03:34

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

16. 03:59

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

17. 04:14

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

18. 04:27

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

19. 04:39

    זה יהיה הטקסט הזה. דבר הבא הוא אומר, תגידו לי לאיזה אקשן אתם רוצים שאני אגלוש. אנחנו רוצים שהוא יגלוש לאקשן שנקראת create.

20. 04:54

    אנחנו יכולים להוסיף עוד route values אם אנחנו רוצים שהפונקציה תקבל ערכים נוספים. לדוגמה היינו יכולים ליצור פה אובייקט חדש ולהגיד שיש שם שם של משתנה שנקרא number והוא שווה ל-123 ויש שם של משתנה שנקרא ID והוא שווה ל-456 ויש משתנה שנקרא user name והוא שווה למוישה אנחנו יכולים לשלוח כל מיני פרמטרים אין לנו כרגע את כל הפרמטרים בפונקציה ולכן אנחנו לא שולחים שום

21. 05:25

    דבר. החלנו בנוסף גם להגדיר שאנחנו נמצאים בקונטרולר אחר אם אנחנו היינו רוצים שאקשנים יגלוש בכלל לקונטרולר אחר ולא לאותו קונטרולר by default mvc תחפש את הפונקציה create באותו קונטרולר שאנחנו נמצאים כרגע בגלל שאנחנו באינדקס ששייך לפרודקט אז הקריאייט תתחפש באינדקס, כלומר mvc תחפש אותה בתוך

22. 05:49

    האינדקס. טוב, את זה אנחנו יכולים כרגע למחוק ואנחנו חוזרים לכאן ואנחנו רואים שיש פה איזשהי ספן שמציגה product name. אוקיי, בואו נמחוק את זה ובמקום הספן הזאת ניקח html ונגדיר label pore, כלומר אנחנו רוצים לראות איזושהי תווית עבור מידע, עכשיו אנחנו צריכים לומר מה בדיוק לשלוח ללייבל.

23. 06:31

    אז כל מה שאנחנו צריכים לעשות, אנחנו צריכים להגדיר בצורה מסוימת שאנחנו רוצים להציג כרגע את התווית עבור ה-product name.

24. 06:42

    זה מה שהגדרנו כאן, תווית שמציגה לנו בדיוק את ה-product name. אוקיי, איך אנחנו עושים את זה? אז אנחנו רואים שהפונקציה הזאת מקבלת משהו שנקרא Lambda Expression.

25. 06:56

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

26. 07:18

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

27. 07:36

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

28. 07:51

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

29. 08:12

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

30. 08:30

    מה שה html helper הזה יעשה הוא ירנדר כלומר יתרגם או ייצור לעצמו איזשהו תגית לייבל שמכילה את השם product name. אוקיי, זה יהיה במקום ה-span ואנחנו לא נצטרך את ה-span.

31. 08:57

    עכשיו, מה אנחנו רוצים לעשות כאן? כאן אנחנו רוצים ליצור html helper של display4p product name. פה אנחנו רוצים את המידע עצמו שאנחנו רוצים להציג.

32. 09:18

    נבצע את אותו הדבר עבור ה-price. יש לנו פה את ה-unit price ו-unit price ובואו נבצע גלישה לדף הזה. אנחנו רואים פה משהו קצת פחות טוב ממקודם.

33. 09:41

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

34. 09:53

    אבל כאן אנחנו רואים את השם של המשתנה product name, אין שום רווח ביניהם, שום רווח בינו לבין הערך של הפרודקט ניים שזה במבה כנ"ל יוניט פרייס בכלל מקודם רצינו לראות פרייס ולא יוניט פרייס אז בואו נטפל בכל הדברים האלה דבר ראשון בואו

35. 10:11

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

36. 10:47

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

37. 11:20

    ואנחנו רואים את השם unit price ואנחנו לא רוצים לראות את השמות האלה. אז איך אנחנו יכולים לטפל בזה? זה מתבצע ברמת המודל. בארכיטקטורה של MVC ה-view יכול לתקשר עם המודל ולקבל ממנו כל מיני דברים שקשורים לתצוגה.