شرح الاجاكس بروجريس بار update progress bar in asp.net

شرح الاجاكس بروجريس بار update progress bar in asp.net

المستوي الرابع مبرمج متوسط


عندما تضغط علي زر معين وتظهر صورة متحركة بالاسفل تفيد انتظر قليلا حتي يتم الدخول او التسجيل كما في كبري المواقع

submit to reddit

شرح الاجاكس بروجريس بار update progress bar in asp.net

سيتم شرح الاجاكس بروجريس بار في المواقع وهي مشهورة وتوجد في معظم المواقع
فعندما تضغط علي زر في موقع ويخبرك انتظر قليلا او تظهر صورة اسفل الزر تخبرك بالانتظار فهذه تسمي

update progress bar in asp.net


شرح الاجاكس بروجريس بار update progress bar in asp.net
شرح الاجاكس بروجريس بار update progress bar in asp.net

شرح الاجاكس بروجريس بار update progress bar in asp.net


وهي اداة ملحقة بالاجاكس
كبداية هنا شرحنا كيفية تنصيب الاجاكس بصورة صحيحة وحل لمشاكل الاجاكس
http://www.citystarit.com/Article_details.aspx?id=92


الان نبدأ بالعمل
مختصر العمل
1- ضع ابديت بانل
2- ضع اسفله ابديت بروجريس بار

تفاصيل الشرح

1- من ادوات الفيجوال ستوديو ثم اختر
Ajax etentions
وهي الادوات الااساسية للاجاكس

ضع UpdatPanel
في الصفحة وهو شكله مربع عادي فارغ بعد النزول علي الصفحة

شرح الاجاكس بروجريس بار update progress bar in asp.net

2- سنضع الان زر داخل هذه الاداة ونسميه مثلا تسجيل دخول
ونضع ايضا تكست بوكس عادي ونضع ذلك في جدول لكي ننسق الشكل فقط
كل ذلك لابد وان يكون داخل الابديت بانل السابقة
 
شرح الاجاكس بروجريس بار update progress bar in asp.net

3- الان سوف نضع اسفل الابديت بانل السابقة الاداة التي تظهر الصورة المتحركة
من نفس الادوات الاساسية للاجاكس اختر
UpdateProgress
ثم ضعها في اسفل الابديت بانل

شرح الاجاكس بروجريس بار update progress bar in asp.net

وسوف تأخذ شكل مربع عادي فارغ ..ضع بداخله اي شئ تريده ان يظهر عند الضغط علي الزر السابق او اي زر داخل الابديت بانل التي بالاعلي
وهنا انا وضعت صورة متحركة وبجوارها عبارة جاري الدخول


شرح الاجاكس بروجريس بار update progress bar in asp.net
وكما تري ظهرت الصورة وبجوارها عبارة جاري الدخول
ولابد هنا ان تجد صورة متحركة وليست ثابتة وتكون من النوع
Gif
وارفقت بالمشروع كذا صورة تختار بينهم كما تشاء
 الان جرب تشغيل الصفحة وسيظهر الخطأ التالي

شرح الاجاكس بروجريس بار update progress bar in asp.net

وهذا الخطأ هو
the control updatepanel required scriptmanager in the page
ويعني انه لابد من اضافة الاداة سكربت مانجر وهو يهيئ الاجاكس للعمل

قم الان بوضع سكربت مانجر فوق كل ادوات الصفحة واسفل فورم الصفحة كما بالصورة الاتية

شرح الاجاكس بروجريس بار update progress bar in asp.net

الان قم بتشغيل الصفحة من جديد .. ولكن ستري ان الصورة والاداة لا تعمل عند الضغط علي زر الدخول

شرح الاجاكس بروجريس بار update progress bar in asp.net

الحقيقة ان الاداة تعمل جيدا .. ولكن لا يظهر ذلك لك
تفسير ذلك:

هناك خاصية في خصائص الاداة
UpdatePRogress
وهذه الخاصية تسمي
Display after
اي متي تظهر الاداة ..او بعد كام ملي ثانية وهنا افتراضيا يكون بعد 500 ملي ثانية اي بعد نصف ثانية من الضغط علي الزر

شرح الاجاكس بروجريس بار update progress bar in asp.net

وهنا مدة نصف ثانية كافية اذا كنا برمجنا الزر علي حدث معين مثل الدخول او التسجيل او اي كود يتصل بالداتابيز وبالتالي يستغرق وقت حوالي نصف ثانية
ولكننا هنا سوف نقلل هذه المدي كي نري الاداة تعمل وهنا وضعت في المثال المرفق مدة 5 ملي ثانية كي نشعر بالاداة تعمل

الان جرب ان تشغل الصفحة عادي من خلال الضغط علي الصفحة كليك يمين ثم
View in Browser

واضغط علي الزر وسوف تشاهد ذلك

شرح الاجاكس بروجريس بار update progress bar in asp.net

وهنا لينك تحميل المثال البرمجي كامل