‹h1 align="center"›Страница входа в систему Cars‹/h1›
‹р align="center"›‹br›Введите ‹i›имя пользователя‹/i› и ‹i›пароль‹/i›.‹/р›
‹form id="defaultPage" name="defaultPage"› ‹/form›
‹/body›
‹/html›
Рис. 23.5. Редактирование HTML-документа средствами VS .NET
Теперь давайте построим саму HTML-форму. Вообще говоря, каждый HTML-элемент описывается с помощью атрибута name (соответствующее значение используется для программной идентификации элемента) и атрибута type (это значение задает вид элемента интерфейса, который вы хотите поместить в рамки декларации ‹form›). В зависимости оттого, с каким элементом интерфейса вы работаете, в окне свойств появляется дополнительные атрибуты, присущие данному конкретному элементу.
Пользовательский интерфейс, который мы собираемся здесь построить, будет содержать два текстовых поля ввода (одно из которых – типа Password) и два кнопочных типа (один для подачи запроса с данными формы, а другой – для сброса данных формы в значения по умолчанию).
‹!-- Построение формы для получения информации от пользователя --›
‹form name="defaultPage" id="defaultPage"›
‹P align="center"›Имя пользователя:
‹input id="txtUserName" type="text" NAME="txtUserName"›
‹/P›
‹P align="center"›пароль:
‹input name="txtPassword" type="password" ID="txtPassword"›
‹/P›
‹P align="center"›
‹input name="btnSubmit" type="submit" value="Отправить" io="btnSubmit"›
‹input name="btnReset" type="reset" value="C6poc" ID="btnReset"›
‹/form›
Обратите внимание на то, что здесь для каждого элемента назначены соответствующие значения name и id (txtUserName, txtPassword, btnSubmit и btnReset). Еще более важно то, что каждый элемент ввода имеет дополнительный атрибут type, который ясно идентифицирует их как вполне определенные элементы пользовательского интерфейса. Например, type="reset" указывает на автоматическую очистку всех полей формы и присвоение им начальных значений, type="password" – маскированный ввод пароля, a type="submit" – отправку данных формы получателю. На рис. 23.6 показан вид получившейся страницы.
Рис. 23.6. Исходный вид страницы, сохранённой в файле default.htm
Роль сценариев клиента
Данный файл *.htm может содержать блок кода сценария, который будет помещен в ответный поток и обработан браузером, запросившим этот поток. Есть две главные причины, по которым используются сценарии клиента.
• Проверка пользовательского ввода перед отправкой данных Web-серверу.
• Взаимодействие с моделью DOМ целевого браузера.
В отношении первого пункта следует понимать, что "наследственной" проблемой Web-приложений является необходимость частых обращений к серверу (называемых вторичными обращениями) для обновления HTML-кода, отображаемого в окне браузера. И хотя вторичных обращений полностью избежать нельзя, всегда нужно стремиться минимизировать сетевой обмен. Одним из подходов, уменьшающих количество циклов сетевого обмена, является использование сценария клиента для проверка правильности пользовательского ввода перед отправкой данных формы Web-серверу. Если обнаруживается ошибка (например, не указаны данные в одном из обязательных полей), можно предложить пользователю исправить ошибку, не посылая данные Web-серверу напрасно. (В конце концов, ничто не раздражает пользователя больше, чем отправка данных по медленной связи только для того, чтобы получить в ответ совет исправить ошибки ввода!)
В дополнение к проверке пользовательского ввода, сценарии клиента могут также использоваться для взаимодействия с объектной моделью DOM (Document Object Model – объектная модель документов) браузера. Большинство коммерческих браузеров предлагает множество объектов, которые можно использовать для управления поведением браузера. Главным раздражающим фактором здесь является то, что различные браузеры предлагают подобные, но не идентичные объектные модели. Поэтому запущенный вами сценарий клиента, взаимодействующий с DOM, может работать по-разному в разных браузерах.
Замечание. ASP.NET поддерживает свойство HttpRequest.Browser, которое позволяет в среде выполнения определить возможности браузера, отправившего текущий запрос.
Имеется множество языков сценариев, которые могут использоваться для написания программного кода сценариев клиента. Двумя наиболее популярными из них являются VBScript и JavaScript. Язык VBScript представляет собой подмножество языка программирования Visual Basic 6.0. Следует подчеркнуть, что Microsoft Internet Explorer (IE) – это единственный Web-браузер, имеющий встроенную поддержку VBScript клиента. Поэтому если вы хотите, чтобы ваши HTML-страницы работали корректно в любом коммерческом Web-браузере, для программной логики сценариев клиента лучше VBScript не использовать.
Другим популярным языком сценариев является JavaScript. Здесь следует подчеркнуть, что JavaScript никоим образом не является подмножество языка Java. Хотя JavaScript и Java имеют несколько схожий синтаксис, JavaScript нельзя безоговорочно отнести к семейству языков ООП, поэтому этот язык оказывается далеко не таким мощным, как Java. Но здесь важно то, что все современные Web-браузеры поддерживают JavaScript, что делает этот язык естественным кандидатом на роль языка сценариев клиента.
Замечание. Чтобы еще больше усложнить ситуацию, напомним также о JScript.NET – управляемом языке программирования, с помощью которого, используя подобный сценариям синтаксис, можно строить компоновочные блоки .NET.
Пример сценария клиента
Чтобы продемонстрировать роль сценариев клиента, давайте выясним, как можно выполнить перехват событий, посылаемых HTML-элементами пользовательского интерфейса клиента. Предположим, что вы добавили в свою HTML-страницу default.htm тип Button (с именем btnHelp), которая должна предоставить пользователю возможность увидеть информацию справки. Чтобы выполнить перехват события Click для этой кнопки, активизируйте окно просмотра HTML и выберите имя кнопки из левого раскрывающегося списка. Затем в правом раскрывающемся списке выберите событие onclick. В результате этого в определение атрибута нового типа Button будет добавлен атрибут onclick.
‹input id="btnHelp" type="button" Value="Help" language="javascript" onclick="return btnHelp_onclick()"/›
Visual Studio 2005 также создаст пустую функцию JavaScript, которая будет вызываться при щелчке пользователя на кнопке. Чтобы отобразить окно сообщения клиента, нужно в пределах этой заглушки просто использовать метод alert().
‹script language="javascript" type="text/javascript"›
‹!--
function btnHelp_onclick() {
alert("Это не так уж трудно. Просто щелкните на кнопке Отправить!");
}
-->
‹/script›
Обратите внимание на то, что блок сценария помещен в рамки HTML-комментария (‹!-- --›). Причина этого очень проста. Если ваша страница окажется в браузере, не поддерживающем JavaScript, программный код будет интерпретирован как комментарий и потому проигнорирован. Конечно, возможности вашей страницы будут более узкими, но зато ваша страница не будет полностью отвергнута браузером.
Контроль допустимости вводимых данных
Теперь давайте добавим в нашу страницу default.htm клиентскую поддержку контроля вводимых в форму данных. Нам нужно, чтобы при щелчке пользователя на кнопке Отправить вызвалась функция JavaScript, которая проверяла бы каждый текстовый блок на пустые значения. При наличии пустого значения должно появиться окно сообщения с указанием ввести правильные данные. Сначала обработайте событие onclick для кнопки Отправить.
‹input name="btnSubmit" type="Submit" value="Submit" id="btnSubmit" languaege="javascript" onclick="return btnSubmit_onclick()"›
Этот обработчик события реализуйте так, как показано ниже.
function btnSubmit_onclick() {
// Если пользователь о чем-то забыл, отобразить сообщение.
if ((defaultPage.txtUserName.value == "") || (defaultPage.txtPassword.value == "")) {
alert("Следует указать имя пользователя и пароль!");
return false;
}
return true;
}
Теперь вы можете открыть свой любимый браузер, перейти к странице default.htm в виртуальном каталоге Cars и проверить работу вашего сценария клиента.
http://localhost/Cars/default.htm
Подача запроса формы (GET и POST)
Теперь, когда у вас есть простая HTML-страница, мы должны выяснить, как передать данные формы обратно Web-серверу для обработки. При построении HTML-формы в открывающем дескрипторе ‹form› обычно задается атрибут action, указывающий получателя вводимых в форму данных. Возможными получателями могут быть почтовые серверы, другие файлы HTML, файлы ASP (как "классические", так и .NET) и т.д. Для нашего примера мы используем "классический" файл ASP с именем ClassicAspPage.asp. Обновите свой файл default.htm, указав в нем следующие атрибуты в открывающем дескрипторе ‹form›.
