Учебный курс по WebMatrix, глава 7. Работа с формами
Это продолжение учебного курса по WebMatrix. Предыдущие части руководство можно найти здесь:
Форма — это раздел документа HTML, в который помещаются элементы управления для ввода пользователей, такие как текстовые поля, флажки, переключатели и раскрывающиеся списки. Формы используются тогда, когда планируется собирать и обрабатывать данные, введенные пользователем.
В этом руководстве- Создание HTML-формы.
- Чтение из формы введенных пользователем данных.
- Проверка введенных пользователем данных.
- Восстановление значений формы после отправки страницы.
В этой главе изучаются следующие программные концепции в ASP.NET:
- объект Request;
- проверка введенных данных;
- кодирование HTML.
1. Создайте новый веб-сайт.
2. В корневой папке создайте веб-страницу с именем Form.cshtml и введите следующую разметку.
<label for="CompanyName">Название компании:</label>
<label for="ContactName">Контактное имя:</label>
<label for="Employees">Число сотрудников:</label>
3. Откройте эту страницу в браузере. Появится простая форма с тремя полями для ввода и кнопкой «Отправить».
Если в этот момент нажать кнопку «Отправить», то ничего не произойдет. Чтобы форму можно было использовать, следует добавить некоторый код, который будет выполняться на сервере.
Чтение введенных пользователем данных из формыДля обработки формы добавляется код, который читает представленные значения полей и делает с ними что-либо. Следующая процедура показывает, как можно читать поля и отображать введенные пользователем данные на странице. (В рабочем приложении с введенными пользователем данными делается обычно что-либо более интересное. Подобное будет делаться в главе, посвященной работе с базами данных.)
В начало файла Form.cshtml добавьте следующий код:
string companyname = Request["companyname"];
string contactname = Request["contactname"];
int employeecount = Request["employees"].AsInt();
Название организации: @companyname <br />
Контактное имя: @contactname <br />
Число сотрудников: @employeecount <br />
Этот код работает таким образом, что при первом обращении к странице, пользователь видит только пустую форму. Пользователь заполняет форму и нажимает кнопку «Отправить». Это действие отправляет введенные пользователем данные на сервер. Запрос приходит на ту же страницу (а именно Form.cshtml), поскольку при создании формы в предыдущей процедуре атрибут Action элемента Form был оставлен пустым:
Теперь по нажатию кнопки «Отправить» введенные значения появятся над полями формы:
Просмотрите код этой страницы. Сначала выполнялась инициализация переменной result как объекта HtmlString, который будет содержать HTML строку. (Дополнительные сведения о кодировании HTML для красоты и безопасности Вы найдете далее в этой главе.)
Затем используется метод IsPost, чтобы определить, была ли страница отправлена, т. е. нажал ли пользователь кнопку «Отправить». Если отправка была, метод IsPost возвращает значение true. Это стандартный способ, которым веб-страницы в ASP.NET определяют, выполняется ли работа с первоначальным запросом (запросом GET), или с обратной передачей (запросом POST). (Дополнительные сведения Вы найдете в предыдущих Главах.)
Затем значения, введенные пользователем, извлекаются из объекта Request, а затем помещаются в переменные. Объект Request содержит все значения, отправленные со страницы, каждое из которых идентифицируется ключом. Ключ является эквивалентом атрибута name поля формы, который требуется прочитать. Например, чтобы прочитать поле companyname, используется Request["companyname"].
Значения формы хранятся в объекте Request как строки. Следовательно, когда требуется работать со значением как с числом, с датой или с каким-либо другим типом, необходимо преобразовать его из типа string в нужный тип. В следующем примере метод AsInt объекта Request используется для преобразования значения из поля employees (которое содержит число сотрудников) в целое число.
Кодирование HTML для красоты и безопасностиВ HTML такие символы, как <, > и &, имеют специальное назначение. Если эти особые символы обнаруживаются там, где они не ожидались, то они могут нарушить внешний вид и функциональность веб-страницы. Например, браузер интерпретирует символ < (если за ним не следует пробел) как начало элемента HTML, такого как <b> или <input . >. Если браузер не распознает элемент, он просто исключает строку, которая начинается с символа, пока не достигнет чего-либо, что будет им распознано. Очевидно, это может привести нарушениям при отображении страницы.
Кодирование HTML заменяет эти зарезервированные символы кодом, который браузеры интерпретируют как правильный символ. Например, символ "<" заменяется на "<", а символ ">" заменяется на ">". Браузер отображает эти замещающие строки как символы, которые планировалось увидеть.
На самом деле это хорошая привычка — использовать кодирование HTML всякий раз при отображении строк, полученных от пользователя. Если этого не делать, пользователь может попытаться использовать веб-страницу, чтобы выполнить вредоносный скрипт или сделать что-нибудь другое, дискредитирующее безопасность сайта или то, что не планировалось. (Это особенно важно, если ввод пользователя принимается, сохраняется где-то, а позднее отображается, например как комментарий в блоге, пользовательский обзор или что-то подобное)
Проверка введенных пользователем данныхПользователи делают ошибки. Их просят заполнить поле, а они забывают, или их просят ввести число сотрудников, а они вместо числа указывают имя. Чтобы перед обработкой формы убедиться, что она заполнена правильно, выполняется проверка введенных пользователем данных.
Следующая процедура показывает, как можно проверить все три поля формы, чтобы убедиться, что пользователь не оставил их пустыми. Также выполняется проверка, является ли значение, введенное в поле числа сотрудников, числом. Если ошибки обнаруживаются, будет отображаться сообщение об ошибке, указывающее пользователю, какие значения не прошли проверку.