Таблица 9.1. Три способа заполнения элемента формы |
|
|
|
|||||
Метод |
|
Преимущества |
Недостатки |
|||||
Жестко закодировать значения |
|
Не требует обработки на |
Опции не могут быть |
|||||
в элементе s e l e c t |
|
стороне сервера |
динамическими |
|||||
|
|
|
|
|
|
|
|
|
Заполнить значения, используя |
|
|
|
|
""" |
|||
сценарий серверной части |
Опции могут быть |
Требует дополнительной |
||||||
приложения |
динамическими и |
обработки на сервере |
||||||
|
|
|
заполняться из базы |
|
|
|
||
|
|
|
данных |
|
|
|
|
|
Использовать Ajax для
заполнения формы значениями; Можно связать с другими Требует дополнительной
для извлечения значений |
значениями на странице обработки на сервере |
требуется дообработка на |
|
сервере |
|
Как показано в табл. 9.1, первый элемент формы можно заполнить тремя различными способами.
Первый метод — жестко закодировать значения в элементе select. Данный метод хорош, когда вы используете несколько опций, которые не будут меняться. Второй метод — заполнить значения, используя сценарий серверной части приложения. При таком подходе опции заполняются при визуализации страницы, что позволяет извлекать их из базы данных или файла XML. Третий метод — использовать для заполнения значений инфраструктуру Ajax; этот метод требует дообработки на сервере (извлечения значений), но не требует повторной визуализации всей страницы.
В данном примере мы жестко закодируем значения в списке, поскольку используется всего четыре опции, которые не являются динамическими. Наиболее удачным решением задачи динамической загрузки значений в первый список является использование серверного сценария, заполняющего список в процессе визуализации страницу. В данном случае для заполнения первого списка Ajax использовать не стоит (если только содержимое списка не зависит от других значений, выбранных пользователем в форме).
Как показано в листинге 9.1, первый список должен содержать обработчик событий onchange, добавленный к элементу select. Этот обработчик событий вызывает функцию FillTerritoryO (JavaScript), которая инициирует процесс заполнения второго списка, отправляя запрос серверу.
Листинг 9.1. Форма со связными списками Н Н Н Н Н И Н В И Н Н
<form name="Forml"> <select name="ddlRegion" |
|
||
|
onchange="FillTerritory(this,document.Forml.ddlTerritory)"> |
|
|
|
<option value="-l">Pick A Region</option> |
|
|
|
<option |
value="l">Eastern</option> |
|
|
<option |
value="2">Western</option> |
|
|
<option |
value-"3">Northern</option> |
|
|
<option |
value="4">Southern</option> |
|
|
</select> |
<select name="ddlTerritory"></select> </form> |
^ |
Глава 9. Динамические связанные комбинации |
355 |
Код, приведенный в листинге 9.1, создает форму, инициирующую процесс fillTerritory{) при выборе элемента из первого списка. Функции FillTer- i-itoryO мы передаем две объектные ссылки на элемент. Первая из них — объект списка, к которому прикреплен обработчик событий, вторая — список, который требуется заполнить. Далее нам необходимо разработать код серверной части приложения для FillTerritory (), который бы отправлял я аш запрос серверу.
9.2.2. Разработка взаимодействия клиент/сервер
Основной целью функции FillTerritory () является сбор информации, необходимой для отправки запроса серверу. Эта информация включает выбранную опцию из первого списка, имя формы и имя второго списка. Имея эти данные, мы можем использовать функции Ajax в нашей библиотеке JavaScript для отправки запроса серверу. Итак, первое, что требуется сделать, — это реализовать функциональные возможности Ajax. Код, требуемый для связи с внешним файлом JavaScript net. j s (определяет объект ContentLoader), тривиален. Все, что требуется, — добавить приведенную ниже строку между дескрипторами заголовка вашего документа HTML.
<script type="text/javascript" src="net.js"x/script>
Объект ContentLoader выполняет всю работу, определяя, как отправить запрос серверу, скрывая при этом весь код (зависящий от используемого браузера) в удобном интерфейсном объекте, который мы ввели в главе 3. Это позволяет обмениваться данными с сервером, не обновляя страницу.
Добавив функциональные возможности Ajax, мы сможем построить функцию FillTerritoryO, показанную в листинге 9.2; данный код также включается в заголовок нашего документа.
Листинг 9.2. Функция F i l l T e r r i t o r y U инициализирует запрос Ajax
<script type="text/javascript"> function FillTerritory(oElem,©Target){
// О Получить значение, выбранное в списке var strValue = oElem.options[
oElem.selectedlndex].value; // © Установить целевой URL
var url = "DoubleComboXML.aspx"; // © Построить строку параметров
var strParams = "q=" + strValue + "&f=" + oTarget.form.name +
"&e=" + oTarget.name;
// О Инициализировать загрузчик содержимого var loaderl = new net.ContentLoader(url,FillDropDown,null,
"POST",strParams);