שימוש ב-AJAX MVC - חלק 3

תמלול ההרצאה: שימוש ב-AJAX MVC - חלק 3

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

1. 00:15

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

2. 00:31

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

3. 01:00

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

4. 01:17

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

5. 01:28

   ג'ייסון זה קיצור של JavaScript Object Notation זה בעצם ייצוג של מערכים ואובייקטים בג'אווה סקריפט כאשר אובייקטים מייצגים עם סוגריים לסלסלות ומערכים מייצגים עם סוגריים מרובעות אז ג'ייסון זה בעצם מעין תחליף ל-XML כי הוא גם כן מידע שיכול להיות היררכי אנחנו יכולים להגדיר אובייקט ובתוכו עוד אובייקט ובתוכו עוד מערך

6. 01:55

   וכולי ממש כמו ב-XML שאפשר להגדיר מידע בתוך מידע בתוך מידע, אבל ג'ייסון הוא הרבה יותר מצומצם בזיכרון, אין לו את עודף התגיות שיש ל-XML ולכן ה-Web עובר להשתמש הרבה יותר עם ג'ייסון מאשר עם XML לצורך העברת מידע בין לקוח לשרת ובין שרת ללקוח.

7. 02:15

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

8. 02:29

   מה אנחנו עושים עם האובייקט הזה בצד של הלקוח? אז בצד של הלקוח קודם כל אנחנו כבר לא מקבלים html, בצד של הלקוח אנחנו אמורים לקבל אובייקט json.

9. 02:41

   לכן בואו נבצע פה טיפה שינויים. הדבר הראשון שעלינו לעשות זה להבין שהשרק לא שולח לנו שום html, ולכן אין לנו html שיחליף את התגית הזאת. אז מה שאנחנו הולכים לעשות, אנחנו הולכים לבנות את ה html פה בצד של הלקוח ולגרום לתגית שלא יראו אותה על ידי style display none.

10. 03:12

    קודם כל אף אחד לא הולך לראות את התגית הזאת וכאשר אנחנו נקבל מידע אנחנו נגרום לתגית להיות מוצגת. כאן אנחנו נרשום בדיוק את מה שרשמנו בתגית או יותר נכון ב-partial view שהבאנו מהשר"ט יש לנו פה h3 your product וכאן אנחנו רוצים לשלב רק את המידע הטהור לכן מה שאנחנו נעשה פה ונפתח SPAN כי SPAN לא יורדת שורה אחריה, נגדיר ל-SPAN הזאת ID כ-LBL product name,

11. 03:49

    נשאיר אותה ריקה כרגע ונמשיך לרשום פה as, בעצם זה אמור להיות פה as been added successfully. נבצע דבר דומה עבור ה-Price, ניקח h3, קודקטס פרייס וניתן פה שוב ספאן עם איי-די אל-בי-אל פרייס או יוניט פרייס אבי.

12. 04:20

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

13. 04:40

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

14. 04:54

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