عناصر تحكم ASP.NET: تحققBox، زر الراديو، القائمةBox

إضافة عناصر تحكم ASP.Net إلى نماذج الويب

تتمتع ASP.Net بالقدرة على إضافة عناصر تحكم إلى النموذج، مثل مربعات النص والتسميات.

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

في مثالنا، سنقوم بإنشاء نموذج واحد سيحتوي على الوظيفة التالية.

1. إمكانية قيام المستخدم بإدخال إسمه.
2. خيار لاختيار المدينة التي يقيم فيها المستخدم.
3. إمكانية قيام المستخدم بإدخال خيار الجنس.
4. خيار لاختيار الدورة التي يريد المستخدم أن يتعلمها. سيكون هناك اختيارات لكليهما C# و ASP.Net.

دعونا نلقي نظرة على كل عنصر تحكم بالتفصيل. لنقم بإضافتها لبناء النموذج بالوظيفة المذكورة أعلاه.

الخطوة 1) الخطوة الأولى هي فتح مصمم النماذج لنموذج الويب التجريبي. بمجرد القيام بذلك، ستتمكن من سحب عناصر التحكم من صندوق الأدوات إلى نموذج ويب.

لفتح نموذج الويب الخاص بالمصمم:

• انقر بزر الماوس الأيمن على ملف Demo.aspx في مستكشف الحلول، و
• اختر خيار القائمة عرض المصمم.

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

والآن لنبدأ بإضافة عناصر التحكم الخاصة بنا واحداً تلو الآخر.

التحكم في التسمية

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

الخطوة 1) الخطوة الأولى هي سحب عنصر التحكم "label" إلى نموذج الويب من صندوق الأدوات كما هو موضح أدناه.

الخطوة 2) بمجرد إضافة الملصق، اتبع الخطوات التالية.

1. انتقل إلى نافذة الخصائص بالنقر بزر الماوس الأيمن على عنصر التحكم الخاص بالتسمية.
2. اختر خيار قائمة الخصائص.

الخطوة 3) من نافذة الخصائص، قم بتغيير قيمة خاصية النص إلى الاسم.

وبالمثل، قم أيضًا بتغيير قيمة خاصية المعرف لعنصر التحكم إلى lblName. من خلال تحديد معرف ذي معنى لعناصر التحكم، يصبح من الأسهل الوصول إليها أثناء مرحلة الترميز. هذا موضح أدناه.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

سترى أن تسمية الاسم تظهر في نموذج الويب.

مربع الكتابة

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

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

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

الخطوة 2) بمجرد إضافة مربع النص، يتعين عليك تغيير خاصية المعرف.

• انتقل إلى نافذة الخصائص بالنقر بزر الماوس الأيمن على عنصر تحكم مربع النص، و
• اختر الخصائص، ثم
• قم بتغيير خاصية ID الخاصة بمربع النص إلى txtName.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى الناتج التالي.

انتاج:-

قائمة المربع

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

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

الخطوة 2) بمجرد سحب مربع القائمة إلى النموذج، ستظهر قائمة جانبية منفصلة. في هذه القائمة، اختر قائمة "تحرير العناصر".

الخطوة 3) سيظهر لك الآن مربع حوار يمكنك من خلاله إضافة عناصر القائمة إلى قائمة المربع.

1. انقر فوق الزر "إضافة" لإضافة عنصر القائمة.
2. أعطِ اسمًا لقيمة النص لعنصر القائمة - في حالتنا، مومباي. كرر الخطوتين 1 و2 لإضافة عناصر قائمة لمانجالور وحيدر أباد.
3. انقر على زر موافق.

الخطوة 4) انتقل إلى نافذة الخصائص وقم بتغيير قيمة خاصية المعرف (ID) الخاصة بالعنصر إلى lstLocation.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

من خلال المخرجات، يمكنك أن ترى بوضوح أنه تمت إضافة مربع القائمة إلى النموذج.

زر الراديو

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

الخطوة 1) الخطوة الأولى هي سحب عنصر التحكم "زر الاختيار" إلى نموذج الويب من صندوق الأدوات (انظر الصورة أدناه). تأكد من إضافة زري اختيار، أحدهما لخيار "ذكر" والآخر لخيار "أنثى".

الخطوة 2) بمجرد إضافة زر الراديو، قم بتغيير خاصية "النص".

• انتقل إلى نافذة الخصائص من خلال النقر على "التحكم في زر الراديو".
• قم بتغيير خاصية النص لزر الراديو إلى "ذكر".
• كرر نفس الخطوة لتغييرها إلى "أنثى".
• قم أيضًا بتغيير خصائص المعرف لعناصر التحكم المعنية إلى rdMale وrdFemale.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

من خلال المخرجات، يمكنك أن ترى بوضوح أنه تمت إضافة زر الاختيار إلى النموذج.

صندوق الاختيار

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

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

الخطوة 2) بعد إضافة مربعات الاختيار، قم بتغيير خاصية معرف مربع الاختيار.

• انتقل إلى نافذة الخصائص بالنقر فوق عنصر التحكم "مربع الاختيار".
• تغيير خصائص معرف عناصر التحكم المعنية إلى 'chkC' و'chkASP'.

