[RaggiTech]

كاتب الموضوع : Ahmed Moosa



بسم الله الرحمن الرحيم

والحمد لله رب العالمين

إستخدام أكثر من Update Panel فى الصفحة الواحدة

الشكل النهائى الذى سنصل إليه

"تعثر تحميل الصورة على الموقع "

"للمعرفة "
- يتم تنفيذ هذا الدرس بإستخدام تقنية Ajax . فى Visual Web Developer أو Visual Studio .

الأهدف :-
- معرفة كيفية إستخدام Update Panel .
- معرفة كيفية تحديث Update Panel حسب الحدث .


فكرة العمل :-
- تحديث الوقت حسب الحدث الذى نطلبه . وهو كما فى الصورة عند الضغط على أى Button .


الخطوات :-

1- قم بفتح قائمة File وأختر منها New وإختر منها Web Site .
2- تظهر لك نافذة إختر منها ASP.Net Ajax Enabled Web Site .
3- قم بإدراج Update Panel مرتين .
4-قم بإدراج Label فى كل Update Panel .
5- قم بإدراج Button فى كل Update Panel .
6 –إذهب إلى كود التصميم المسمى (Source) وأضبط فيه الخصائص التالية :-

كود :

[color=#000000][COLOR=#0000bb] [/color][color=#007700]<[/color][color=#0000bb]div style[/color][color=#007700]=[/color][color=#dd0000]"text-align:center ; border-style:dashed "[/color][COLOR=#007700]>
     <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel ID[/color][color=#007700]=[/color][color=#dd0000]"UpdatePanel1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]UpdateMode[/color][color=#007700]=[/color][color=#dd0000]"Conditional" [/color][COLOR=#007700]>
          <[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
             <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Label ID[/color][color=#007700]=[/color][color=#dd0000]"Label1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][COLOR=#007700]/>                        
          </[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
          <[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
             <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]AsyncPostBackTrigger ControlID[/color][color=#007700]=[/color][color=#dd0000]"Button1" [/color][color=#0000bb]EventName[/color][color=#007700]=[/color][color=#dd0000]"Click" [/color][COLOR=#007700]/>
          </[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
       </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Button ID[/color][color=#007700]=[/color][color=#dd0000]"Button1" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"Update First" [/color][COLOR=#007700]/>
    </[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>
    <[/COLOR][color=#0000bb]br [/color][COLOR=#007700]/>          
    <[/COLOR][color=#0000bb]div style[/color][color=#007700]=[/color][color=#dd0000]"text-align:center ; border-style:dashed "[/color][COLOR=#007700]>
       <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel ID[/color][color=#007700]=[/color][color=#dd0000]"UpdatePanel2" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]UpdateMode[/color][color=#007700]=[/color][color=#dd0000]"Conditional"  [/color][COLOR=#007700]>
           <[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
               <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Label ID[/color][color=#007700]=[/color][color=#dd0000]"Label2" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][COLOR=#007700]/>
               <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]Button ID[/color][color=#007700]=[/color][color=#dd0000]"Button2" [/color][color=#0000bb]runat[/color][color=#007700]=[/color][color=#dd0000]"server" [/color][color=#0000bb]Text[/color][color=#007700]=[/color][color=#dd0000]"Update Second" [/color][COLOR=#007700]/>
           </[/COLOR][color=#0000bb]ContentTemplate[/color][COLOR=#007700]>
           <[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
              <[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]AsyncPostBackTrigger ControlID[/color][color=#007700]=[/color][color=#dd0000]"Button2" [/color][color=#0000bb]EventName[/color][color=#007700]=[/color][color=#dd0000]"Click" [/color][COLOR=#007700]/>
           </[/COLOR][color=#0000bb]Triggers[/color][COLOR=#007700]>
       </[/COLOR][color=#0000bb]asp[/color][color=#007700]:[/color][color=#0000bb]UpdatePanel[/color][COLOR=#007700]>                
</[/COLOR][color=#0000bb]div[/color][COLOR=#007700]>  
[/COLOR][color=#0000bb][/color][/COLOR]

تحليل بعض الكود

-UpdateMode :- وتحدد أن التحديث يكون بالشرط الذى نحدده فى الـ Triggers .
-Triggers :- وفيها نعرف الأداة التى سنستخدمها فى عملية التحديث وهنا عرفنا أنه هو الـ Button وفيها أيضاً قمنا بتعريف الحدث الذى سنستخدمه وهو هنا Click .
-لا يشترط أن تكون المسئولة داخل الأداة Update Panel أو خارجها .
-هناك الجزء المعرف بـ Style داخل الأمر div فلا تبالى به وضع تنسيقاً من إبداعك .

أماعن كود C# أو VB فلن نستخدمه إلا لعرض الوقت فى Label1 و Label 2 .

C#

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]protected [/color][color=#0000bb]void Page_Load[/color][color=#007700]([/color][color=#0000bb]object sender[/color][color=#007700], [/color][color=#0000bb]EventArgs e[/color][COLOR=#007700])
    {
        [/COLOR][color=#0000bb]Label1[/color][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]DateTime[/color][color=#007700].[/color][color=#0000bb]Now[/color][color=#007700].[/color][color=#0000bb]ToLongTimeString [/color][COLOR=#007700]();
        [/COLOR][color=#0000bb]Label2[/color][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]DateTime[/color][color=#007700].[/color][color=#0000bb]Now[/color][color=#007700].[/color][color=#0000bb]ToLongTimeString [/color][COLOR=#007700]();
    }  
[/COLOR][color=#0000bb][/color][/COLOR]

Vb

كود :

[color=#000000][COLOR=#0000bb][/color][color=#007700]Protected [/color][color=#0000bb]Sub Page_Load[/color][color=#007700]([/color][color=#0000bb]ByVal sender [/color][color=#007700]As [/color][color=#0000bb]Object[/color][color=#007700], [/color][color=#0000bb]ByVal e [/color][color=#007700]As [/color][color=#0000bb]System[/color][color=#007700].[/color][color=#0000bb]EventArgs[/color][color=#007700]) [/color][color=#0000bb]Handles Me[/color][color=#007700].[/color][COLOR=#0000bb]Load
        Label1[/COLOR][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]DateTime[/color][color=#007700].[/color][color=#0000bb]Now[/color][color=#007700].[/color][color=#0000bb]ToLongTimeString[/color][COLOR=#007700]()
        [/COLOR][color=#0000bb]Label2[/color][color=#007700].[/color][color=#0000bb]Text [/color][color=#007700]= [/color][color=#0000bb]DateTime[/color][color=#007700].[/color][color=#0000bb]Now[/color][color=#007700].[/color][color=#0000bb]ToLongTimeString[/color][COLOR=#007700]()
[/COLOR][COLOR=#0000bb]End Sub  
[/COLOR][/COLOR]

أبدع

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

إلى هنا نصل نهاية الدرس و الحمد لله رب العالمين