UpdatePanel vs. Ajax Helper in MVC

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

ב-Asp.Net MVC 3.0 יצא Ajax.ActionLink שמאוד מזכיר את ה- UpdaePanel ובפוסט זה אני רוצה לעמוד על ההבדלים.

1. דוגמא בסיסית ב-GET:

בדוגמא זו אנחנו יכולים לראות שע"י Ajax.ActionLink נוצר לינק ("Click Me (Replace)") שלחיצה עליו יוצרת תקשורת אסיכרונית עם ServerTime Action. ה-Action מחזיר PartialViewResult כי הוא מחזיר חלק מדף.

כאשר התשובה חוזרת, היא מחליפה את התוכן של ה-DIV עם ה-ID שהערך שלו “Demo1”. שימו לב שהתקשורת לשרת בוצעה ב-GET ולכן לא נשלחו לשרת נתונים של Form.

2. דוגמא בסיסית ב-POST:

בדוגמא זו אנחנו שולחים את הנתונים של ה- Form. שימו לב שאנחנו משתמשים ב- LoadingElementId שמדליק את ה-DIV עם הערך "Loading" בזמן שמתבצעת התקשורת, ומעלים אותו כאשר התקשורת מסתיימת.

3. איזה קוד מחולל ה-Ajax Helper?

ה-Ajax Helper משתמש ב-Script בשם " jquery.unobtrusive-ajax.js" וה-HTML נשאר נקי.

סגנון זה נקרא Unobtrusive. היתרון שלו שהדפים שוקלים פחות ויש הפרדה טובה יותר בין ה-HTML ל-Script.

4. Ajax Option Events

ה- Ajax Helper מאפשר לנו להתחבר למספר אירועים בצד ה-Client. האירועים הם:

א. Confirm, המשתמש צריך לאשר את התקשורת לשרת.

ב. OnBegin, לפני התחלת התקשורת.

ג. OnSuccess, התקשורת הסתיימה בהצלחה.

ד. OnFailure, התקשורת הסתיימה בכשלון.

ה. OnComplete, בלי קשר איך הסתיימה התקשורת ( בהצלחה או בכשלון ) תמיד מסיימים במתודה זו.

5. המתודות ה-JS שמתחברות לאירועים מקבלות כארגומנט ajaxContext שחושף את התכונות הבאות:

a. get_data()

b. get_insertionMode()

c. get_request()

d. get_response()

e. get_updateTarget()

סיכום:

1. ה-Ajax Helper מאפשר שליטה מלאה על מה אשלח לשרת לעומת ה- UpdatePanel ששולח ב-POST את כל הנתונים של ה- Form.

2. ה-Ajax Helper מאפשר תקשורת אסיכרונית ב-GET.

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

4. שניהם תומכים באירועים בצד הלקוח, ע"פ דעתי ב- Ajax Helper זה פשוט יותר.

5. ה-Ajax Helper מאפשר כמה סוגים של עדכון הדף (Replace, Insert Before & Insert After) לעומת ה- UpdatePanel שמאפשר רק Replace.

6. ה- UpdatePanel מאפשר עדכון של כמה אזורים שונים בבקשה אסיכרונית אחת.

7. ה- UpdatePanel עובד עם פקד Timer ואילו ה-Ajax Helper מחייב כתיבת קוד ב-JS.