قم أيضًا بتغيير خاصية النص الخاصة بعنصر التحكم Checkbox إلى "C#". قم بنفس الشيء بالنسبة لعنصر التحكم Checkbox الآخر وقم بتغييره إلى "ASP.Net".

1. قم بتغيير خاصية المعرف (ID) لمربع الاختيار إلى 'chkASP'.

2. قم بتغيير خاصية المعرف (ID) لمربع الاختيار إلى chkC.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

من خلال المخرجات، يمكنك أن ترى بوضوح أنه تمت إضافة مربعات الاختيار إلى النموذج.

أزرار

يُستخدم الزر لتمكين المستخدم من النقر عليه، مما يؤدي إلى بدء معالجة النموذج. دعونا نرى كيف يمكننا تطبيق ذلك في مثالنا الحالي كما هو موضح أدناه. سنضيف زرًا بسيطًا يُسمى زر "إرسال". سيُستخدم هذا الزر لإرسال جميع المعلومات الموجودة في النموذج.

الخطوة 1) الخطوة الأولى هي سحب عنصر التحكم الخاص بالزر إلى نموذج الويب من صندوق الأدوات كما هو موضح أدناه.

الخطوة 2) بمجرد إضافة الزر، انتقل إلى نافذة الخصائص من خلال النقر على زر التحكم. قم بتغيير خاصية النص لعنصر التحكم بالزر إلى إرسال. قم أيضًا بتغيير خاصية معرف الزر إلى "btnSubmit".

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

من الإخراج، يمكنك أن ترى بوضوح أنه تمت إضافة الزر إلى النموذج.

معالج الأحداث في ASP.Net

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

في نماذج الويب، يمكنك إضافة تعليمات برمجية إلى ملف aspx.cs المقابل. يمكن استخدام هذا الرمز لتنفيذ إجراءات معينة عند الضغط على زر في النموذج. يعد هذا بشكل عام الحدث الأكثر شيوعًا في نماذج الويب. دعونا نرى كيف يمكننا تحقيق ذلك.

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

الخطوة 1) أولاً، عليك النقر نقرًا مزدوجًا فوق الزر في نموذج الويب. سيؤدي هذا إلى إظهار رمز الحدث الخاص بالزر في Visual Studio.

تتم إضافة حدث btnSubmit_Click تلقائيًا بواسطة Visual Studio عند النقر المزدوج على الزر في مصمم نماذج الويب.

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

protected void btnSubmit_Click(object sender, EventArgs e)
{
	Response.Write(txtName.Text + "<br/>");

	Response.Write(lstLocation.SelectedItem.Text + "<br/>");

	lblName.Visible = false;
	txtName.Visible = false;
	lstLocation.Visible = false;
	chkC.Visible = false;
	chkASP.Visible = false;
	rdFemale.Visible = false;
	btnSubmit.Visible = false;
}

Code تفسير:-

1. يقوم سطر التعليمات البرمجية أعلاه بأبسط مهمة. فهو يأخذ قيمة عنصر تحكم مربع نص الاسم ويرسلها إلى العميل عبر كائن الاستجابة. لذا، إذا كنت ترغب في إدخال السلسلة "Guruإذا أدخلت الرقم 99 في مربع نص الاسم، فستكون قيمة txtName.Text هي 'Guru99.
2. يأخذ السطر التالي من التعليمات البرمجية القيمة المحددة من مربع القائمة عبر الخاصية 'lstLocation.SelectedItem.Text'. ثم يكتب هذه القيمة إلى العميل باستخدام دالة Response.Write.
3. أخيرًا، نخفي جميع عناصر التحكم في النموذج. إذا لم نفعل ذلك، فستظهر جميع عناصر التحكم بالإضافة إلى قيم الاستجابة معًا. عادةً، عندما يُدخل المستخدم جميع المعلومات في النموذج، مثل الاسم والموقع والجنس، وما إلى ذلك، يجب أن تحتوي الصفحة التالية التي تظهر له على المعلومات التي لم يُدخلها فقط. لا يرغب المستخدم في رؤية عناصر التحكم الخاصة بالاسم والجنس والموقع مرة أخرى. لكن ASP.NET لا يُدرك ذلك، وبالتالي، بشكل افتراضي، سيُظهر جميع عناصر التحكم مرة أخرى عند نقر المستخدم على زر الإرسال. لذلك، نحتاج إلى كتابة كود لضمان إخفاء جميع عناصر التحكم بحيث يرى المستخدم الناتج المطلوب فقط.

بمجرد إجراء التغييرات المذكورة أعلاه، سترى المخرجات التالية.

انتاج:-

في شاشة الإخراج، قم بتنفيذ الخطوات التالية:

1. أعط اسمًا لـ Guru99 في مربع نص الاسم.
2. اختر موقعًا من قائمة بنغالور.
3. انقر فوق الزر إرسال.

بمجرد قيامك بذلك، سترىGuru99' والموقع 'بنغالور' المعروض على الصفحة.

الأسئلة الشائعة