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

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

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

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

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

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

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

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

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

  • انقر بزر الماوس الأيمن فوق الملف Demo.aspx في Solution Explorer ثم
  • اختر خيار القائمة عرض المصمم.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

انتاج:-

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

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

نصbox

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

الخطوة 1) الخطوة الأولى هي سحب النصbox التحكم في نموذج الويب من الأداةbox كما هو مبين أدناه

نصbox

فيما يلي كيف سيبدو هذا في مصمم النماذج بمجرد ظهور النصbox السيطرة على النموذج

نصbox

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

  • انتقل إلى نافذة الخصائص عن طريق النقر بزر الماوس الأيمن على النصbox السيطرة و
  • اختر الخصائص بعد ذلك
  • تغيير خاصية معرف النصbox إلى txtName.

نصbox

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

انتاج:-

نصbox

قائمة box

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

الخطوة 1) الخطوة الأولى هي سحب القائمة box التحكم في نموذج الويب من الأداةbox كما هو مبين أدناه

قائمة box

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

قائمة box

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

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

قائمة box

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

قائمة box

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

انتاج:-

قائمة box

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

زر الراديو

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

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

زر الراديو

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

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

زر الراديو

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

انتاج:-

زر الراديو

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

تحققbox

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

الخطوة 1) الخطوة الأولى هي سحب الشيكbox التحكم في نموذج الويب من الأداةbox كما هو مبين أدناه

تحققbox

الخطوة 2) بمجرد التحققboxتمت إضافة es، قم بتغيير الشيكbox خاصية المعرف إلى "chkASP".

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

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

  1. تغيير خاصية معرف الشيكbox إلى "chkASP"

تحققbox

  1. تغيير خاصية معرف الشيكbox إلى CHKC

تحققbox

تحققbox

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

انتاج:-

تحققbox

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

أزرار

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

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

أزرار

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

أزرار

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

انتاج:-

أزرار

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

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

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

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

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

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

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

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

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

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

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;
}

شرح الكود :-

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

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

انتاج:-

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

في شاشة الإخراج، قم بتنفيذ ما يليwing سلم

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

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

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

نبذة عامة

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