Опубликован: 13.07.2010 | Уровень: специалист | Доступ: платный
Самостоятельная работа 3:

Управление 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 запустите ее в броузере. Убедитесь, что пока все внешне нажимается, но функциональности нет. Но зато есть интерфейсная основа для программирования
Иван Циферблат
Иван Циферблат
Россия, Таганрог, 36, 2000