Элементы управления 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, а затем вручную назначьте все элементы управления группе. Имя группы может быть любым; все переключатели с одинаковым именем группы считаются частью одной группы.
Добавьте на страницу веб-серверный элемент управления RadioButtonList. Элементы списка в этом элементе управления автоматически группируются.
2. События RadioButton и RadioButtonList.
События работают по-разному между одним элементом управления RadioButton и элементом управления RadioButtonList.
3. Одиночный элемент управления RadioButton
Один элемент управления 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 отображается в браузере, он будет разделен на две части: элемент ввода, представляющий переключатель, и отдельный элемент метки, представляющий заголовок переключателя. Эти два элемента объединяются в элемент span.
Когда вы применяете стили или параметры свойств к элементу управления RadioButton, эти стили и свойства применяются к внешнему элементу диапазона. Например, если вы установили свойство BackColor элемента управления, этот параметр применяется к элементу span. Следовательно, это повлияет как на внутренний ввод, так и на элементы метки.
Иногда вам может потребоваться установить отдельные настройки для переключателей и меток. Элемент управления RadioButton поддерживает два свойства, которые можно задать во время выполнения. Атрибут InputAttributes позволяет добавлять атрибуты HTML к элементу ввода, а атрибут LabelAttributes позволяет добавлять атрибуты HTML к элементу метки. Установленные свойства передаются в браузер как есть. В следующем примере показано, как настроить свойства элемента ввода так, чтобы, когда пользователь наводит указатель мыши на переключатель, цвет менялся только у переключателя, а не метки.
RadioButton1.InputAttributes.Add("onmouseover", "this.style.backgroundColor = 'красный'");
RadioButton1.InputAttributes.Add("onmouseout", "this.style.backgroundColor = 'white'");
6. Привязка данных к элементам управления
Вы можете привязать один элемент управления RadioButton к источнику данных, а также привязать любое свойство элемента управления RadioButton к любому полю источника данных. Например, вы можете установить свойство Text элемента управления на основе информации в базе данных.
Поскольку переключатели используются группами, привязка одного переключателя к источнику данных встречается редко. Вместо этого чаще всего элемент управления 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.
Выбранный переключатель можно установить во время разработки или в коде во время выполнения. Если переключатель принадлежит группе, установка кнопки приведет к отмене всех остальных вариантов выбора в группе.
Примечание. Если вы используете элемент управления RadioButtonList, процесс получения и установки значения кнопки отличается.
1. Установите выбранный элемент управления RadioButton.
Установите для свойства Checked элемента управления значение true. Если вы выберете несколько элементов управления RadioButton в группе, браузер определит, какая кнопка станет выбранной.
Если вы установите для этого свойства значение false, выбор будет очищен, но другой переключатель не будет выбран. Таким образом, вы можете отменить все выборы, установив для свойства Checked всех переключателей в группе значение false.
Определение того, какой элемент управления RadioButton выбран, по сути, проверяет свойство Checked.
public void 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 значение «Вертикально» или «Горизонтально», как показано в следующем примере кода.
protected void Button1_Click (отправитель объекта, System.EventArgs e)
{
// Создаем пять переключателей.
string[] Colors = {"Красный", "Синий", "Зеленый", "Желтый", "Оранжевый"};
this.RadioButtonList1.Items.Clear();
for(int i=0;i <colors.GetLength(0);i++){
this.RadioButtonList1.Items.Add(colors[i]);
}
// Располагаем переключатели горизонтально.
this.RadioButtonList1.RepeatDirection =
ПовторениеДиректион.Горизонтальный;
}
7. Как: реагировать на выбор пользователя в группе управления веб-сервером RadioButton.
Когда пользователь выбирает элемент управления RadioButton, этот элемент управления вызывает событие, на которое вы можете отреагировать.
Описание. События, вызываемые элементом управления RadioButtonList, отличаются от событий, вызываемых одним элементом управления RadioButton.
Возможно, вам вообще не потребуется реагировать непосредственно на событие выбора элемента управления RadioButton. Отвечайте на это событие только в том случае, если необходимо знать, когда пользователь изменил выбор в группе переключателей.
Если вы просто хотите узнать, какой переключатель был выбран, и не хотите знать, изменился ли выбор, вы можете просто проверить выбор переключателя после отправки формы на сервер.
Поскольку каждый серверный элемент управления RadioButton представляет собой отдельный элемент управления, и каждый элемент управления может генерировать события независимо, группа переключателей не генерирует события в целом.
Создайте обработчик событий CheckedChanged элемента управления.
По умолчанию событие CheckedChanged не приводит к немедленной отправке страницы веб-форм на сервер. Вместо этого событие возникает в коде сервера при следующей отправке формы (например, при нажатии серверного веб-элемента управления Button). Чтобы событие CheckedChanged вызывало немедленную публикацию, установите для свойства AutoPostBack элемента управления RadioButton значение true.
Примечание. Чтобы отправить элемент управления RadioButton на сервер, когда он выбран, браузер должен поддерживать ECMAScript (JScript, JavaScript), а браузер пользователя должен включать сценарии.
В следующем примере кода показано, как реагировать, когда пользователь выбирает элемент управления RadioButton.
public void RadioButton1_CheckedChanged (отправитель объекта,
System.EventArgs д)
{
Label1.Text = "Вы выбрали переключатель " + RadioButton1.Text;