الموسوعة التعليمية الكبرى

ASP.Net الدرس االول

..اخوتي واخواتي االفاضل

مع ASP.NETاقدم لكم سلسلة الدروس التعليمية الخاصة بتعليم برمجة وتصميم مواقع الوب باستخدام VB.net ...

لتي اليمكن حصرها في بعد التطور الذي شهده العالم التقني في مجال تطور الوب و المعلومات التي يقدمها وا .. مجال معين دون اخر ، وانما مواقع الوب باتت تتنوع وتقدم مختلف العلوم و المعارف

لكن تطور مواقع الوب وظهور متطلبات اخرى غير مجرد .. HTMLوقد آانت مواقع الوب سابقا التتعدى لغة اعد مصمم مواقع الوب على انتاج مواقع عرض المعلومات ، فقد آانت البذرة االساسية لظهور تقنيات اخرى تس

.. وب ديناميكية ذات قوة و متانه & PHP(وربما اخر ما وصل اليه التطور من قوة و سهولة وشيوعا في انتاج مواقع الوب الديناميكية هو

ASP (منتج ، لكن شرآة مايكروسوفت انتجت انتاجها القوي و الذي تجاوزت فيه جميع منتجاتها السابقة وهذا الواما االن وحتى آتابة هذا الدرس فقد صدرت تقنية االجاآس الجديدة و التي زادت .. ASP.NETهو

.. االمكانيات في مجال تصميم و برمجة مواقع الوب مع ASP.NETسنعمد من خالل هذه السلسلة التعليمية على شرح آيفية برمجة وتصميم مواقع الوب باستخدام

. ..VB.NETلغة البرمجة خالل شرح .. االصدار االحترافي Visual Studio 2005وتجدر االشارة الى انني ساقوم باستخدام االصدارة

. الدروس التعليمية .. وساحاول ان اتوخى قدر االمكان السهولة في شرح الدروس

بل الزيادة عليه آما انه ستكون فواصل زمنية ثابتة بين درس واخر من اجل ان يتسنى للطالب تطبيق الدرس ، .. وتجربة امكانيات اخرى اآثر من االمكانيات المشروحة في الدرس نفسه

اخيرا

.. ارجو ان يستفاد الجميع من هذه السلسلة التعليمية وينتفعوا بها البريد االلكتروني الموضح ادناه من اجل االستفسارات و االسئلة ، راجيا ان وبامكانكم مراسلتي على عنوان

.. ون االسئلة او االستفسارات هي ضمن حدود الدرس وضمن مادته العلمية تك

دعائي للجميع بالتوفيق

المهندس عـــدي ياســين

بكالوريوس هندسة حاسوبengauday@hotmail.com

2007 / 7 / 21 –السبت

1

...بداية الدرس :لرئيسية نقوم بتشغيل بيئة فيجوال ستوديو دوت نت لتظهر لنا النافذة ا

:Create المقابلة لـ …Web Sitوالجل ان نقوم بانشاء موقع وب جديد ، ننقر على الكتابة .. او يمكننا استخدام طريقة اخرى النشاء موقع وب جديد من خالل

File New Web Sit… :آما موضح في الصورة التالية

2

:ستظهر لنا النافذة التالية

، ونحدد مكان خزن 1 من الرقم ASP.NETلموضحة في الصورة اعاله ، حيث نختار موقع نتتبع االرقام ا

..4 من OK، واخيرا ننقر على 3 ، ونحدد لغة البرمجة المستخدمة من 2الموقع من الرقم

..سيتم انشاء موقع جديد وتظهر لنا النافذة التالية

3

:حيث تشير االرقام الى .نافذة الكود : 1الرقم .نافذة التصميم : 2الرقم .صندوق االدوات : 3الرقم .نافذة التصميم : 4الرقم . نافذة الكود : 5الرقم .موقع الوب وملفاته : 6الرقم .. نافذة الخصائص : 7الرقم

من نالحظ من خالل شرح االرقام الموجودة في الصورة اعاله انه توجد اآثر من نافذة تصميم واآثر :مالحظة

في الحقيقة ان نافذة التصميم هي نافذة واحدة آما سنتعلم خالل هذا الدرس و الدروس القادمة ، اما .. نافذة آود في صفحة خاصة به نصل اليها من خالل VB.netحيث بامكاننا ان نعزل آود لغة .. نافذة الكود فهي نافذتان

. فهي نافذة الكود المصدري 1ل اليها من خالل النقر على ، اما النافذة التي نص5نقر الزر المكتوب فوقه الرقم

او النقر على الزر الموجود 2االن نذهب الى نافذة التصميم من خالل النقر على الكتابة الموجودة اسفل الرقم .4اسفل الرقم

.. حة ستظهر لنا نافذة التصميم حيث يمكننا وضع االدوات والكتابات وغيرها من عناصر تصميم الصف

: على الصفحة بالشكل التالي Button و االداة Labelنقوم بوضع نسخة من االداة

يتم وضع االدوات على نافذة العمل من خالل سحب االدوات من صندوق االدوات وافالتها على نافذة العمل او

.. التصميم من Enter وننقر مفتاح Labelداة نضع المؤشر عند نهاية اال.. نالحظ ان االداتين آالهما على سطر واحد

..Label اسفل عنصر التسمية Buttonلوحة المفاتيح ليصبح الزر

.. سينزل الزر بمقدار سطر واحد Enterحيث اننا آلما نقرنا مفتاح

. سنتعلم في الدروس القادمة آيفية استخدام الجداول من اجل ترتيب مواقع االدوات ضمن الصفحة : مالحظة

) .. 1التي آان يظهر عليها الرقم ( الموجودة اسفل الصفحة sourceننقر على .. داية آب

.. ستفتح لنا نافذة الكود المصدري

:ومن ضمن الكود المكتوب نالحظ الكود التالي <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> <br /> <asp:Button ID="Button1" runat="server" Text="Button" /></div>

الى النافذة ، اما الكود االخير فهو يضير Labelحيث ان السطر االول من الكود يوضح طريقة اضافة االداة .. الى الصفحة Buttonالزر

4

.. داتين فهو من اجل اضافة سطر بين اال ) </ br>(اما السطر الموجود في المنتصف

وحدد لنا النص ID ، انه حدد لنا االسم البرمجي Labelنالحظ من خالل آود اضافة االداة عنصر التسمية وهذا هو ... ) server( فهو يوضح ان هذه االداة هي اداة خادم وب runatاما .. Textالمكتوب داخل االداة

.. HTML و ادوات ASP.netالفرق بين ادوات

.. HTMLرة اآثر عندما نتعلم استخدام ادوات ستتوضح الصو

..Text في الخاصية Labelبدل العبارة ) Hello ,this is my test( االن لنكتب الجملة <asp:Label ID="Label1" runat="server" Text="Hello ,this is my test"></asp:Label>

..ل االنتقال من نافذة آود المصدر الى نافذة التصميم من اجSource الموجودة بالقرب من Designوننقر على .. قد آتبت في عنصر التسمية ) Hello ,this is my test( نالحظ ان الجملة

.. Propertiesآذلك يمكننا التحكم بصورة اآثر بساطة في خصائص االداوت من خالل نافذة االدوات .. من نافذة الخصائص ونكتب فيها Textم نغير قيمة الخاصية ثLabelنتاآد من اننا حدد اداة عنصر التسمية

مرحبا ، هذه صفحة تجريبية

.. نالحظ ان الجملة آتبت في عنصر التسمية

من خالل تحديدها وآتابة النص الذي نريده ان Buttonآذلك يمكننا ان نفعل الشئ نفسه من اجل اداة الزر .. Textية يظهر عليها من خالل اسناده الى الخاص

: تجربة الصفحة وتشغيل خادم الوب

. تحتاج الى خادم وب من اجل تشغيلها بصورة صحيحة ASP.Netان الصفحات التي نقوم بانشاؤها باستخدام ولكن االن قامت شرآة .. IISفي االصدارات السابقة آنا نقوم بعمل مجلد وهمي ليتم تشغيله من قبل

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

نالحظ انه بامكاننا تشغيل واختبار الصفحة من خالل الذهاب الى قائمة

Debug ومن ثم اختيار االمر Start Without Debugging.

غيل خادم الوب االفتراضي ومن ثم فتح عندها ستقوم بيئة التشغيل بتش .مستعرض االنترنت و عرض الصفحة

سنالحظ بجانب ساعة الحاسوب ايقونه مصغرة لخادم الوب

خادم الوب

5

ونالحظ ان الصفحات التي يتم انشاؤها باستخدام ASP.Net تاخذ الالحقة .aspx

Default.aspxوهنا الصفحة هي

.. Button و النص على الزر Labelالتي آتبناها في عنصر التسمية نشاهد عبارة الترحيب تالحظ انه لن يحدث شئ ، السبب في ذلك اننا لم نقم بكتابة اي آود ليتم تنفيذه عند ... االن حاول النقر على الزر

.. النقر على الزر .. VS.netونرجع الى بيئة .. نغلق متصفح الوب

.. وم بعرض عبارة معينة على عنصر التسمية عند نقر الزر االن سنكتب آود مبسط يق

.. ابسط طريقة لكتابة حدث النقر للزر هو بالنقر على الزر نقرا مزدوجا ستفتح لنا نافذة الكود ، لكنها هذه المرة تختلف عن نافذة آود المصدر ، انها واجهة مخصصة لكتابة الكود بلغة

.. فيجوال بيسك دوت نت :ود المطلوب لتبدو الكود الكلي آما يلي نكتب الك

Partial Class _Default Inherits System.Web.UI.Page Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = "This is a Test" End Sub End Class

”Label1.Text = “This is a Test: الكود الذي آتبناه هو التابعة لعنصر Testالى الخاصية ) This is a Test(بذلك عندما ينقر المستخدم على الزر فاننا نسند الجملة

. Labelالتسمية ..لوحة المفاتيح من Ctrl + F5نقوم االن بتجربة الكود آما تعلمنا سابقا او من خالل نقر مفتاحي

..عند النقر على الزر فان الصفحة تستجيب لنا بعرض العبارة الجديدة

الى هنا ناتي الى نهاية درسنا ، في الدروس القادمة سنتعلم آيفية تغيير الخصائص االخرى لالدوات وآيفية .. استخدام ادوات اخرى

.. ارجو ان تكونوا قد استفدتم من الدرس

للجميع بالتوفيق دعائي

6

الموسوعة التعليمية الكبرى

ASP.Net الثانيالدرس

..االخوة و االخوات االفاضل ..ASP.NET & VB.NETمرحبا بكم في الدرس الثاني من دروس تعليم برمجة وتصميم مواقع الوب باستخدام

االدوات على النموذج وآيف نقوم بانشاء موقع وب جديد وآذلك وضعVS.NETتعلمنا في الدرس السابق آيفية تشغيل بيئة .. وآتابة آود بسيط جدا من اجل اظهار جملة معينة على عنصر التسمية

... TextBoxسنتعلم في هذا الدرس آيفية التحكم بخصائص االدوات وآيفية استخدام صندوق النص .. ونقوم بفتح موقع الوب الذي انشأناه في الدرس السابق Visual Studio.NETنشغل بيئة

ومن ثم نتجه الى خصائص هذه االداة .. من خالل نقره بزر الفارة االيسر نقرة واحدة فقط Label1قوم بتحديد عنصر التسمية ن .. في نافذة الخصائص

، وهي التي تحدد االسم البرمجي لالداة والذي سيتم استخدامه من اجل االشارة الى االداة عند آتابة الكود، IDاول خاصية هي "Label1.Text = "Hello, This is a test: حظنا في الدرس السابق عندما آتبنا آما ال

Label1 وهو IDحيث اننا اشرنا الى اداة عنصر التسمية من خالل اسمها البرمجي المسند الى الخاصية .من ثم الخاصية المطلوبة و(.) واما من اجل الوصول الى خصائص اداة معينة فيمكنا ذلك من خالل آتابة اسم االداة ومن ثم

بعد اسم االداة ، فان بيئة التطوير تعرض لنا قائمة بخصائص و طرق هذه االداة ويمكننا ان (.) ونالحظ اننا عندما نقوم بكتابة .. نختار ما نشاء منها ، وهذا اليجعلنا بحاجة الى حفظ جميع اسماء الخصائص

آثرة الممارسة وآتابة الكود ، لذلك فكل ما عليك االن هو فهم امكانيات آل ان حفظ اسماء الخصائص سيتم من خالل: مالحظة .خاصية

م :وضحة في الصورة ادناه

في البداية سنتحدث عن الخصائص االربعة ال

.لون خلفية االداة

. لون االطار المحيط باالداة .نمط االطار المحيط باالداة

.عرض االطار المحيط باالداة

نالحظ انه سيظهر لنا على الجانب مربع داخله سهم صغير .. BackColor بالنقر على المربع االبيض المقابل للخاصية نقوم :آما موضح ادناه في الصورة

..عند النقر حيث يوجد المؤشر في الصورة اعاله ستظهر لنا قائمة بااللوان المتاحة والتي يمكننا اسنادها الى هذه الخاصية

عليه نخت

1

.ار اي لون نريده ان يكون لون الخلفية الداة عنصر التسمية من خالل النقر

لكننا نالحظ اننا عندما نقوم .. من اجل تحديد لون االطار المحيط باالداة Border Colorونفس الشئ يمكننا عمله مع الخاصية اخترنا احدى االختيارات التي توفرها لنا بيئة التطوير عند آذلك لو.. بتحديد لون معين لالطار فلن نشاهد اي اطار يحيط باالداة

.. من اجل تحديد نوع االطار المحيط باالداة فلن نشاهد اي اطار يحيط باالداة BorderStyleالخاصية ائص اي اليوجد اي اطار فلذلك المعنى من تحديد اي من الخص.. ان السبب في ذلك ان عرض االداة المحيط باالداة هو صفر . السابقة الذآر والتي تختص باالطار النه اليوجد اطار اصال

.. 3 نقوم بادخال قيمة رقمية ولتكن مثال BorderWidthفي الحقل المقابل للخاصية ..نالحظ انه ظهر لنا اطار يحيط باالداة ونالحظ تاثير الخصائص التي حددناها مسبقا والخاصة باالطار

: ونرتب مواقع االدوات من خالل سحبها وافالتها على الصفحة لتبدو آما يليTextBoxداة االن نقوم باظافة اال

. ومن ثم عنصر التسمية Buttonحيث يكون صندوق النص في االعلى و من اسفله الزر

لى عنصر التسمية الخطوة التالية هي اننا سنمكن المستخدم من آتابة نص في صندوق النص وعند النقر على الزر سيظهر النص ع..

التابعة لعنصر التسمية ستكون مساوية لقيمة الخاصية Textوبسورة ابسط ، عندما ينقر المستخدم على الزر فان قيمة الخاصية Text التابعة لصندوق النص ..

: ننقر نقرا مزدوجا على الزر ونكتب الكود التالي Label1.Text = TextBox1.Text

.. من لوحة المفاتيح Ctrl+F5لصفحة من خالل النقر على مفتاحي االن نقوم بتجربة ا .نقوم بادخال نص معين وثم ننقر على الزر ، نالحظ ور النص في عنصر التسمية

..View Sourceواخترنا من القائمة المنبثقة االمر .. واالن لو نقرنا على الصة بالزر االيمن للفارة

.. HTMLرها على شكل ادوات نالحظ ان االدوات تم تصيي ..آذلك نشاهد آيف تم اسناد الخصائص لكل اداة من االدوات

2

<input name="TextBox1" type="text" value="الموسوعة التعليمية الكبرى" id="TextBox1" />&nbsp; <br /> <br /> <input type="submit" name="Button1" value="انقر هنا " id="Button1" /> <br /> <br /> <span id="Label1" style="display:inline-block;background-color:Yellow;border-color:Black;border-width:3px;border-style:Double;">الموسوعة التعليمية الكبرى</span></div>

.. ن اجل ان نتحكم ببعض خصائص صندوق النص بصورة برمجية االن نعدل الكود م

:سيصبح الكود النهائي لحدث النقر على الزر آما يلي Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Label1.Text = TextBox1.Text With TextBox1 .BorderStyle = BorderStyle.Dotted .BorderWidth = 3 End With End Sub

.. وننقر على الزر بعد ان نكتب داخل صندوق النص فتبدو النتيجة آما يلي Ctrl+F5نقوم االن بتشغيل الصفحة من خالل

.. ا بنمط االطار المحيط بصندوق النص وآذلك عرض االطار من خالل الكود السابق ، تحكمن

لخاصية عرض االطار ، آذلك يمكننا ان نستخدم اسلوب اخر من اجل تحديد 3نالحظ من خالل الكود السابق اننا اسندنا القيمة ..نستبدل الكود السابق الخاص بعرض االطار بالكود التالي .. عرض االطار

.BorderWidth = Unit.Pixel(3) .عند تجربة الكود من خالل عرض الصفحة في المتصفح ونقر الزر ، نالحظ اننا نحصل على النتيجة نفسها

.. االن نظيف سطري الكود التاليين الى الكود السابق .Width = 250

.Height = 20 .. صحيحة وقد اسندنا لهما قيم رقمية .. وهما يحددان ارتفاع وعرض صندوق النص

..عند تجربة الصفحة نالحظ النتيجة بعد النقر على الزر

:آذلك يمكننا ان نحدد العرض او االرتفاع بنفس االسلوب الذي استخدمناه مع عرض االطار وآما يلي

.Width = Unit.Pixel(250) :آما يلي .. او يمكننا ان نحدد العرض و االرتفاع على شكل نسبة مئوية

.Width = Unit.Percentage(30)

: اما االن نقوم باظافة اربعة ازرار الى الصفحة لتبدو آما يلي بعد االنتهاء من تصميمها

3

حيث سنقوم من خالل االزرار الموضحة بتفعيل صندوق النص او ايقاف تفعيله ، وآذلك اخفاء او اظهار صندوق

. النص

.. االزرار االربعة نبدا االن بكتابة الكود الخاص ب :الزر اخفاء صندوق النص : أوال

Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click TextBox1.Visible = False End Sub

:الزر اظهار صندوق النص : ثانيا Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click TextBox1.Visible = True End Sub

:الزر تفعيل صندوق النص : ثالثا Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click TextBox1.Enabled = True End Sub

:الزر عدم تفعيل صندوق النص : رابعا Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click TextBox1.Enabled = False End Sub

حيث سيتم اخفاء او اظهار صندوق النص تبعا للزر الذي تم .. على االزرار للتاآد من عملها بنجاح وننقر.. االن نجرب الصفحة .. نقره ، وآذلك عمليه تمكين او تفعيل صندوق النص او عدمها

.. الى هنا انتهى درسنا

.. ارجو ان تكونوا قد استفدتم من الدرس

دعائي للجميع بالتوفيق

المهندس

ي ياســـينعــد بكالوريوس هندسة حاسوب

engauday@hotmail.com

4

2007 / 7 / 22: االحد

الموسوعة التعليمية الكبرى

ASP.Net الثالثالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام :في هذا الدرس سنتعلم

RadioButtonListاستخدام االداة ** CheckBoxListاستخدام االداة **

.. دة الى موقعنا صفحة جدياضافةنبدا درسنا ب : آما موضح في الصورة ادناه …Add New Item نختار االمر Websiteمن القائمة

..Ctrl + Shift + Aاو من خالل مفاتيح االختصار

:او باستخدام الطريقة الثالثة آما موضح في الصورة ادناه

:عندها ستظهر لنا النافذة التالية

:ي الصورة اعاله حيث ان نتتبع االرقام الموضحة ف

1

..يشير الى اننا سنقوم بانشاء نموذج وب : 1الرقم

.نحدد اسم الصفحة الجديدة : 2الرقم .نوع اللغة المستخدمة : 3الرقم .نبين ان الكود ستوضع في ملف منعزل عن الصفحة : 4الرقم . من اجل اتماما اضافة الصفحة الجديدة Addننقر على : 5الرقم

..Solution Explorerنالحظ ظهور الصفحة في مستعرض الحلول

.Default2.aspx.vbحيث ان الكود سيتم خزنه داخل

وثم نضيف نسخة من RadioButtonList ومن اسفلها نضيف نسخة من االداة TextBoxاالن نقوم باضافة نسخة من االداة .. آما يلي .. Buttonاالداة

حيث يظهر لنا مربع Item من خالل النقر على الحقل المقابل للخاصية RadioButtonListة عناصر الى االداة االن نقوم باضاف

.. صغير ننقر عليه لتظهر لنا النافذة الخاصة باضافة عناصر

:ما يلي لها لتبدو آTextمن خالل النافذة المخصصة الضافة عناصر جديدة نضيف مجموعة من العناصر ونعدل خاصية الـ

2

: حيث ستكون النتيجة آما يلي OKاخيرا ننقر على زر

بمعنى ان نقر المستخدم .. االن مهمتنا آتابة آود يقوم بعرض الخيار الذي يختاره المستخدم من لغات البرمجة داخل صندوق النص

. في صندوق النص VB.NET ثم نقر الزر سيتم عرض VB.NETعلى .. من اجل اضافة الكود المطلوب Buttonالزر على ننقر نقرا مزدوجا

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim myList As ListItem For Each myList In RadioButtonList1.Items If myList.Selected = True Then TextBox1.Text = myList.Text End If Next End Sub

..قبل تجربة الصفحة ، لنتحدث قليال عن الكود عناصر من اجل التنقل بين جميعFor .. Eachثم استخدمنا .. على انه عنصر قائمة myListفي البداية قمنا بتعريف المتغير

. RadioButtonListالقائمة الموجودة في االداة .. وعندما نجده نجعل النص في صندوق النص مساويا للنص في العنصر المحدد ... بعد ذلك قمنا بتفحص العنصر الذي تم تحديده

.. Ctrl+F5اما االن نقوم بتجربة الصفحة من خالل النقر على

نقوم باختيار عنصر معين ثم ننقر .. RadioButtonListآثر من عنصر وهذه احدى ميزات االداة نالحظ اننا اليمكننا ان نختار ا .. على الزر نالحظ ظهور نص الزر داخل صندوق النص

.. ربما نود في بعض الحاالت ان نمكن المستخدم من اختيار اآثر من عنصر في قائمة عناصر معينة

.. CheckBoxListة سنجرب ذلك من خالل استخدام االدا : و عنصر تسمية ونضيف عناصر لتبدو النتيجة آما يلي CheckBoxListنقوم االن باضافة نسخة من االداة

3

.. سيتم عرض الشرآات التي يتم اختيارها داخل عنصر التسمية .. االن سنعدل الكود الخاص بالزر

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim myList As ListItem For Each myList In RadioButtonList1.Items If myList.Selected = True Then TextBox1.Text = myList.Text End If Next For Each myList In CheckBoxList1.Items If myList.Selected = True Then Label1.Text += "</br>" & myList.Text End If Next End Sub

.. RadioButtonListعن الكود الخاص باالداة الكود اليفرق .. نالحظ ظهور العناصر المحدد في عنصر التسمية .. نجرب االن صفحة ، نقوم باختيار شرآة واحدة او اآثر وننقر على الزر

. نالحظ ظهور ؟؟؟ خطا .. نختار شرآات اخرى وننقر الزر مرة اخرى .. دة آتابة اسماؤها داخل عنصر التسمية ان الشرآات السابقة تم اعا

:Button1نكتب سطر الكود التالي قبل جميع اسطر الكود داخل حدث النقر التابع للزر Label1.Text = “ الشرآات المفضلة لديك هي“

فراغ النص الموجود االن نجرب الصفحة ونالحظ عدم ظهور هذه المشكلة من جديد والسبب اننا آل مرة يتم نقر الزر فيها نقوم با ) .. الشرآات المفضلة لديك هي ( ونسند اليه النص Label1في عنصر التسمية

هذه العناصر اضافةونقوم ب .. CheckBoxListاالن سنقوم بخطوة اخيرة وهي اننا سنقوم بحذف العناصر الموجودة داخل االداة

.. من خالل الكود .. Itemsة لتحديدها ، ثم ننقل على المربع الصغير الموجود في الحقل المقابل لـ من اجل حذف العناصر ، ننقر على االدا

. حتى يتم حذف جميع العناصر Removeومن النافذة نقوم باختيار عنصر وننقر الزر حميل ونكتب الكود التالي داخل حدث ت. ننقر على الصفحة نقرا مزدوجا .. االن ومن اجل اضافة العناصر من خالل الكود

.الصفحةProtected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load With CheckBoxList1.Items .Add("Microsoft") .Add("IBM") .Add("Borland") .Add("GenX") End With End Sub

..ونختار شرآات معينه ومن ثم ننقر على الزر .. االن نقوم بتجربة الصفحة .. CheckBoxListنالحظ ظهور خطا وهو ان اسماء الشرآات تكررت داخل

4

.. وآلما نقرنا الزر فان اسماء الشرآات تتكرر

: من اجل معالجة هذا الخلل نعدل الكود ليصبح آما يلي If Me.IsPostBack = False Then With CheckBoxList1.Items .Add("Microsoft") .Add("IBM") .Add("Borland") .Add("GenX") End With End If

.. آات وننقر على الزر فنالحظ عدم حدول اي خلل وتبقى اسماء الشرآات نقسها ونقوم باختيار اسماء الشر.. االن نجرب الصفحة ...نجرب اختيار اسماء شرآات جديدة وآذلك نحدد لغة برمجة معينة وننقر الزر ، نالحظ ان الكود يعمل بنجاح ودون اي خلل

..نغلق المتصفح ونرجع الى بيئة التطوير

حيث ان هذا الكود يتاآد ان آانت الصفحة قد تم تحميلها اآثر من مرة او انها Me.IsPostBack عند تعديل الكود ، فاننا اضفنا فهذا معناه ان الصفحة تم ارسالها الى السيرفر واال فهذا معناه اننا نشغل الصفحة .. Trueفان آانت النتيجة هي .. المرة االولى

.. الول مرة .. فقط عند تحميل الصفحة وعندما تكون غير مرسلة الى السيرفر CheckBoxListداة بذلك فاننا نقوم باضافة العناصر الى اال

، نقوم بتحديد الزر Buttonتبقى لدينا امر مهم وهو اضافة نص للزر ، فليس من المناسب ان يكون النص المعروض فيه هو

.. التابعة للزر Textعند الخاصية ) انقر هنا ( ونكتب له النص في الحقل المقابل ( من اجل ان يكون عنوان للصفحة) الموسوعة التعليمية الكبرى( ر على الصفحة وندخل لها النص آذلك ننق

.. Untitled ، فليس من المعقول ان نقوم بتصميم موقع تعرض لنا احدى صفحاته العنوان ) Titleللخاصية

الى هنا انتى درسنا .. ومات الموجودة في الدرس ارجو ان تكونوا قد استفدتم من المعل

ارجو من الجميع تطبيق الدرس وتجنب عملية نسخ الكود ، حيث ان آتابة الكود باليد ترسخ المعلومات في الذهن اآثر من نسخه .. ولصقه

.آذلك ارجو ان يحاول الجميع تطوير الصفحة وتجربة الخصائص االخرى التي لم يتم شرحها في الدروس

التوفيق دعائي للجميع ب

المهندس عــدي ياســـين

بكالوريوس هندسة حاسوبengauday@hotmail.com

5

2007 / 7 / 23: االثنين

الموسوعة التعليمية الكبرى

ASP.Net رابعالالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام : نتعلم في هذا الدرس

.DroupDownListاستخدام االداة ** .التعامل مع االلوان ** .التعامل مع الخط **

.. Label و Button و نسخة من االداة DroupDownListونضع عليها نسختان من االداة .. فحة جديدة نقوم بانشاء ص :تبدو الصفحة بعد االنتهاء من تصميمها آما يلي

ا مهمتنا في هذا الدرس هي ان نقوم بادخال اسماء الوان في القائمة المنسدلة االولى و انواع مختلفة من انماط االطارات ، وعندم

.. يتم تطبيقها على عنصر التسمية .. يحدد المستخدم الخيارات التي يريدها .. سنقوم باضافة العناصر للقوائم المنسدلة من خالل الكود

:ننقر على الصفحة نقرا مزدوجا ونكتب الكود التالي لحدث التحميل للصفحة

1

.. Debug من لوحة المفاتيح لتشغيل الـ F5االن يمكننا تجربة الصفحة ولكن هذه المرة ننقر على الزر :ستظهر لنا النافذة التالية

.. OKنحدد الخيار االول و ننقر الزر

.. ستظهر لنا الصفحة ، ننقر على احدى القوائم المنسدلة ونرى العناصر التي فيها

.. ة االن نقوم بكتابة الكود الالزم السناد الخصائص المختارة الى عنصر التسمي

:ونكتب الكود التالي .. ننقر على الزر نقرا مضاعفا

2

وتبعا للخيار فاننا نحدد قيمة الخاصية التابعة لعنصر .. من اجل تحديد الخيار المطلوب Select Caseنالحظ اننا استخدمنا العبارة .. التسمية

..نالحظ تطبيق الخيارات على عنصر التسمية .. ونختار خيارات محددة من القوائم F5الصفحة بنقر لو قمنا بتجربة

:آما يلي .. CheckBoxنضيف االن ثالث نسخ من االداة

..ننقر على الزر نقر مزدوجا ونكتب الكود التالي في النهاية .. االن نقوم بكتابة الكود الالزم لتطبيق خصائص صناديق االختيار

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

..الى هنا وصلنا الى نهاية الدرس

.درس القادم ومعلومات جديدة نلتقي في ال.. ارجو ان تكونوا قد استفدتم من معلومات الدرس دعائي للجميع بالتوفيق

المهندس عــدي ياســـين

بكالوريوس هندسة حاسوبengauday@hotmail.com

3

2007 / 7 / 24: الثالثاء

الموسوعة التعليمية الكبرى

ASP.Net رابعالالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام :االلوان

.. تعلمنا في الدرس السابق لمحة سريعة حول آيفية التعامل مع االلوان . System.Drawing من فضاء االسماء Color تشير الى الكائة Colorان الخاصية

.. يمكننا التعامل مع االلوان بعدة طرق و 0 يتراوح بين Integerنقوم بتحديد آل قيمة برقم صحيح . ARGB(alpha,red,green,blue)باستخدام القيم اللونية **

) .ظاهرة ( لتكون غير شفافية 255 تمثل الشفافية لاللوان ، وعادة ما نسند لها القيمةalpha ، ان الخاصية 255

.. المعرفة مسبقا ) NET.(من خالل اسماء االلوان في **

.. HTMLباستخدام اسم لون ** .System.Drawingمن اجل التعامل مع االلوان يحتاج الى استيراد فضاء االسماء

.. Colorنقوم باضافة صفحة جديدة ونعطيها االسم ..Button و ثالث نسخ من االداة Label آما في الشكل ادناه باضافة نسخة من االداة نصمم الصفحة لتبدو

..سنقوم باضافة الكود الالزم الستخدام آل طريقة من الطرق السابقة الذآر في التعامل مع االلوان

:ARGBآود الزر Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click Dim alpha As Integer = 255, red As Integer = 0 Dim green As Integer = 255, blue As Integer = 0 Label1.ForeColor = System.Drawing.Color.FromArgb(alpha, red, green, blue) End Sub

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

. ليكون اللون ظاهر تماما 255اللون االخضر الن باقي القيم اسندنا لها القيمة صفر ،ما عدا قيمة الشفافية التي اسندنا لها القيمة . من اجل جعل لون الخط اخضر FromArgb(alpha, red, green, blue)بعد ذلك استخدمنا

:NET.آود الزر

Protected Sub Button2_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button2.Click Label1.ForeColor = Drawing.Color.Crimson End Sub

1

.. توفر لنا مجموعة آبيرة االلوان التي يمكننا استخدامها ونالحظ ان البيئة

:HTML Nameآود الزر Protected Sub Button3_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button3.Click Label1.ForeColor = System.Drawing.ColorTranslator.FromHtml("Blue") End Sub

.. او بامكاننا آتابة االسم مباشرة آما يلي

<asp:TextBox ForeColor ="Red" Text ="Test" ID ="txt" runat ="server" />

..او من خالل ادخال قيمة بالنظام السداسي عشر لتحديد اللون المطلوب <asp:TextBox ForeColor ="#ff50ff" Text ="Test" ID ="txt" runat ="server" />

..وننقر على االزرار الثالثة ، نالحظ تغير لون الخط لعنصر التسمية .. االن نقوم بتجربة الصفحة

:Fontsالخطوط .System.Web.UI.WebControls: المنحدر من فضاء االسماء FontInfo تشير الى الكائن Fontالخاصية

. و الحجم و النمط والذي يمتلك عدة خصائص تحدد االسم :نضيف مجموعة اخرى من االدوات الى الصفحة لتبدو آما يلي

.. االن سنتعلم آيفية التحكم باسم اللون او نمطه او حجمه

2

:Font-Nameآود الزر Protected Sub Button4_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button4.Click Label1.Font.Name = "Tahoma" End Sub

. Label1 لخاصية اسم الخط التابعة لعنصر التسمية Tahomaحيث هنا اسندنا اسم الخط

:Font-Boldآود الزر

Protected Sub Button5_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button5.Click Label1.Font.Bold = True End Sub

من اجل تفعيل او ) .. True , False(الى احدى القيمتين ) Bold,Italic, Strikeout, Underline(حيث تحتاج الخصائص .. ايقاف تفعيل الخاصية

..هنا عند النقر على الزر ، فان الخط يصبح مثخن

:Font-Size-1آود الزر Protected Sub Button6_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button6.Click Label1.Font.Size = FontUnit.Larger End Sub

.. لحجم الخط Largerهنا اسندنا القيمة ) .Smaller , Small ,Medium ,Large ,Larger( يمكننا استخدام مجموعة من القيم لهذا النمط من التعامل مع حجم الخط

:Font-Size-2آود الزر

Protected Sub Button7_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button7.Click Label1.Font.Size = FontUnit.Point(14) End Sub

.. ديد حجم الخط هنا نسند قيمة رقمية من اجل تح

.. االن نقوم بتشغيل الصفحة وتجربة االزرار ومالحظة تاثر خط عنصر التسمية من خالل النقر على االزرار

:Focusالترآيز

... Default Focusيمكننا تحديد خاصية الترآيز لعنصر معين من خالل الخاصية <form id="form1" defaultfocus ="txt" runat="server">

... صندوق نص قمنا بانشاءه مسبقا txtحيث يمثل . عند تشغيل الصفحة فان الترآيز على صندوق النص "defaultfocus ="txtنالحظ عند اضافة الخاصية

3

، فمثال لو اسندنا لمفتاح الوصول الخاص بـصندوق النصAccess Keyآذلك يمكننا التحكم بالترآيز من خالل مفتاح الوصول txt القيمة A عندها عند النقر على ، Alt+A ينتقل الترآيز الى txt ..

.نالحظ ان الترآيز ينتقل الى صندوق النص .. Alt+Aوننقر على مفتاحي .. االن نقوم بتشغيل الصفحة

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

AssociatedControlID .. وآذلك نحدد االداة التي سيرتبط بها عنصر التسمية عند استخدام الترآيز .. عند العنصر txt لمفتاح الوصول لعنصر التسمية ونحدد A وندخل القيمة txtنقوم االن بحذف مفتاح الوصول من صندوق النص

.. الذي سينتقل اليه الترآيز

.. من لوحة المفاتيح فنالحظ انتقال الترآيز الى صندوق النص Alt+A وننقر على الزرين F5االن ننقر مفتاح

) :Default Button(الزر الفتراضي

عندما ينقر ) ينقر ( ان الزر االفتراضي هو الزر الذي . يوفر لنا خاصية الزر االفتراضي في صفحات الوب ASP.NETان . من لوحة المفاتيح Enterمفتاح المستخدم على

فعندما ينقر .. هو الزر االفتراضي ) ارسال (آمثال ، ان آانت صفحة الوب تحتوي على نموذج ، ونحن نريد ان نجعل الزر . سيحدث لهذا الزر Button.Click من لوحة المفاتيح فان الصفحة سيتم ارسالها و الحدث Enterالمستخدم على المفتاح

فيجب اسناد خاصية الزر االفتراضي لصفحة الوب مع اسم الزر المراد جعله هو الزر .. نقوم بعمل زر افتراضي من اجل ان :االفتراضي

<form id="form1" defaultbutton ="Button1" runat="server"> .Enterم على مفتاح هو الزر االفتراضي و الذي يحدث حدث النقر له عندما ينقر المستخدButton1عندها سيكون الزر

..الى هنا وصلنا الى نهاية درسنا

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

دعائي للجميع بالتوفيق

المهندس

عــدي ياســـين بكالوريوس هندسة حاسوب

engauday@hotmail.com

4

2007 / 7 / 27: الجمعة

الموسوعة التعليمية الكبرى

ASP.Net سادسالالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام .. نقوم بانشاء صفحة جديدة

.. BulletedListنضيف نسخة من االداة

.Itemsع المصغر الذي يظهر عند النقر على الحقل المقابل للخاصية نقوم باضافة عناصر لالداة من خالل النقر على المرب

:نضيف العناصر لتبدو االداة آما يلي

..orderedlist او القائمة المرتبة unorderedlistان هذه االداة هي اداة تكافئ القائمة الغير مرتبة

:BulletListالخاصية

او LowerAlpha(a,b,c,..) او حروف ابجدية صغيرة Numbered (1,2,3,..)م نختار ام أرقا.. وهي تحدد نوع القائمة او غيرها ، آذلك نحدد الرمز الممكن عرضه ، سواء دائري او مربع او صورة UpperAlpha(A,B,C,..)حروف ابجدية آبيرة

) .BlletImageUrlفي حالة استخدامنا الخاصية ( مخصصة

: BulletImageUrlالخاصية . ي تحدد الصورة التي سيتم عرضها الى اليسار من آل عنصر وه

:FirstBulletNumberالخاصية يمكننا ) ..Numbered , LowerAlpha , UpperAlpha , LowerRoman , UpperRoman(في الئم المرتبة التي تستخدم .. تحديد القيمة االولى للقائمة

.UpperAlpha بالنسبة الى C,D,E او Numbered بالنسبة الى 3,4,5ون الترقيم لهذه الخاصية سيك3مثال ان اعطينا القيمة

1

:تكون نتيجة االختيار السابق هي

.. في بعض الحاالت ، نريد ان نجعل آل عنصر يمثل ارتباط تشعبي الى صفحة اخرى او موقع اخر ..DisplayModeيمكننا عمل ذلك من خالل الخاصية

تحدد ان آان النص في آل عنصر سيتم عرضه على شكل نص عادي او على شكل نص يحتوي على DisplayModeالخاصية .. Hyperlinkارتباط

: لتبدو الصفحة آما يلي Label و Buttonنضيف نسخة من االداة

.. االن نضيف الكود في حدث النقر لالداة من خالل النقر المزدوج عليها

Protected Sub BulletedList1_Click(ByVal sender As Object, ByVal e As _ System.Web.UI.WebControls.BulletedListEventArgs) Handles BulletedList1.Click Dim ItemText As String = _ BulletedList1.Items(e.Index).Text Label1.Text = " You Choose Item " & ItemText End Sub

.. حيث يمكننا تطوير الكود من اجل التفاعل مع آل عنصر .. ان الكود السابق يخبر المستخدم اي عناصر القائمة تم نقره ..نقوم بتشغيل الصفحة وننقر على العنصر االول ونالحظ عنصر التسمية

..الى هنا وصلنا الى نهاية درسنا .. معلومات المقدمة في هذا الدرس ارجو ان تكونوا قد استفدتم من ال

..ملتقانا في دروس قادمة ومعلومات جديدة دعائي للجميع بالتوفيق

المهندس

عــدي ياســـين بكالوريوس هندسة حاسوب

engauday@hotmail.com

2

2007 / 7 / 27: الجمعة

الموسوعة التعليمية الكبرى

ASP.Net سابعالالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام .. في درسنا هذا سنتعامل مع اداة الجدول

..آما تعلمنا في آل درس جديد نقوم بانشاء صفحة جديدة :بدو آما يلي بعد ذلك نصمم الصفحة لت

.. Sourceهذا االسلوب من خالل آتابة آود في نافذة الـ.. آذلك يمكننا اتباع اسلوب اخر في تصميم الصفحة

: ونكتب الكود التالي Sourceننقر على الـ

<form id="form1" runat="server"> <div> Rows: <asp:TextBox ID ="txtRows" runat ="server" /> &nbsp; Cols: <asp:TextBox ID ="txtCols" runat ="server" /> <br /> <br /> <asp:CheckBox ID ="chkBorder" runat ="server" Text = "Put Border Around Cells" /> <br /> <br /> <asp:Button ID = "cmdCreate" runat ="server" Text ="Create" /> <br /> <br /> <asp:Table ID ="tbl" runat ="server" /> &nbsp;<br /> </div> </form>

..ان الكود اعاله يعطينا ناتج لتصميم الصفحة آما وضحنا مسبقا احدهما سنقوم باستخدامه من اجل السماح للمستخدم بادخال عدد الصفوف و TextBoxحيث تتكون الصفحة من نسختين من االداة

.. االخر من اجل ادخال عدد االعمدة المكونة للجدول ) .. ان تم اختيارها ( ضع حدود للجدول اما نسخة اداة االختبار فهي من اجل و

.. بعد ذلك اداة الزر ونسخة من اداة الجدول الفكرة في صفحتنا هذه هي اننا سنجعل المستخدم يدخل عدد االعمدة و الصفوف المكونة للجدول ويختار ان آان يريد حدود حول

. ختيارات التي اختارها مسبقا الخاليا او ال ، ثم عند النقر يتم انشاء الجدول باالعتماد على اال

.. االن لدينا حدثين سنقوم بكتابة الكود الخاص بهما الحدث االول هو حدث تحميل الصفحة ، والكود المستخدم فيه هو من اجل انشاء حدود للجدول بصورة عامة وتحديد عرض

) ..ختيار اداة صندوق االختبار وهو يختلف عن الحدود التي نقوم بانشاءها حول الخاليا من خالل ا( الحدول

1

.. ويمكننا االستغناء عن هذا الكود ان آنا النريد ان نقوم بانشاء حدود للجدول

.على ادخاالت المستخدم فهو يقوم بانشاء الجدول باالعتماد اما الكود لحدث النقر على الزر

آود حدث تحميل الصفحة :

.. من اجل تحديد نوع االطار المحيط بالجدول BorderStyleنالحظ اننا استخدمنا الخاة

. BorderWidthآذلك حددنا عرض حدود الجدول من خالل

:آود حدث النقر للزر

) .الخاليا.. (في بداية الكود نقوم بافراغ الجدول من جميع محتوياته ت الخاصة بانشاء الصفوف و الخاليا التي موجودة والذين نستخدمهما من اجل عمل الدورا .. i , jبعد ذلك نقوم بتعريف متغيرين

.. داخلها الفكرة في الكود تتلخص في عمل دوراه بعدد الصفوف ، ومن ثم عمل دواره اخرى داخل الدواره االولى من اجل انشاء الخاليا لكل

. صف من الصفوف . من اجل اضافة الصفوف للجدول و الخاليا للصفوف Controls.Addونستخدم

. من لوحة المفاتيح F5االن يمكننا ان نجرب الصفحة من خالل تشغيلها بنقر مفتاح

وننقر على الزر .. ندخل القيم آما هو موضح في الصورة اعاله

..سيتم انشاء الجدول بعدد الصفوف و االعمدة التي تم ادخال قيمها في صناديق النص

2

.االختبار مختارا آذلك سيتم انشاء حدود للخاليا ان آان صندوق

... آذلك يمكننا وضع ادوات داخل آل خلية من خاليا الجدول :نقوم بتعديل آود حدث النقر للزر ليصبح آما يلي

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

3

.. من لوحة المفاتيح F5نقوم بتجربة الصفحة من خالل نقر مفتاح .وندخل قيم لعدد االعمدة و الصفوف ومن ثم ننقر على الزر من اجل انشاء الجدول

.. تعلمنا آيفية انشاء جدول بصورة برمجية وآتابة نص داخل آل خلية الى هنا ) .عنصر التسمية ، اداة الصورة ( وات داخل آل خلية آذلك وضع االد

) .آما سنتعلم من خالل الدروس السابقة ( يمكننا عمل نفس االمور السابقة من خالل التصميم يمكننا اسناد لكل خلية .. ان المرونة الحقيقية في الجدول هي ان آل جدول ، صف جدول ، خلية جدول تمثل آائن بمميزات آاملة

.مختلف ولون اطار مختلف ولون نص من خالل التحكم بخصائصها اطار

لكننا سنكمل درسنا هذا من خالل اضافة نسختين من .. تعلمنا من خالل الدروس السابقة آيفية التعامل مع االلوان و الخطوط ..ى الحاسب صندوق القائمة المنسدلة يحتوي االول على جميع االلوان و الثاني على جميع الخطوط المعدة عل .. وعندما يحدد المستخدم عدد االعمدة و الصفوف ، يحدد معهما لون الخلفية للخاليا و نمط الخط

.نكمل تصميم الصفحة لتبدو آما يلي

يلي

4

:االن نعدل آود تحميل الصفحة ليبدو آما

علينا التاآد ان اليتم اضافة العناصر في آل مرة فمن اجل اضافة عناصر الى صندوق القائمة المنسدلة فيجب..وآما تعلمنا مسبقا .... Me.IsPostBackويتم ذلك من خالل .. يتم فيها ارسال الصفحة الى الخادم

على انه مصفوفة من النصوص وبذلك جعلناها آمصدر للبيانات لعنصر القائمة المنسدلة colorArrayونالحظ اننا عرفنا المتغير .DataSourceمن خالل الخاصية

..االن ننقر على صندوق القائمة المنسدلة االول ونكتب له الكود التالي

:اما صندوق القائمة الثاني فنكتب له الكود التالي

..نقوم االن بتجربة الصفحة ونحدد عدد الصفوف و االعمدة ، ونحدد اللون ونوع الخط ثم ننقر على الزر ونالحظ النتيجة

..ى نهاية درسنا الى هنا وصلنا ال

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

دعائي للجميع بالتوفيق

المهندس عــدي ياســـين

بكالوريوس هندسة حاسوبengauday@hotmail.com

5

2007 / 8 / 5: االحد

الموسوعة التعليمية الكبرى

ASP.Net لثامناالدرس

.ASP.NET & VB.NETمرحبا باالخوة و االخوات في درس جديد من دروس تصميم وبرمجة المواقع باستخدام .. Validation Controlsسنتحدث في هذا الدرس عن آائنات التحقق من المحتوى

فقد تحدث بعض االخطاء عندما يقوم .. من خالله معلومات من المستخدم عندما نصمم موقع ونقوم بوضع نموذج فيه نطلب المستخدم بملئ الحقول بالمعلومات ، آأن يهمل ادخال معلومات حقل مهم ويترآه فارغا ، او ان يقوم المستخدم بادخال المعلومات

عد عند محاولة ارسال رسالة بريد الكتروني بشكل خاطئ مثل ان يدخل صيغة بريد الكتروني خاطئة و التي تسبب لنا مشاآل فيما ب .للمستخدم

.آذلك ممكن ان يدخل المستخدم قيم خارج نطاق قيم محدد ، وغير ذلك الكثير من االخطاء االخرى Validation Controls يوفر لنا الحلول المناسبة لتلك المشاآل من خالل تقديمه لنا عناصر التحقق من المحتوى ASP.NETان

مهمتها التحقق من صحة المحتوى و المعلومات التي ادخلها المستخدم وذلك باختبار الحقول وارجاع تقرير عن الخطا والتي ...بصورة تلقائية

: The Validation Controlsعناصر التحقق من المحتوى

والخامس يمكننا تخصيصه .. ته اربعة منها مخصصة الغراض ثاب.. يوفر لنا خمسة عناصر للتحقق من المحتوى ASP.NETان .نحن

1. Required Field Validator ) اداة الحقل مطلوب : (

.المحتوى يتحقق في حالة ان الحقل لم يترك فارغا

2. Range Validator ) أداة النطاق: ( ) .تاريخ رقمي ، ابجدي ، ( المحتوى يتحقق في حالة ان عنصر االدخال يحتوي على قيمة تقع ضمن نطاق محدد

3. Compare Validator ) أداة المقارنه: (

. المحتوى يتحقق ان آان عنصر االدخال يحوي قيمة تطابق القيمة في آخر

4. Regular Expression Validator ) أداة التعبير النظامي: ( .المحتوى يتحقق ان آانت القيمة في عنصر االدخال تطابق تعبير نظامي محدد

5. datorCustom Vali) األداة المخصصة: (

. يتحقق المحتوى تبعا للدالة التي عّرفها المبرمج

في حين ان عنصر االدخال الواحد .. آل عنصر من عناصر التحقق من صحة المحتوى يمكننا اسناده الى عنصر ادخال واحد فقط .يمكن ان نسند اليه اآثر من عنصر تحقق من صحة المحتوى

فان التحقق من ... Compare Validator و Regular Expression Validator و Range Validatiorلو استخدمنا

. صحة المحتوى تنجح ان آان عنصر االدخال فارغا النه التوجد قيمة من اجل التحقق من صحتها . لعنصر االدخال RequiredField Validatorان لم يكن هذا ما نريده فيجب عندها اضافة االداة

وهي تختلف عن االدوات السابقة آونها التساعدنا في التحقق من صحة Validation Summary االداة ASP.NETيوفر لنا

.محتوى عنصر ادخال ، لكنها تفيدنا لتزويد قائمة بكل اخطاء عناصر التحقق من صحة المحتوى ضمن الصفحة

1

:معالجة المحتوى صحة المحتوى من اجل التحقق من صفحة بصورة تلقائية عندما يرسل المستخدم المعلومات او يمكننا استخدام ادوات التحقق من

.بصورة يدوية باستخدام الكود .علما ان الطريقة االولى هي االآثر شيوعا

دما ينتهي يقوم عند استخدام التحقق التلقائي ، فان المستخدم يستقبل صفحة اعتيادية ويبدأ بملئ المعلومات في عناصر االدخال وعن . بنقر الزر الرسال الصفحة

. False لها او القيمة Trueوالتي يمكن اسناد القيمة Causes Validation يمتلك خاصية Buttonآل زر . Causes Validationان ما يحدث عندما ينقر المستخدم الزر يعتمد على قيمة الخاصية

سوف يهمل جميع عناصر التحقق من صحة ASP.NET فان Causes Validation مسنده للخاصية Falseاذا آانت القيمة . وسيتم ارسال الصفحة ومعالجة الكود بصورة طبيعية .. المحتوى

بصورة تلقائية ASP.NETفان ) .. وهي الحالة االفتراضية (Causes Validation مسندة للخاصية Trueاذا آانت القيمة .ويتم ذلك بتحقيق المحتوى لكل عنصر تحقق في الصفحة .. عندما ينقر المستخدم الزر سيتحقق من صحة محتوى الصفحة

سيرجع الصفحة مع بعض معلومات االخطاء ، اعتمادا على ASP.NETاذا فشل التحقق من المحتوى الي عنصر ، فان .اعداداتنا

: ، مثل Causes Validationأغلب ازرار الربط التي يمكن استخدامها الرسال الصفحة توفر لنا الخاصية : مالحظة

LinkButton , ImgeButton , Bulleted List.

:التحقق من المحتوى من جهة العميل ) .FireFoxار من المستعرض او االصدار االحدث او اي اصد Internet Explorer 5( في اغلب المستعرضات الجديدة

ASP.NET يضيف بصورة تلقائية آود JavaScript له الخاصية ( من جانب العميل ، وفي هذه الحالة عندما ينقر المستخدم زرCauses Validation تساوي True .. ( الخادم منفان نفس رسائل الخطأ ستظهر دون الحاجة الرسال و رجوع الصفحة .

سيتحقق من المحتوى عند وصولها ASP.NETفان .. ى لو تم التاآد من محتوى الصفحة من جهة العميل حت.. على آل حال . Serverللخادم

لذلك فان .. ويستمر بالعمل مع الصفحة ) JavaScriptآود (قد يقوم المستخدم بحذف آود التحقق من المحتوى من جهة العميل ASP.NETعليه قدر االمكان سيتاآد ان التطبيق يمكن االعتماد .

: The Validator Classesالفئات

:ان فئات ادوات التحقق يمكن ايجادها في فضاء االسماء System.Web.UI.WebControls

، هذه الفئة تعّرف الدوال االساسية لعناصر التحقق من صحة BaseValidator Classوالذي ينحدر من فئة التحقق االساسية .المحتوى

:ControlToValidateاصية الخ

.آل عنصر تحقق يمكنه التاآد من محتوى عنصر ادخال واحد . . تحدد العنصر الذي سيتم التحقق من محتواه

:Error Messageالخاصية ) .Error Messageتسند للخاصية ( ان لم ينجح التحقق من محتوى ، فان عنصر التحقق يمكنه عرض رسالة نصية

:splayDiالخاصية

ان الحالة الثابته ) .. Static(تمكننا ان نحدد ان آانت رسالة الخطأ ستضاف دينامكيا عند الحاجة او ان لها مساحة ثابته محجوزه Static مفيده عندما يكون عنصر التحقق ضمن جدول ، والتريد ان يتغير عرض الخلية عند عرض رسالة الخطأ .

.اء رسالة الخطأ الخفNoneويمكننا اختيار القيمة

:ForeColorالخاصية .هذه الخاصية للتحكم بلون الخط

:IsValidالخاصية

. باالعتماد على ان صحة المحتوى صحيحة او خاطئة False او Trueبعد اتمام التحقق من المحتوى ، فان هذه الخاصية تعيد . بدل من التحقق من جميع عناصر التحقق من المحتوى IsValidيمكننا اختبار حالة الصفحة من خالل معرفة قيمة الخاصية

2

:Enabledالخاصية .فان التحقق التلقائي سوف لن يتم لهذا العنصر عند ارسال الصفحة .. لها Falseعند اسناد القيمة

:EnableClientScriptالخاصية للسماح بالتحقق من المحتوى DHTML و JavaScript سيضيف آود ASP.NET لهذه الخاصية فان Trueعند اسناد القيمة

. التي تدعم تلك الخاصية Browsersمن جهة العميل في المستعرضات

..فان الخصائص التي نحتاج السناد قيمة لها هي .. عند استخدام عناصر التحقق من صحة المحتوى Error Message و ControlToValidate

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

RequiredField Validator: .النحتاج السناد قيم لخصائص اخرى

Range Validator:

Type ، النوع Minimum Value ، اصغر قيمة Maximum Valueاآبر قيمة

Compare Validator: ، القيمة التي سيتم المقارنه معها Type ، النوع Operator، المعامل ControlToCompareالعنصر الذي سيتم مقارنه محتواه

ValueToCompare

RegularExpression Validator : Validation Exressionتعبير التحقق من المحتوى

Custom Validator:

ServerValidate Event ، حدث التحقق للخادم ClientValidationFunctionدالة التحقق من المحتوى من جهة العميل

حتى هذه المرحلة تكلمنا عن ادوات التحقق من صحة المحتوى واخذنا فكرة عن اغلب ما يمكن ان نحتاج الى معرفته عن اساسيات .هذه االدوات

. في الدرس القادم سنبدا باالمثلة التطبيقية واستخدام اغلب المفاهيم التي تعلمناها في هذا الدرس

..ية درسنا الى هنا وصلنا الى نها .. ارجو ان تكونوا قد استفدتم من المعلومات المقدمة في هذا الدرس

..ملتقانا في دروس قادمة ومعلومات جديدة دعائي للجميع بالتوفيق

المهندس

عــدي ياســـين بكالوريوس هندسة حاسوب

engauday@hotmail.com

3

2007 / 10 / 26: الجمعة