RSS

UpdatePanel vs. Ajax Helper in MVC

21 אפר

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

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

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

clip_image002

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

clip_image004

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

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

clip_image006

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

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

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

clip_image008

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

4. Ajax Option Events

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

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

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

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

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

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

clip_image010

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.

מודעות פרסומת
 
4 תגובות

פורסם ע"י ב- אפריל 21, 2011 ב- Uncategorized

 

4 תגובות ל-“UpdatePanel vs. Ajax Helper in MVC

  1. דובי

    ספטמבר 5, 2012 at 2:30 am

    ה – UpdatePanel גורם ל – Page life cycle מלא וזה החסרון הגדול שלו, זמן עיבוד בשרת, בתוספת ViewState מכובד.

     
  2. eyal.vardi

    ספטמבר 5, 2012 at 2:43 am

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

     

להשאיר תגובה

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

הלוגו של WordPress.com

אתה מגיב באמצעות חשבון WordPress.com שלך. לצאת מהמערכת / לשנות )

תמונת Twitter

אתה מגיב באמצעות חשבון Twitter שלך. לצאת מהמערכת / לשנות )

תמונת Facebook

אתה מגיב באמצעות חשבון Facebook שלך. לצאת מהמערכת / לשנות )

תמונת גוגל פלוס

אתה מגיב באמצעות חשבון Google+ שלך. לצאת מהמערכת / לשנות )

מתחבר ל-%s

 
%d בלוגרים אהבו את זה: