يمكّن عنصر التحكم RadioButton وعنصر التحكم RadioButtonList المستخدمين من الاختيار من بين مجموعة صغيرة من الخيارات المحددة مسبقًا والحصرية.
1. الوظيفة
يمكنك استخدام عنصر التحكم CheckBox وعنصر التحكم CheckBoxList لإجراء العمليات التالية:
· يتسبب في إعادة نشر الصفحة عند تحديد زر الاختيار.
· التقاط تفاعل المستخدم عندما يقوم المستخدم بتحديد زر الاختيار.
· ربط كل زر اختيار بالبيانات الموجودة في قاعدة البيانات.
2. الخلفية
عند إضافة أزرار اختيار إلى صفحة ويب ASP.NET، يمكنك استخدام عنصري تحكم لخادم الويب: عنصر تحكم RadioButton واحد أو عنصر تحكم RadioButtonList. يمكّن كلا عنصري التحكم المستخدم من الاختيار من بين مجموعة صغيرة من الخيارات المحددة مسبقًا والحصرية. يمكنك استخدام عناصر التحكم هذه لتحديد أي عدد من أزرار الاختيار المسماة وترتيبها أفقيًا أو رأسيًا.
يمكنك إضافة عناصر تحكم RadioButton فردية إلى الصفحة واستخدام عناصر التحكم بشكل فردي. عادةً ما يتم تجميع زرين منفصلين أو أكثر معًا.
وبدلاً من ذلك، يمكنك استخدام عنصر التحكم RadioButtonList، وهو عنصر تحكم واحد يمكن استخدامه كعنصر تحكم أصلي لمجموعة من عناصر قائمة أزرار الاختيار. عنصر التحكم هذا مشتق من فئة ListControl الأساسية وبالتالي يعمل بشكل مشابه جدًا لعناصر تحكم خادم الويب ListBox وDropDownList وBulletedList وCheckBoxList. العديد من إجراءات استخدام عنصر التحكم RadioButtonList هي نفسها المستخدمة في عناصر تحكم خادم ويب القائمة الأخرى.
كلا النوعين من الضوابط لهما مزاياهما الخاصة. يمنحك استخدام عنصر تحكم RadioButton واحد مزيدًا من التحكم في تخطيط مجموعة أزرار الاختيار مقارنة باستخدام عنصر تحكم RadioButtonList. على سبيل المثال، يمكنك تضمين نص غير زر الاختيار بين أزرار الاختيار.
إذا كنت تريد إنشاء مجموعة من أزرار الاختيار بناءً على بيانات من مصدر بيانات، فإن عنصر التحكم RadioButtonList هو الخيار الأفضل. كما أنها أبسط قليلاً من حيث كتابة التعليمات البرمجية للتحقق من الزر المحدد.
ملاحظة: يمكنك أيضًا استخدام عنصر تحكم خادم HtmlInputRadioButton لإضافة أزرار الاختيار إلى صفحات ويب ASP.NET.
إذا كنت تريد تزويد المستخدم بقائمة طويلة من الخيارات أو قائمة قد تتغير في الطول أثناء وقت التشغيل، استخدم عنصر تحكم خادم الويب ListBox أو DropDownList.
1. أزرار الاختيار المجموعة
نادرًا ما يتم استخدام أزرار الاختيار بمفردها، ولكن يتم تجميعها لتوفير مجموعة من الخيارات المتبادلة. داخل المجموعة، يمكن تحديد زر اختيار واحد فقط في كل مرة. يمكنك إنشاء أزرار اختيار مجمعة بالطرق التالية:
ابدأ بإضافة عنصر تحكم واحد لخادم RadioButton Web إلى الصفحة، ثم قم بتعيين كافة عناصر التحكم يدويًا لمجموعة ما. يمكن أن يكون اسم المجموعة أي شيء؛ وتعتبر جميع أزرار الاختيار التي تحمل نفس اسم المجموعة جزءًا من مجموعة واحدة.
إضافة عنصر تحكم خادم ويب RadioButtonList إلى الصفحة. يتم تجميع عناصر القائمة الموجودة في عنصر التحكم هذا تلقائيًا.
2. أحداث RadioButton وRadioButtonList
تعمل الأحداث بشكل مختلف بين عنصر تحكم RadioButton واحد وعنصر تحكم RadioButtonList.
3. التحكم في زر راديو واحد
يقوم عنصر تحكم RadioButton واحد برفع الحدث CheckedChanged عندما يقوم المستخدم بالنقر فوق عنصر التحكم. (يتم توريث هذا الحدث من عنصر تحكم CheckBox.) افتراضيًا، لا يتسبب هذا الحدث في إرسال الصفحة إلى الخادم. ومع ذلك، يمكنك فرض عنصر التحكم لإجراء إعادة النشر مباشرة عن طريق تعيين الخاصية AutoPostBack إلى true.
ملاحظة: تتطلب ميزة إعادة النشر التلقائية أن يدعم المتصفح ECMAScript (Jscript أو JavaScript) وأن يتم تمكين البرمجة النصية على متصفح المستخدم.
قد تحتاج إلى إنشاء معالج حدث للحدث CheckedChanged. يمكنك اختبار زر الاختيار الذي تم تحديده في أي رمز يتم تشغيله كجزء من الصفحة. عادةً، يمكنك إنشاء معالج حدث للحدث CheckedChanged فقط عندما تحتاج إلى معرفة أن زر الاختيار قد تغير، بدلاً من مجرد قراءة التحديد الحالي.
4. التحكم في RadioButtonList
يقوم عنصر التحكم RadioButtonList برفع الحدث SelectedIndexChanged عندما يقوم المستخدم بتغيير زر الاختيار المحدد في القائمة. افتراضيًا، لا يتسبب هذا الحدث في إرسال الصفحة إلى الخادم. ومع ذلك، يمكنك فرض عنصر التحكم لإجراء إعادة النشر مباشرة عن طريق تعيين الخاصية AutoPostBack إلى true.
ملاحظة: تتطلب ميزة إعادة النشر التلقائية أن يدعم المتصفح ECMAScript (Jscript أو JavaScript) وأن يتم تمكين البرمجة النصية على متصفح المستخدم.
كما هو الحال مع عناصر تحكم RadioButton الفردية، من الشائع أكثر اختبار حالة عنصر تحكم RadioButtonList بعد إرسال الصفحة بوسائل أخرى.
5. سمات HTML للتحكم في RadioButton
عندما يتم عرض عنصر التحكم RadioButton على المتصفح، سيتم تقسيمه إلى جزأين: عنصر إدخال يمثل زر الاختيار وعنصر تسمية منفصل يمثل عنوان زر الاختيار. يتم دمج هذين العنصرين في عنصر الامتداد.
عند تطبيق الأنماط أو إعدادات الخصائص على عنصر تحكم RadioButton، يتم تطبيق تلك الأنماط والخصائص على عنصر الامتداد الخارجي. على سبيل المثال، إذا قمت بتعيين خاصية BackColor لعنصر التحكم، فسيتم تطبيق الإعداد على عنصر الامتداد. ولذلك، فإنه سوف يؤثر على كل من عناصر الإدخال والتسمية الداخلية.
في بعض الأحيان، قد تحتاج إلى تعيين إعدادات منفصلة لأزرار الاختيار والتسميات. يدعم عنصر التحكم RadioButton خاصيتين يمكن تعيينهما في وقت التشغيل. تتيح لك سمة InputAttributes إضافة سمات HTML إلى عنصر الإدخال، وتتيح لك سمة LabelAttributes إضافة سمات HTML إلى عنصر التسمية. يتم تمرير خصائص المجموعة إلى المتصفح كما هي. يوضح المثال التالي كيفية تعيين خصائص عنصر الإدخال بحيث عندما يشير المستخدم بمؤشر الماوس فوق زر الاختيار، يتغير لون زر الاختيار فقط وليس التسمية.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'red'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");
6. ربط البيانات بعناصر التحكم
يمكنك ربط عنصر تحكم RadioButton واحد بمصدر بيانات، كما يمكنك ربط أي خاصية لعنصر تحكم RadioButton بأي حقل في مصدر البيانات. على سبيل المثال، يمكنك تعيين خاصية النص لعنصر التحكم استناداً إلى المعلومات الموجودة في قاعدة البيانات.
نظرًا لاستخدام أزرار الاختيار في مجموعات، فإن ربط زر اختيار واحد بمصدر بيانات أمر غير شائع. بدلاً من ذلك، وهو أكثر شيوعاً لربط عنصر التحكم RadioButtonList بمصدر بيانات. في هذه الحالة، يقوم مصدر البيانات بشكل حيوي بإنشاء أزرار الاختيار (عناصر القائمة) لكل سجل في مصدر البيانات.
3. كيفية: إضافة عنصر تحكم خادم الويب RadioButton إلى صفحة نماذج الويب
هناك طريقتان لإضافة أزرار الاختيار إلى صفحة نماذج الويب:
· إضافة عنصر تحكم واحد لخادم الويب RadioButton.
· قم بإضافة عنصر تحكم خادم الويب RadioButtonList، ثم قم بإضافة عنصر قائمة واحد إلى عنصر التحكم.
عند استخدام عنصر تحكم واحد لخادم الويب RadioButton، فإنك عادةً تضيف مجموعة من عناصر التحكم هذه إلى الصفحة ثم تقوم بتجميعها. يمكن إنشاء عدة مجموعات أزرار مختلفة.
خطوة:
1. من علامة التبويب "قياسي" في صندوق الأدوات، اسحب عنصر التحكم RadioButton إلى الصفحة.
2. في نافذة "الخصائص"، حدد العنوان عن طريق تعيين خاصية النص.
3. يمكنك أيضًا اختيار تغيير اتجاه العنوان عن طريق تعيين خاصية TextAlign.
4. كرر الخطوات من 1 إلى 3 لكل زر اختيار تريد إضافته إلى الصفحة.
مجموعة عناصر تحكم خادم الويب RadioButton الفردية
قم بتعيين خاصية GroupName لكل عنصر تحكم إلى نفس الاسم. يمكنك استخدام أي سلسلة كاسم، لكن لا يمكن أن تحتوي على مسافات. على سبيل المثال، يمكنك تعيين السلسلة "RadioButtonGroup1" لخاصية GroupName لجميع الأزرار.
لإنشاء مجموعات متعددة من الأزرار، استخدم اسم مجموعة مختلفًا لكل مجموعة.
ملاحظة: يمكنك في أي وقت إضافة عناصر تحكم RadioButton إلى الصفحة وتقسيمها إلى مجموعات موجودة.
4. كيفية: إضافة عنصر تحكم خادم الويب RadioButtonList إلى صفحة نماذج الويب
هناك طريقتان لإضافة أزرار الاختيار إلى صفحة نماذج الويب:
· قم بإضافة عنصر تحكم خادم الويب RadioButtonList، ثم قم بإضافة عنصر قائمة واحد إلى عنصر التحكم.
· إضافة عنصر تحكم واحد لخادم الويب RadioButton.
عند استخدام عنصر التحكم RadioButtonList، يمكنك إضافة عناصر تحكم فردية إلى الصفحة. تعد إضافة عناصر إلى عنصر تحكم عملية منفصلة، اعتمادًا على ما إذا كنت تريد عرض قائمة ثابتة في عنصر التحكم أو قائمة تم إنشاؤها ديناميكيًا في وقت التشغيل.
خطوة:
1. من علامة التبويب "قياسي" في مربع الأدوات، اسحب عنصر التحكم RadioButtonList إلى الصفحة.
2. يمكنك أيضًا اختيار تغيير اتجاه العنوان عن طريق تعيين خاصية TextAlign في نافذة "الخصائص".
3. يمكنك أيضًا اختيار تغيير تخطيط عنصر التحكم لعرض أعمدة متعددة.
4. اتبع إحدى الطرق التالية لإنشاء عنصر لعنصر التحكم:
· إنشاء كل عنصر على حدة.
· ربط البيانات بعنصر التحكم.
5. كيفية: تعيين التحديد والحصول عليه في عنصر تحكم خادم RadioButton Web
يمكنك تعيين زر الاختيار المحدد في وقت التصميم، أو في التعليمات البرمجية في وقت التشغيل. إذا كان زر الاختيار ينتمي إلى مجموعة، فسيؤدي تعيين الزر إلى مسح جميع التحديدات الأخرى في المجموعة.
ملاحظة: إذا كنت تستخدم عنصر التحكم RadioButtonList، فستختلف عملية الحصول على قيمة الزر وتعيينها.
1. قم بتعيين عنصر تحكم RadioButton المحدد
قم بتعيين خاصية التحقق الخاصة بعنصر التحكم إلى true. إذا قمت بتحديد عناصر تحكم RadioButton متعددة في مجموعة، فسيحدد المتصفح الزر الذي سيتم تحديده.
إذا قمت بتعيين هذه الخاصية إلى false، فسيتم مسح التحديد ولكن لن يتم تحديد زر اختيار آخر. ولذلك، يمكنك مسح كافة التحديدات عن طريق تعيين الخاصية "محدد" لجميع أزرار الاختيار في المجموعة إلى "خطأ".
إن تحديد عنصر تحكم RadioButton الذي تم تحديده هو في الأساس اختبار للخاصية Checked.
الفراغ العام Button1_Click (مرسل الكائن، System.EventArgs e)
{
إذا (RadioButton1.Checked) {
Label1.Text = "لقد حددت" + RadioButton1.Text;
}
وإلا إذا (RadioButton2.Checked) {
Label1.Text = "لقد حددت" + RadioButton2.Text;
}
وإلا إذا (RadioButton3.Checked) {
Label1.Text = "لقد حددت" + RadioButton3.Text;
}
}
6. كيفية: تعيين التخطيط في عنصر تحكم خادم الويب RadioButtonList
بشكل افتراضي، يعرض عنصر تحكم خادم الويب RadioButtonList قائمة من الأزرار فقط. ومع ذلك، يمكنك تحديد أي عدد من الأعمدة، وداخل هذه الأعمدة، يمكنك أيضًا تحديد كيفية فرز العناصر: عموديًا (افتراضي) أو أفقيًا. يبدو التخطيط الرأسي المكون من ثلاثة أعمدة كما يلي:
أ د ج
ب ه ح
ج ف
ينتج عن التخطيط الأفقي لنفس العناصر التخطيط التالي:
أ ب ج
د ه ف
ز ح
تحديد عدد الأعمدة وفرزها
· قم بتعيين خاصية RepeatColumns لعنصر التحكم RadioButtonList على العدد المطلوب من الأعمدة.
· استخدم تعداد RepeatDirection لتعيين خاصية RepeatDirection إلى عمودي أو أفقي، كما هو موضح في مثال التعليمات البرمجية التالي.
باطلة محمية Button1_Click (مرسل الكائن، System.EventArgs e)
{
// إنشاء خمسة أزرار اختيار.
سلسلة[] الألوان = {"أحمر"، "أزرق"، "أخضر"، "أصفر"، "برتقالي"}؛
this.RadioButtonList1.Items.Clear();
for(int i=0;i <colors.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// ضع أزرار الاختيار أفقيًا.
this.RadioButtonList1.RepeatDirection =
RepeatDirection.Horizontal;
}
7. كيفية: الرد على اختيارات المستخدم في مجموعة التحكم بخادم RadioButton Web
عندما يقوم المستخدم بتحديد عنصر تحكم RadioButton، يقوم عنصر التحكم بإثارة حدث يمكنك الرد عليه.
الوصف: تختلف الأحداث التي يثيرها عنصر تحكم RadioButtonList عن الأحداث التي يثيرها عنصر تحكم RadioButton واحد.
قد لا تحتاج إلى الرد مباشرة على حدث تحديد عنصر التحكم RadioButton على الإطلاق. قم بالرد على هذا الحدث فقط إذا كان من الضروري معرفة متى قام المستخدم بتغيير التحديد في مجموعة أزرار الاختيار.
إذا كنت تريد فقط معرفة زر الاختيار الذي تم تحديده ولا تريد معرفة ما إذا كان التحديد قد تغير، فيمكنك فقط اختبار تحديد زر الاختيار بعد إرسال النموذج إلى الخادم.
لأن كل عنصر تحكم في خادم RadioButton هو عنصر تحكم منفصل ويمكن لكل عنصر تحكم رفع الأحداث بشكل مستقل؛ ولا تقوم مجموعة أزرار الاختيار برفع الأحداث ككل.
قم بإنشاء معالج حدث للحدث CheckedChanged لعنصر التحكم.
افتراضيًا، لا يتسبب حدث CheckedChanged في إرسال صفحة نماذج الويب إلى الخادم على الفور. بدلاً من ذلك، يتم رفع الحدث في رمز الخادم في المرة التالية التي يتم فيها إرسال النموذج (على سبيل المثال، عند النقر فوق عنصر تحكم خادم Button Web). لكي يتسبب الحدث CheckedChanged في الترحيل الفوري، قم بتعيين خاصية AutoPostBack لعنصر التحكم RadioButton إلى true.
ملاحظة: لإرسال عنصر التحكم RadioButton إلى الخادم عند تحديده، يجب أن يدعم المستعرض ECMAScript (JScript وJavaScript) ويجب أن يقوم متصفح المستخدم بتمكين البرمجة النصية.
يوضح مثال التعليمات البرمجية التالي كيفية الاستجابة عندما يقوم مستخدم بتحديد عنصر تحكم RadioButton.
الفراغ العام RadioButton1_CheckedChanged (مرسل الكائن،
System.EventArgs ه)
{
Label1.Text = "لقد حددت زر الاختيار" + RadioButton1.Text;