15-10-12, 11:01 AM
كاتب الموضوع : Ahmed Moosa
بسم الله الرحمن الرحيم
والحمد لله رب العالمين
إستخدام أكثر من Update Panel فى الصفحة الواحدة
الشكل النهائى الذى سنصل إليه
"تعثر تحميل الصورة على الموقع "
بسم الله الرحمن الرحيم
والحمد لله رب العالمين
إستخدام أكثر من 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#
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]
أبدع
ما رأيك ان تستخدم هذا الدرس فى عمل لوحة إعلانات تحدث نفسها تلقائياً . أو أن تستخدمه فى عرض شريط أخبار كل خبر على حده يظهر تلقائياً .
أو أن تستخدمه فى كتابة التعليقات لموضوعاتك فى موقعك الخاص.
أو أن تستخدمه فى عرض أخر الموضوعات فى مدونتك أو موقعك .
أو أن تستخدمه فى .........................
إلى هنا نصل نهاية الدرس و الحمد لله رب العالمين