PracticU

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

בלי כתוביותעם כתוביות
PracticU › קורס MVC › שימוש ב-AJAX MVC - חלק 2
מילון מושגים:
AJAX - טכניקה שמאפשרת לדף אינטרנט לשלוח ולקבל נתונים מהשרת ברקע ולעדכן את התצוגה בלי לטעון מחדש.
MVC - דפוס ארכיטקטורה שמפריד יישום לשלושה חלקים: מודל (נתונים), תצוגה (View) ובקר (Controller).
HTML - שפת הסימון שבה בונים את מבנה ותוכן דפי האינטרנט, באמצעות תגיות שמגדירות כותרות, פסקאות, קישורים ועוד.
לקוח - תוכנה או מחשב שפונים לשרת ומבקשים ממנו שירות או מידע, למשל דפדפן שמבקש דף אינטרנט.
View - רכיב שאחראי על הצגת המידע למשתמש (התצוגה) בדפוס MVC. גם טבלה וירטואלית מבוססת שאילתה במסד נתונים.
תבנית - מבנה בסיסי מוכן שממנו יוצרים פריטים דומים, כמו תבנית עמוד או תבנית מסמך.
jQuery - ספריית JavaScript ותיקה שמפשטת את הגישה לרכיבי הדף, אירועים ואנימציות בדפדפן.
טופס - אזור בממשק שבו המשתמש מזין נתונים בשדות ושולח אותם, למשל טופס הרשמה או התחברות.

שימוש ב-AJAX MVC - חלק 2
השיעור השני על AJAX ב-MVC מציג שיטה נוספת: השרת מחזיר קטע HTML קטן, והלקוח משלב אותו בתוך הדף הקיים בלי לטעון אותו מחדש.
בצד השרת
1. שמירה והחזרת Partial View: אם הפעולה הצליחה, השרת שומר את המוצר במסד הנתונים ומחזיר Partial View בשם product partial עם אובייקט המוצר, במקום סטטוס קוד OK. אם הייתה שגיאה, הוא ממשיך להחזיר Bad Request.
2. התבנית: ה-Partial View מכיל HTML שמציג את שם המוצר ואת המחיר, עטוף בדיב עם הקלאס added-product.
בצד הלקוח
3. החלפת התוכן: בפונקציית success מקבלים את קטע ה-HTML ומשתמשים ב-jQuery כדי למצוא את האלמנט עם הקלאס added-product ולהחליף אותו בעזרת replaceWith. השיעור מציין במפורש שהפונקציה הנכונה היא replaceWith.
4. דיב ריק בדף: בחלק העליון של הדף מגדירים דיב ריק עם הקלאס הזה, כדי ש-jQuery תמצא אותו. הדיב לא נראה למשתמש עד שהתוכן מוחלף.
5. ניקוי הטופס: אחרי ההצלחה מרוקנים את שדות הקלט ומחזירים את הפוקוס לשדה שם המוצר, כדי להקל על הוספת מוצר נוסף.
הדגמה
בהדגמה מוסיפים מוצר בשם AA ומחיר 22, ואחריו מוצר נוסף. הדף לא נטען מחדש, ומופיעה הודעה שהמוצר נוסף. ניסיון אחד נדחה, כי שדה המחיר דרש מספר.
סיכום
השיטה הזו שולחת מהשרת את ה-HTML המוכן, והלקוח רק משלב אותו בדף. השיעור הבא מציג שתי שיטות נוספות לקבלת מידע מהשרת.
השיעור הבא בקורס: שימוש ב-AJAX MVC - חלק 3
מילון מושגים:
קוד מקור - הקוד שמפתחים כותבים בשפת תכנות, לפני הידור, המגדיר את פעולת התוכנה.
MVC - דפוס ארכיטקטורה שמפריד יישום לשלושה חלקים: מודל (נתונים), תצוגה (View) ובקר (Controller).

להורדת קוד מקור של כל הדוגמאות בקורס MVC – לחץ כאן


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

  1. 00:00

    החזרת קוד HTML במקום סטטוס קוד

  2. 01:14

    החזרת Partial View מה-Controller

  3. 01:51

    בניית ה-Partial View בשם ProductPartial

  4. 02:34

    הודעת הצלחה עם שם המוצר ומחירו

  5. 03:12

    הגדרת Class בשם AddedProduct

  6. 03:58

    שילוב ה-HTML בדף עם jQuery

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

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

  1. 00:15

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

  2. 00:34

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

  3. 00:55

    קודם כל במידה והיה לנו כאן איזושהי בעיה עדיין אנחנו נחזיר bad request אבל במידה והכל בסדר אנחנו שומרים את הנתונים במסד הנתונים ואנחנו מחזירים במקום להחזיר סטטוס קוד אוקיי אנחנו מחזירים partial view.

  4. 01:19

    בואו נקרא ל-view הזה product partial נשלח לו את המוצר כדי שיאכלס אותו בנתונים ואנחנו נבצע את זה במקום החזרת סטטוס קוד אוקיי. כל מה שנשאר לנו לעשות עכשיו זה ללכת ולבנות את אותו רכיב של ה-product partial.

  5. 01:43

    בואו ניגש ונוסיף view, נגדיר אותו כ-partial view, נקרא לו product partial, נבצע add ונגדיר אותו בצורה הבאה: והראשון using ואנחנו נמצאים במרחב שמות בואו נעתיק אותו ממקודם.

  6. 02:17

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

  7. 02:43

    נרשום your product ונגדיר כאן במודל את ה-product name as been added successfully. נציג גם את ה-price product price נלך למודל וניגש ל-unit price.

  8. 03:15

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

  9. 03:51

    הקליינט סייד אז יש לנו פה את הקריאייט בקריאייט ביצענו שליחת אג'קס פונקציית success הולכת לקבל בחזרה פיסת html ולכן אנחנו נגדיר html כאן בפיסה הזאת.

  10. 04:12

    עכשיו ברגע שהפעולה הצליחה אנחנו נקבל בחזרה את ה-parcial view ואנחנו צריכים במקום ה-alert לשלב אותו בתוך הדף הנוכחי. ולכן מה שנעשה אנחנו נלך ונחפש על ידי jQuery קלאס שנקראת AddedProduct ונגדיר בעברת jQuery Replace ב-HTML שקיבלנו מהשר"ט.

לקורס המלא: קורס MVC אונליין בעברית

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

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

הרצאות קשורות מקורסים אחרים

  • AJAX
  • הסבר על AJAX
  • הסבר על MVC
  • שימוש ב-ModelState

קורסים נוספים במסלול

  • קורס Entity Framework Core - עבודה עם מסד נתונים בדוט-נט
  • קורס דוט-נט - NET Core. - עם Rest API
  • קורס ASP.NET
  • קורס Git ו-GitHub עם Visual Studio