Китай |
Управление 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 можно задать цвет фона таблицы.