Управление HTML-элементами в ASP.NET

Упражнение 10. Элемент управления HTMLInputRadioButton

Элемент управления HTMLInputRadioButton - переключатель позволяет программировать HTML-тег <input type="radio">. Этот тег дает возможность пользователю делать выбор в пределах документа HTML. В отличие от флажков, которые можно установить во включенное состояние сразу несколько, переключатель позволяет выбрать только один элемент из группы.

Рассмотрим его программирование на примере. Создадим страницу с двумя группами переключателей, где все входящие в группу переключатели должны иметь одинаковое имя id (или name). При нажатии управляющей кнопки Submit броузер передаст данные на сервер, где управляющий код проверит, какой из переключателей включен и вернет броузеру страницу с соответствующим сообщением.

Иногда интерфейсную часть страницы удобнее разработать в специализированном Web-редакторе, чем средствами оболочки. Поэтому для тренировки следующую страницу создадим в Web-редакторе Macromedia Dreamweaver MX 2004, а затем готовый HTML-код перенесем на ASP.NET страницу, где создадим для него управление на C#.

Подготовка HTML-кода в редакторе Dreamweaver

• Запустите редактор Dreamweaver и в его меню выполните команду Edit/Preferences. Появится окно свойств, в котором установите настройку кодировки при создании новых документов на Кириллица (Windows)

увеличить изображение

• Создайте новый HTML-документ через меню File/New (можно сразу его где-нибудь сохранить как временный)

увеличить изображение

• Напишите первую отображаемую строку и в панели свойств присвойте ей значение Heading1 из раскрывающегося списка Format

увеличить изображение

• Введите следующую строку текста с надписью

Выберите нужный цвет:

• Переведите курсор на новую строку и выполните команду меню Insert/Tag... Появится диалоговое окно Tag Chooser, из которого выберите тег радиокнопки, как показано на рисунке

• После нажатия кнопки Insert в дополнительном окне выберите вкладку General, введите в поле Name имя кнопки colorRadio (цвет) и отметьте флажок Checked для этой первой кнопки, чтобы при загрузке страницы эта кнопка была включена. Затем, не выходя из окна Tag Editor - Input, выберите вкладку Style Sheet/Accessibility и в поле ID введите значение radio1. Повторите эту процедуру для создания еще двух кнопок с тем же именем colorRadio, но с ID: radio2 и radio3. Флажок Checked не поднимайте.
• Продолжите создание еще двух кнопок, но теперь полю Name присвойте значение fruitRadio (фрукт) и для первой кнопки поднимите флажок Checked. Полю ID присвойте значения radio4 и radio5. По этим значениям мы будем управлять кнопками в коде C#
• Вставьте пустую строку перед созданными радиокнопками и через меню Insert/Table вызовите окно настройки вставляемой таблицы. Таблицу мы создали для позиционирования группы из трех кнопок

• Перетащите курсором в ячейки таблицы первые три радиокнопки, затем справа от них введите три надписи Red (красный), Green (зеленый), Blue (синий).
• Ниже создайте еще одну строку и введите текст

Выберите нужный фрукт:

• Ниже для позиционирования создайте еще одну таблицу с одной строкой и двумя столбцами, переместите туда две оставшиеся радиокнопки и добавьте надписи Бананы и Апельсины.
• Еще ниже вставьте кнопку Submit прежним же способом

• Поле Name оставьте пустым, поле Value заполните значением Показать результат, в поле ID введите SubmitButton
• Ниже кнопки вставьте тег горизонтальной черты

• Еще ниже вставьте две гиперссылки с названиями Назад и Вперед и относительными URL-адресами на предыдущую и следующую страницы

HTMLInputImage.aspx
     HTMLInputText.aspx

• Вставьте после ссылок таблицу из двух строк и двух столбцов. Выделите первую строку и объедините ячейки через контекстное меню

• Заполните первую строку текстом

Результаты вычислений

а в ячейки нижней строки вставьте по тегу h2 со значениями ID: colorText и fruitText соответственно

• Вставьте перед самой верхней строчкой страницы дескриптор <form>

• Перейдите в режим редактирования кода и перенесите закрывающую часть </form> в конец кода перед дескриптором </body>. При этом важно чтобы вложенность пар дескрипторов не нарушилась. Перейдите в режим Design и убедитесь, что все окно обрамлено красной пунктирной рамкой - областью действия формы
• Щелкните мышью где-нибудь на основном тексте и через меню выполните команду Edit/Select All. В панели Properties кнопкой отцентрируйте все элементы HTML-страницы, щелкнув на кнопке Align Center

увеличить изображение

• Измените цвет фона таблиц с радиокнопками. Для этого поместите курсор внутрь таблицы и в строке состояния окна редактирования щелкните по надписи <table>

увеличить изображение

Таблица выделится полностью и в образце Bg color можно задать цвет фона таблицы.

• Сохраните страницу на диске и нажатием клавиши F12 запустите ее в броузере. Убедитесь, что пока все внешне нажимается, но функциональности нет. Но зато есть интерфейсная основа для программирования