مقدمة الي ASP.NET للمبتدئين

اقتباس

نتمنى لو يوجد شرح لكيفية ربط قاعدة بيانات بasp.net

/index.php?showtopic=238105&st=0&p=1180024&fromsearch=1entry1180024

AhmedElbaz كتب:

الدرس الثاني

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

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

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

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

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

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

اول خاصية هي ID ، وهي التي تحدد الاسم البرمجي للاداة والذي سيتم استخدامه من اجل الاشارة الى الاداة عند كتابة الكود، كما لاحظنا في الدرس السابق عندما كتبنا :

Label1.Text = "Hello, This is a test"

حيث اننا اشرنا الى اداة عنصر التسمية من خلال اسمها البرمجي المسند الى الخاصية ID وهو Label1

واما من اجل الوصول الى خصائص اداة معينة فيمكنا ذلك من خلال كتابة اسم الاداة ومن ثم (.) ومن ثم الخاصية المطلوبة .

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Label1.Text = TextBox1.Text

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

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

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

نلاحظ ان الادوات تم تصييرها على شكل ادوات HTML ..

كذلك نشاهد كيف تم اسناد الخصائص لكل اداة من الادوات ..

<input name="TextBox1" type="text" value="الموسوعة التعليمية الكبرى" id="TextBox1" /> 
		<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)

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

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

نبدا الان بكتابة الكود الخاص بالازرار الاربعة ..

أولا : الزر اخفاء صندوق النص :

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

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

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

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

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

شكرا الك على الموضوع انا كثير ساعدني

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

وبكون ممنونة الك ادا ساعدتني

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

والله انا لي زمن بفتش علي الشروحات دي مشكور جدا ي باش مهندس ونفعك الله بعلمك

مشكووووووووووووووووووووووووووووووووووووووووور

الله يوفقك ياطيب :)

بارك الله فيك وجعله الله في ميزان حسناتك.............

مشكور اخي الكريم على هذه الجهد الطيب

جزاك الله خير

شكرا جزاك الله خيرا