Сумасшедшие формы. Описание объекта Response Адреса электронной почты
Описываемый объект является очень полезным и мощным инструментом. Данный объект имеет несколько методов, их описание приводится ниже:
Коллекции: Методы: Свойства: Коллекция Response.CookiesКоллекция Cookies устанавливает значения для cookies. Если указанные cookies не существуют, то создает их. Если cookie существует, то принимает новое значение, а старое уничтожается.
Response.Cookies(cookie) [(ключ) | . аттрибуты ] = значение
Параметры:
- cookie - Имя cookie
- ключ - Необязательный параметр. Если он указан, то cookie - это справочник (вложенный) и ключ - это множество значений.
- аттрибуты - Указанная информация о самих cookie. Данный параметр может быть один из следующих:
- значение - Указывает значение, которое необходимо присвоить данному ключу или атрибуту.
| Название | Описание |
| Domain | Только запись. Если указан, то cookie передаются только по запросу из этого домена. |
| Expires | Только запись. Дата, когда у cookie истекает срок действия. Эта дата должна быть установлена для того, чтобы cookie записались на клиентский жесткий диск после окончания сессии. Если этот атрибут не установлен, то дата окончания срока действия cookie принимается текущей датой. Cookie прекратят срок действия сразу же по окончании сессии. |
| HasKey | Только чтение. Указывает на то, содержит ли cookie данный ключ. |
| Path | Только запись. Если указан, то cookie передаются только по запросу с этого пути. Если параметр не установлен, то используется путь к приложению. |
| Secure | Только запись. Указывает на то, защищены ли будут cookie или нет. |
Замечание:
Если cookie с ключем созданы так, как показано в следующем скрипте,
то следующий заголовок будет послан:
Set-Cookie:MYCOOKIE=TYPE1=сахар&TYPE2=печенье
Если же присвоить mycookie значение без использования ключей, то это действие разрушит type1 и type2 - ключи. К примеру:
В предыдущем примере ключи type1 и type2 будут разрушены и их значения потерены. Mycookie будет теперь содержать в себе значение шоколадный зефир.
Вы также можете проверить существование конкретного ключа следующим способом:
Если будет выведено TRUE, значить такой ключ существует, в случае FALSE - нет.
Метод Response.WriteResponse.Write переменная_или_значение
Параметры:
- переменная_или_значение - Данные для вывода на экран браузера через HTML. Этот параметр может быть любого типа, поддерживаемого VisualBasic Scripting Edition. То есть данные могут быть типов: дата, строка, символ, числовые значения. Значение данного параметра не может содержать комбинации %>. Вместо нее можно использовать равнозначную комбинацию %\>. Web-сервер будет преобразовывать эту последовательность в требуемую, когда скрипт будет выполнен.
Следующий пример показывает как работает метод Response.write для вывода сообщения клиенту.
Я просто скажу вам: А ваше имя
Следующий пример добавляет HTML-таг на web-страничку. Так как данный метод не может содержать комбинацию %>, то мы используем последовательность %\>. Итак пример скрипта:
Результатом вывода будет строка:
| 160 | Неразрывный пробел | |
| 60 | < | Меньше чем |
| 62 | > | Больше чем |
| 38 | & | Амперсанд |
| 162 | ¢ | Цент |
| 163 | £ | Фунт |
| 165 | ¥ | Йена |
| 8364 | € | Евро |
| 167 | § | Параграф |
| 169 | Авторское право | |
| 174 | ® | Зарегистрированный товарный знак |
| 8482 | ™ | Товарный знак |
Межсайтовое внедрение сценария является одним из самых распространенных способов атаки на компьютер пользователя. Тем не менее вы можете существенно ослабить способность атакующего инфицировать ваше Web-приложение вредоносным кодом. Создавая приложение, внимательно отнеситесь к шифрованию всех выходных значений страницы перед отправкой их в браузер конечного пользователя.
Перевод: Влад Мержевич
Каждый знает о веб-формах, не так ли? Вставляем тег , несколько , может быть , завершаем это все кнопкой и готово.
Вы не знаете и половины об этом. HTML5 определяет более десятка новых типов полей, которые вы можете использовать в своих формах. И когда я говорю «использовать», я имею в виду что их можно использовать прямо сейчас - без каких-либо прокладок, хаков или обходных путей. Не волнуйтесь сильно, я не хочу сказать, что все эти новые захватывающие возможности на самом деле поддерживаются в любом браузере. Совершенно нет, я не имею в виду, что всеми. В современных браузерах, да, ваши формы покажут все, на что они способны. Но в старых браузерах ваши формы по-прежнему будут работать, хотя и не в полной мере. То есть эти возможности элегантно деградируют в каждом браузере. Даже в IE6.
Подсказывающий текст| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | 4.0+ | 4.0+ | 11.0+ | 4.0+ | - |
Первое улучшение HTML5 относительно форм это возможность установки подсказывающего текста в поле ввода. Такой текст отображается в поле ввода, если поле пустое и у него нет фокуса. Как только вы щелкните в поле ввода (или перейдете к нему через Tab ) подсказывающий текст исчезает.
Вы, наверное, видели подсказывающий текст ранее. Например, Mozilla Firefox включает подсказывающий текст в адресной строке с надписью «Поиск в закладках и журнале».
Когда вы щелкаете по адресной строке, подсказывающий текст исчезает.
Вот как вы можете включить подсказывающий текст в свои формы.
Браузеры, которые не поддерживают атрибут placeholder , его просто игнорируют. Без вреда и нарушений.
Спроси профессора Маркапа☞ В. Могу я использовать HTML разметку для атрибута placeholder ? Я хочу вставить картинку или, может, изменить цвета.
О. Атрибут placeholder может содержать только текст, никакого HTML-кода. Однако есть специальные расширения CSS, которые позволяют вам установить стиль текста в некоторых браузерах.
Поля с автофокусом| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | - | 4.0+ | 3.0+ | 10.0+ | - | - |
Сайты могут использовать JavaScript для автоматического получения фокуса в первом поле формы. К примеру, на главной странице Google.com автофокус есть у поля для ввода поисковых ключевых слов. Хотя это и удобно для большинства людей, но может раздражать опытных пользователей и людей с особыми потребностями. Если вы нажмете пробел в ожидании прокрутки страницы, прокрутки не будет, потому что фокус находится в поле ввода формы (будет набираться пробел в поле вместо прокрутки). Если вы перевели фокус на другое поле ввода, пока страница загружается, скрипт автофокуса на сайте может «услужливо» переместить фокус обратно на исходное поле ввода, прерывая ваш набор и заставляя вводить текст в неверном месте.
Поскольку автофокус работает через JavaScript, могут быть сложности для обработки этих крайних вариантов и мало возможностей для тех людей, которые не хотят, чтобы веб-страница «похищала» их фокус.
Для решения этих проблема HTML5 вводит атрибут autofocus для всех элементов форм. Атрибут autofocus делает именно то, как и звучит: как только страница загружается, перемещает фокус в указанное поле. Но поскольку это всего лишь разметка, а не сценарий, поведение будет постоянным для всех сайтов. Кроме того, производители браузеров (или авторы расширений) могут предложить пользователям способ отключить автофокус.
Вот как вы можете установить поле формы с автофокусом.
Браузеры, которые не поддерживают атрибут autofocus , будут его игнорировать.
Что такое? Говорите, что желаете, чтобы автофокус работал везде, а не только в вычурных HTML5-браузерах? Вы можете оставить текущий скрипт с автофокусом, просто сделайте два небольших изменения:
- добавьте атрибут autofocus в код HTML;
- проверьте, поддерживает ли браузер атрибут autofocus , и если нет, запустите собственный скрипт.
Автофокус с альтернативой
if (!("autofocus" in document.createElement("input"))
) {
document.getElementById("q").focus();
}
Многие веб-страницы ждут, пока сработает window.onload и устанавливают фокус. Но событие window.onload не сработает, пока все изображения не загрузятся. Если на вашей странице много изображений, такие наивные скрипты потенциально изменят фокус после того, как пользователь начал взаимодействовать с другой частью вашей страницы. Вот почему опытные пользователи ненавидят скрипты автофокуса.
Например, в предыдущем разделе скрипт автофокуса размещен сразу после поля формы, на который он ссылается. Это оптимальное решение, но оно может оскорбить ваши чувства ставить блок кода JavaScript в середине страницы (или более приземлено, ваша система может быть не настолько гибкой). Если вы не можете вставить скрипт в середине страницы, вы должны установить фокус через пользовательское событие, как $(document).ready() в jQuery вместо window.onload .
Автофокус через jQuery
$(document).ready(function() {
$("#q").focus();
}
});
Пользовательское событие jQuery срабатывает, как только DOM доступен - то есть ждет, пока загрузится текст страницы, но не ждет, пока все изображения загрузятся. Это не оптимальный подход - если страница необычно большая или сетевое соединение медленное, пользователь может по-прежнему взаимодействовать со страницей перед тем, как выполнится скрипт с фокусом. Но все же это намного лучше, чем ждать, пока произойдет событие window.onload .
Если вы согласны и готовы вставить скрипт с одним оператором в код вашей страницы, это компромисс, который менее противный, чем первый вариант и лучше чем второй. Вы можете использовать пользовательские события jQuery для задания собственных событий, скажем autofocus_ready. Тогда вы можете вызывать это событие вручную, сразу после доступности поля с автофокусом. Спасибо Е. М. Штенбергу за обучение меня этой технике.
Автофокус с альтернативным пользовательским событием
$(document).bind("autofocus_ready", function() {
if (!("autofocus" in document.createElement("input"))) {
$("#q").focus();
}
});
$(document).trigger("autofocus_ready");
Это решение оптимальное, как и первый подход. Фокус будет установлен в поле формы, как только это станет технически возможно, в то время как текст страницы все еще грузится. Часть логики приложения (фокус в поле формы) перенесена из тела страницы в раздел . Этот пример основан на jQuery, но концепция пользовательских событий не является уникальной для jQuery. Другие JavaScript-библиотеки вроде YUI и Dojo предлагает аналогичные возможности.
Подведем итоги.
- Правильная установка фокуса это важно.
- Если это возможно, пусть браузер использует атрибут autofocus в том поле, где вы желаете фокус.
- Если вы используете альтернативный код для старых браузеров, определяйте поддержку атрибута autofocus , чтобы скрипт выполнялся только в старых браузерах.
- Устанавливайте фокус как можно раньше. Вставьте скрипт с фокусом в код сразу же после поля формы. Если это не задевает вас, вставьте JavaScript-библиотеку, которая поддерживает пользовательские события, и вызывайте событие в коде сразу же после поля формы. Если это невозможно, используйте событие вроде $(document).ready() из jQuery.
- Ни при каких обстоятельствах не ждите, пока window.onload установит фокус.
Уже более десяти лет формы содержат всего несколько видов полей. Наиболее распространенные следующие.
Все эти типы полей по-прежнему работают в HTML5. Если вы «обновитесь до HTML5» (возможно сменой !DOCTYPE ), вам не придется делать ни единого изменения в ваших формах. Ура обратной совместимости!
Однако HTML5 определяет 13 новых типов полей и нет никаких причин не начать их использовать.
Первый из этих новых типов адрес электронной почты. Выглядит примерно так.
Я собирался написать предложение, которое началось «в браузерах, которые не поддерживают type="email" ...», но остановился. Почему? Потому что не уверен, что браузеры не поддерживают type="email" . Все браузеры «поддерживают» type="email" . Они могут не делать нечто специальное, но браузеры, которые не распознают type="email" будут относиться к нему как type="text" и отобразят как обычное текстовое поле.
Я подчеркну насколько это важно. В Интернете миллионы форм, которые просят ввести адрес электронной почты и все из них используют . Вы видите текстовое поле, вводите свой адрес электронной почты в него и все тут. И вот появляется HTML5, который определяет type="email" . Браузеры сходят с ума? Нет. Каждый браузер на Земле воспринимает неизвестный атрибут type как type="text" - даже IE6. Так что вы можете «обновить» ваши формы используя type="email" прямо сейчас.
Что случится, если скажем, браузер поддерживает type="email" ? Ну, это может означать что угодно. Спецификация HTML5 не требует какого-либо конкретного пользовательского интерфейса для новых типов полей. Опера дополняет поле формы небольшой иконкой. Другие HTML5-браузеры как Safari и Chrome отображают как текстовое поле - такое же, как type="text" - так что ваши пользователи не заметят разницу (пока не посмотрят исходный код).
И еще есть iPhone.
iPhone не имеет физической клавиатуры. Весь «набор» осуществляется нажатием по экранной клавиатуре, всплывающей в соответствующее время, например, когда вы перешли в поле формы на веб-странице. Apple сделал нечто хитрое в браузере iPhone-а. Он распознает некоторые новые поля HTML5 и динамически меняет экранную клавиатуру для оптимизации ввода.
К примеру, адрес электронной почты это текст, правильно? Конечно, но это особый вид текста. Так, практически все адреса электронной почты содержат символ @ и, по крайней мере, одну точку (.), но они вряд ли содержат пробел. Поэтому, когда вы используете iPhone и переходите к элементу , вы получите экранную клавиатуру, которая содержит пробел меньше обычного, а также выделенные клавиши для символов. и @.
Подведу итог. Нет никаких недостатков для немедленного перевода всех ваших полей с электронными адресами в type="email" . Практически никто этого не заметит, кроме пользователей iPhone, которые, вероятно, тоже этого не заметят. Но те, кто заметят, тихо улыбнутся и поблагодарят вас за то, что их работа стала немного легче.
Веб-адресаВеб-адрес - которые зубрилы стандартов называли URL, за исключением нескольких педантов, которые называли URI - это еще один тип специализированного текста. Синтаксис веб-адреса ограничивается соответствующим стандартом Интернет. Если кто-то просит вас ввести веб-адрес в форму, он ожидает что-то вроде «http://www.google.com/», а не «125 Фарвуд Роуд». Косые линии являются общими - даже у главной страницы Google их три. Точки также распространены, но пробелы запрещены. И каждый веб-адрес имеет суффикс домена как «.com» или «.org».
И вот... (барабанная дробь, пожалуйста)... . На iPhone это выглядит следующим образом.
iPhone изменил свою виртуальную клавиатуру, как это сделал для адреса электронной почты, но теперь оптимизировал ее для набора веб-адреса. Пробел полностью заменен тремя виртуальными клавишами: косая линия, точка и «.com» (вы можете удерживать нажатой клавишу «.com», чтобы выбрать другой суффикс вроде «.org» или «.net»).
Браузеры, которые не поддерживают HTML5, будут относиться к type="url" как к type="text" , так что нет недочетов по использованию этого типа для всех полей, где нужно вводить веб-адрес.
Числа как счетчикиСледующий шаг: числа. Запрос числа более сложен, чем запрос адреса электронной почты или веб-адреса. Прежде всего, числа сложнее, чем вы думаете. Быстро выберите число. -1? Нет, я имел в виду число между 1 и 10,7 ½? Нет, нет, не дробь, тупица. π? Теперь вы просто выбрали иррациональное число.
Хочу заметить, у вас не часто спрашивают «просто число». Более вероятно, что будут просить число в определенном диапазоне. Вы можете только захотеть, чтобы в пределах этого диапазона были определенные типы чисел - может быть, целые числа, но не дроби или десятичные числа или что-то более экзотическое, например, кратные 10. HTML5 все это охватывает.
Выбрать число, почти любое
Рассмотрим по одному атрибуту.
- type="number" означает, что это числовое поле.
- min="0" указывает минимально допустимое значение для этого поля.
- max="10" является максимально допустимым значением.
- step="2" в сочетании с минимальным значением определяет допустимые числа в диапазоне: 0, 2, 4 и так далее, вплоть до максимального значения.
- value="6" значение по умолчанию. Должно выглядеть знакомым, этот же атрибут всегда используется для определения значений полей формы. Я упоминаю здесь об этом для отправной точки, что HTML5 основывается на предыдущих версиях HTML. Вам не нужно переучиваться, чтобы делать то, что вы уже делали.
Это код числового поля. Имейте в виду, что все эти атрибуты являются необязательными. Если у вас задан минимум, но не максимум, можете указать атрибут min , но не max . По умолчанию значение шага равно 1 и вы можете опустить атрибут step , пока не понадобится другое значение шага. Если нет значения по умолчанию, то атрибут value может быть пустой строкой или даже вообще опущен.
Но HTML5 не останавливается на достигнутом. За ту же самую низкую, низкую цену свободы вы получаете эти удобные методы JavaScript.
- input.stepUp(n) повышает значение поля на n.
- input.stepDown(n) понижает значение поля на n.
- input.valueAsNumber возвращает текущее значение как число с плавающей точкой (свойство input.value это всегда строка).
Проблемы с отображением? Ну, правильный интерфейс по управлению числами в браузерах реализован по-разному. На iPhone, где набор имеет сложности, браузер опять оптимизирует виртуальную клавиатуру для ввода чисел.
В настольной версии Оперы поле type="number" отображается как счетчик с небольшими стрелками вверх и вниз, которые можно нажать для изменения значений.
Опера уважает атрибуты min , max и step , поэтому вы всегда добьетесь приемлемого числового значения. Если вы увеличите значение до максимума, стрелка вверх в счетчике становится серой.
Как и со всеми другими полями ввода, что я обсуждал в этой главе, браузеры, которые не поддерживают type="number" , будут относиться к нему как к type="text" . Значение по умолчанию будет отображаться в поле (так как оно хранится в атрибуте value ), но другие атрибуты, такие как min и max будут игнорироваться. Вы можете свободно реализовать их самостоятельно или использовать JavaScript-фреймворк, который уже реализует управление счетчиком. Вначале проверьте , как здесь.
if (! .inputtypes.number) {
// нет встроенной поддержки для поля type=number
// может попробовать Dojo или другой JavaScript-фреймворк
}
Счетчик не единственный способ представления ввода чисел. Вы, наверное, также видели ползунок, который выглядит так.
Теперь вы также можете иметь ползунок в форме. Код выглядит странно похожим на поле счетчика.
Все доступные атрибуты такие же, как и у type="number" - min , max , step , value - и означают то же самое. Единственное отличие состоит в пользовательском интерфейсе. Вместо поля для ввода, браузеры, как ожидается, отображают type="range" в виде ползунка. На момент написания последние версии Safari, Chrome и Opera работали с этим. К сожалению, iPhone отображает в виде простого текстового поля, он даже не оптимизирует свою экранную клавиатуру для ввода чисел. Все остальные браузеры просто рассматривать поле как type="text" , поэтому нет никаких причин начать использовать этот тип немедленно.
HTML 4 не включает выбор даты через календарь. JavaScript-фреймворки позволяют это обойти (Dojo , jQuery UI , YUI , Closure Library), но, конечно, каждое из этих решений требует «внедрения» фреймворка для любого встроенного календаря.
HTML5, наконец, определяет способ включить встроенный выбор даты без всяких скриптов. В действительности, их шесть: дата, месяц, неделя, время, дата + время и дата + время с часовым поясом.
Пока поддержка... скудна.
| type="date" | 9.0+ | - |
| type="month" | 9.0+ | - |
| type="week" | 9.0+ | - |
| type="time" | 9.0+ | - |
| type="datetime" | 9.0+ | - |
| type="datetime-local" | 9.0+ | - |
Вот как Opera отображает :
Если вам нужно время вместе с датой, Opera также поддерживает :
Если вам нужен месяц плюс год (например, срок действия кредитной карты), Opera может отобразить :
Менее распространенным, но доступным является выбор недели в году через :
Последнее, но не менее важное, это выбор времени с :
Выбор даты с альтернативой
...
var i = document.createElement("input");
i.setAttribute("type", "date");
if (i.type == "text") {
// Нет встроенной поддержки выбора даты:(
// Используйте Dojo/jQueryUI/YUI/Closure для ее создания,
// затем динамически замените элемент
}
Вероятно, другие браузеры в конечном итоге будут поддерживать эти типы. Подобно type="email" и другим типам, эти поля формы будут отображаться в виде обычного текста в тех браузерах, которые не распознают type="date" и его варианты. Если вы хотите, то можете просто использовать , чем сделаете пользователей Opera счастливыми, и подождите, пока другие браузеры наверстают упущенное. Более реально это использовать , но проверить, имеет ли браузер встроенную поддержку выбора даты, и включить альтернативное решение в виде скрипта по вашему выбору (Dojo , jQuery UI , YUI , Closure Library или другие варианты).
Окно поискаИтак, поиск. Не только поиск от Google или Yahoo (ну, те тоже). Подумайте о любом окне поиска, на любой странице, на любом сайте. Амазон имеет окно поиска, Яндекс имеет окно поиска, большинство блогов тоже. Как они сделаны? , как и любое другое текстовое поле в сети. Давайте это исправим.
Поиск нового поколения
В некоторых браузерах вы не заметите никакого отличия от обычного текстового поля. Но если вы используете Safari на Mac OS X, это будет выглядеть так.
Нашли разницу? Поле ввода имеет закругленные углы! Я знаю, знаю, вы вряд ли можете сдержать свои чувства. Но подождите, это еще не все! Когда вы начнете вводить в поле type="search" Safari вставит небольшую кнопку «x» с правой стороны окна. Нажатие на «x» очищает содержимое поля. Google Chrome, который имеет под капотом ту же технологию, ведет себя так же. Обе эти маленькие хитрости выглядят и ведут себя аналогично родному поиску в iTunes и других клиентских приложениях Mac OS X.
Apple.com использует для поиска по своему сайту, чтобы помочь сайту передать «маколюбное» ощущение. Но здесь нет ничего специфичного для Маков. Это просто код, так что каждый браузер на любой платформе может выбрать, как отображать в соответствии с соглашениями платформы. Как и со всеми другими новыми типами, браузеры, которые не признают type="search" будут относиться к нему как type="text" , так что нет абсолютно никаких причин не начать использовать type="search" для всех ваших окон поиска прямо сегодня.
Профессор Маркап говоритПо умолчанию Safari не применяет к большинство стилей. Если вы хотите заставить Safari понимать поле для поиска как обычное текстовое поле (чтобы применить собственные стили), добавьте это правило к вашей таблице стилей.
input {
-webkit-appearance: textfield;
}
Спасибо Джону Лейну за обучение меня этому трюку.
Выбор цветаHTML5 также определяет поле , которое позволяет выбрать цвет и возвращает его в шестнадцатеричном представлении. Ни один браузер выбор цвета не поддерживает, что является позором, потому что я всегда любил палитры Mac OS. Может быть, когда-нибудь.
Прим. переводчика. Opera 11 поддерживает эту возможность.
Валидация формВ этой главе я говорил о новых элементах форм и новых возможностях, таких как автофокус, но я не упомянул, пожалуй, самую захватывающую часть форм HTML5: автоматическую проверку входных данных. Рассмотрим общие проблемы ввода адреса электронной почты в форме. Вероятно, у вас есть проверка на стороне клиента через JavaScript, после чего идет проверка на стороне сервера через PHP, Python или другой серверный язык. HTML5 никогда не сможет заменить проверку на стороне сервера, но он может когда-нибудь заменить проверку на стороне клиента.
Есть две большие проблемы, связанные с проверкой адреса электронной почты на JavaScript:
Серьезно, вы получите адрес неправильно. Определение того, что набор случайных символов это корректный адрес электронной почты невероятно сложно . Чем сильнее вы смотрите, тем сложнее становится. Я уже говорил, что это очень, очень сложно ? Не проще ли повесить эту головную боль на ваш браузер?
Opera проверяет type="email"
Вот скриншот из Opera 11, хотя функциональность присутствует с Opera 9. Код включает в себя установку значения email для атрибута type . Когда пользователь Оперы пытается отправить форму с , браузер автоматически проверяет адрес почты, даже если скрипты отключены.
HTML5 также предлагает проверку веб-адресов с полем и чисел с . Проверка чисел принимает во внимание значения атрибутов min и max , поэтому браузеры не позволят вам отправить форму, если вы вводите слишком большое число.
Не существует кода, включающего проверку форм в HTML5, это делается по умолчанию. Чтобы отключить проверку, используйте атрибут novalidate .
Не проверяй меня
Браузеры медленно включают поддержку проверки форм в HTML5. Firefox 4 будет иметь полную поддержку. К сожалению, Safari и Chrome реализуют лишь частично: они проверяют элементы форм, но не выводят никаких видимых сообщений, когда поля формы не проходит проверку. Другими словами, если вы введете неверную (или неправильно составленную) дату в type="date" , Safari и Chrome не отправит форму, но и не будет говорить вам, почему это не сделали. Они будут устанавливать фокус на поле, которое содержит недопустимое значение, но не отображать сообщение об ошибке, как Opera или Firefox 4.
Обязательные поля| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| - | 4.0+ | - | - | 9.0+ | - | - |
Валидация форм в HTML5 не ограничивается типом каждого поля. Вы также можете указать, что некоторые поля обязательны для заполнения, такие поля должны иметь значение, прежде чем вы сможете отправить форму.
Код для обязательных полей прост, насколько это возможно.
Браузеры могут изменить внешний исходный вид обязательного поля. Вот к примеру, как это выглядит в Mozilla Firefox 4.0.
Кроме того, если вы пытаетесь отправить форму без заполнения обязательного значения, Firefox выведет информационную панель, говорящую, что поле является обязательным и не может быть пустым.
Генерация ответа из контроллеров
После того, как контроллер завершил обработку запроса, обычно требуется сгенерировать ответ. Когда мы создаем низкоуровневый контроллер, непосредственно реализуя интерфейс IController, то должны возложить на себя ответственность за каждый аспект обработки запроса, включая генерацию ответа клиенту.
Например, для отправки HTML-ответа потребуется создать и скомпоновать HTML-данные, после чего отправить их клиенту с использованием метода Response.Write(). Аналогично, чтобы переадресовать браузер пользователя на другой URL, понадобится вызвать метод Response.Redirect() и передать ему необходимый URL. Оба подхода демонстрируются в коде, приведенном в примере ниже, в котором показаны расширения класса BasicController, который мы создали в одной из предыдущих статей с помощью реализации интерфейса IController:
Using System.Web.Mvc; using System.Web.Routing; namespace ControllersAndActions.Controllers { public class BasicController: IController { public void Execute(RequestContext requestContext) { string controller = (string)requestContext.RouteData.Values["controller"]; string action = (string)requestContext.RouteData.Values["action"]; if (action.ToLower() == "redirect") { requestContext.HttpContext.Response.Redirect("/Derived/Index"); } else { requestContext.HttpContext.Response.Write(string.Format("Контроллер: {0}, Метод действия: {1}", controller, action)); } } } }
Тот же самый подход можно применять и в случае наследования контроллера от класса Controller. Класс HttpResponseBase, который возвращается при чтении свойства requestContext.HttpContext.Response в методе Execute(), доступен через свойство Controller.Response, как показано в примере ниже, где приведены расширения класса DerivedController, также созданного ранее с помощью наследования от класса Controller:
Using System; using System.Web; using System.Web.Mvc; namespace ControllersAndActions.Controllers { public class DerivedController: Controller { public ActionResult Index() { // ... } public void ProduceOutput() { if (Server.MachineName == "ProfessorWeb") Response.Redirect("/Basic/Index"); else Response.Write("Контроллер: Derived, Метод действия: ProduceOutput"); } } }
Метод ProduceOutput() использует значение свойства Server.MachineName для принятия решения о том, какой ответ отправлять клиенту. ("ProfessorWeb" - это имя моей машины разработки.)
Хотя такой подход генерации ответа пользователю работает, с ним связано несколько проблем:
Классы контроллеров должны содержать сведения о структуре HTML или URL, что усложняет чтение и сопровождение классов.
Контроллер, который генерирует ответ напрямую в вывод, трудно поддается модульному тестированию. Понадобится создать имитированные реализации объекта Response и затем иметь возможность обрабатывать вывод, получаемый из контроллера, для определения, что он собой представляет. Это может означать, например, необходимость в реализации разбора HTML-разметки на ключевые слова, что является долгим и утомительным процессом.
Такая обработка мелких деталей каждого ответа, сложна и чревата ошибками. Некоторым программистам нравится абсолютный контроль, обеспечиваемый построением низкоуровневого контроллера, но обычно это очень быстро обрастает сложностями.
К счастью, в MVC Framework имеется удобное средство, которое решает все упомянутые проблемы - результаты действий. В последующих разделах приведены объяснения концепции результатов действий и показаны различные способы ее применения для генерации ответов из контроллеров.
Результаты действийРезультаты действий в MVC Framework используются для отделения заявлений о намерениях от выполнения намерений (извиняюсь за тавтологию). Концепция покажется простой после того, как вы освоитесь с ней, но она требует определенного времени на понимание из-за некоторой доли косвенности.
Вместо того чтобы иметь дело напрямую с объектом Response, методы действий возвращают объект класса, производного от ActionResult , который описывает, каким должен быть ответ из контроллера - например, визуализация представления либо перенаправление на другой URL или метод действия. Однако (это и есть та самая косвенность) ответ напрямую не генерируется. Взамен создается объект ActionResult, который MVC Framework обрабатывает для получения результата после того, как был вызван метод действия.
Система результатов действий является примером шаблона проектирования Command (Команда) . Этот шаблон представляет сценарии, в рамках которых вы сохраняете и передаете объекты, описывающие выполняемые операции.
Когда инфраструктура MVC Framework получает объект ActionResult от метода действия, она вызывает метод ExecuteResult() , определенный в классе этого объекта. Реализация результатов действий затем работает с объектом Response, генерируя вывод, который соответствует вашему намерению. Чтобы продемонстрировать это в работе, создадим папку Infrastructure и добавим в нее новый файл класса по имени CustomRedirectResult.cs со специальной реализацией ActionResult, показанной в примере ниже:
Using System.Web.Mvc; namespace ControllersAndActions.Infrastructure { public class CustomRedirectResult: ActionResult { public string Url { get; set; } public override void ExecuteResult(ControllerContext context) { string fullUrl = UrlHelper.GenerateContentUrl(Url, context.HttpContext); context.HttpContext.Response.Redirect(fullUrl); } } }
Этот класс основан на манере работы класса System.Web.Mvc.RedirectResult. Одно из преимуществ открытого кода MVC Framework связано с возможностью исследовать внутреннюю работу чего угодно. Класс CustomRedirectResult намного проще своего эквивалента в MVC, но его вполне достаточно для целей этой статьи.
При создании экземпляра класса RedirectResult мы передаем URL, на который должен быть перенаправлен пользователь. Метод ExecuteResult(), который будет выполнен инфраструктурой MVC Framework по завершении метода действия, получает объект Response для запроса через объект ControllerContext, предоставляемый инфраструктурой, и вызывает либо метод RedirectPermanent(), либо метод Redirect() (это в точности отражает то, что делалось внутри низкоуровневой реализации IController в примере ранее в статье).
Использование класса CustomRedirectResult проиллюстрировано в примере ниже, в котором представлены изменения, которые внесены в контроллер Derived:
// ... using ControllersAndActions.Infrastructure; namespace ControllersAndActions.Controllers { public class DerivedController: Controller { public ActionResult Index() { // ... } public ActionResult ProduceOutput() { if (Server.MachineName == "MyMachineName") return new CustomRedirectResult { Url = "/Basic/Index" }; else { Response.Write("Контроллер: Derived, Метод действия: ProduceOutput"); return null; } } } }
Обратите внимание, что мы были вынуждены изменить результат метода действия для возвращения ActionResult. Мы возвращаем null, если не хотим, чтобы инфраструктура MVC Framework предпринимала что-либо, когда наш метод действия был выполнен, что и делалось в случае невозвращения экземпляра CustomRedirectResult.
Модульное тестирование контроллеров и действий
Многие части MVC Framework спроектированы так, чтобы упростить проведение модульного тестирования, и это особенно справедливо в отношении действий и контроллеров. Для такой поддержки существует несколько причин:
Тестировать действия и контроллеры можно за пределами веб-сервера. Доступ к объектам контекста осуществляется через их базовые классы (такие как HttpRequestBase), что легко поддается имитации.
Для тестирования результатов метода действия проводить разбор HTML-разметки не понадобится. Чтобы удостовериться в получении ожидаемых результатов, можно проинспектировать возвращаемый объект ActionResult.
Эмуляция клиентских запросов не нужна. Система привязки моделей MVC Framework позволяет писать методы действий, которые получают входные данные в своих параметрах. Для тестирования метода действия необходимо просто вызвать его напрямую и предоставить соответствующие значения параметров.
В следующих статьях, посвященных генерации данных из контроллеров, будет показано, как создавать модульные тесты для разных видов результатов действий.
Не забывайте, что модульное тестирование - это только часть общей картины. Сложное поведение в приложении возникает, когда методы действий вызываются последовательно. Модульное тестирование лучше всего сочетается с другими подходами к тестированию.
Теперь, когда известно, каким образом работает специальный результат действия по перенаправлению, можно переключиться на его эквивалент, предлагаемый MVC framework, который обладает большими возможностями и тщательно протестирован в Microsoft. Необходимое изменение контроллера Derived приведено ниже:
// ... public ActionResult ProduceOutput() { return new RedirectResult("/Basic/Index"); } // ...
Из метода действия был удален условный оператор, а это означает, что после запуска приложения и перехода на URL вида /Derived/ProduceOutput браузер будет перенаправлен на URL вида /Basic/Index. Чтобы упростить код метода действия, класс Controller включает удобные методы для генерации различных видов объектов ActionResult. Таким образом, к примеру, мы можем получить тот же эффект, что и в примере выше, возвратив результат метода Redirect():
// ... public ActionResult ProduceOutput() { return Redirect("/Basic/Index"); } // ...
В системе результатов действий нет ничего особо сложного, но в конечном итоге она помогает получить более простой, чистый и согласованный код, который является легким в чтении и проведении модульного тестирования. Например, в случае с перенаправлением можно просто проверить, что метод действия возвращает экземпляр RedirectResult, свойство Url которого содержит ожидаемую цель.
В инфраструктуре MVC Framework определено множество встроенных типов результатов действий, которые описаны в таблице ниже:
| ViewResult | Визуализирует указанный или стандартный шаблон представления |
View() |
| PartialViewResult | Визуализирует указанный или стандартный шаблон частичного представления |
PartialView() |
| RedirectToRouteResult | Выдает перенаправление HTTP 301 или 302 на метод действия или указанную запись маршрута, генерируя URL согласно конфигурации маршрутизации |
RedirectToAction()
RedirectToActionPermanent() RedirectToRoute() RedirectToRoutePermanent() |
| RedirectResult | Выдает перенаправление HTTP 301 или 302 на заданный URL |
Redirect()
RedirectPermanent() |
| ContentResult | Возвращает браузеру неформатированные текстовые данные, дополнительно устанавливая заголовок content-type |
Content() |
| FileResult | Передает двоичные данные (такие как файл на диске или байтовый массив в памяти) напрямую в браузер |
File() |
| JsonResult | Сериализирует объект.NET в формат JSON и отправляет его в качестве ответа. Ответы подобного вида более часто генерируются при использовании средств Web API и AJAX |
Json() |
| JavaScriptResult | Отправляет фрагмент исходного кода JavaScript, который должен быть выполнен браузером |
JavaScript() |
| HttpUnauthorizedResult | Устанавливает код состояния ответа HTTP в 401 (означает "не авторизован"), который заставляет действующий механизм аутентификации (аутентификация с помощью форм или аутентификация Windows) предложить посетителю войти |
Нет |
| HttpNotFoundResult | Возвращает ошибку HTTP с кодом 404 - Not found (не найдено) |
HttpNotFound() |
| HttpStatusCodeResult | Возвращает указанный код HTTP |
Нет |
| EmptyResult | Ничего не делает |
Нет |
Все эти типы являются производными от класса ActionResult, и многие из них имеют удобные вспомогательные методы в классе Controller. Мы продемонстрируем использование этих типов результатов в последующих статьях.
After receiving and interpreting a request message, a server responds with an HTTP response message:
- A Status-line
- Zero or more header (General|Response|Entity) fields followed by CRLF
- An empty line (i.e., a line with nothing preceding the CRLF) indicating the end of the header fields
- Optionally a message-body
The following sections explain each of the entities used in an HTTP response message.
Message Status-LineA Status-Line consists of the protocol version followed by a numeric status code and its associated textual phrase. The elements are separated by space SP characters.
A server supporting HTTP version 1.1 will return the following version information:
HTTP-Version = HTTP/1.1
Status CodeThe Status-Code element is a 3-digit integer where first digit of the Status-Code defines the class of response and the last two digits do not have any categorization role. There are 5 values for the first digit:
| 1 | 1xx: Informational
It means the request was received and the process is continuing. |
| 2 | 2xx: Success
It means the action was successfully received, understood, and accepted. |
| 3 | 3xx: Redirection
It means further action must be taken in order to complete the request. |
| 4 | 4xx: Client Error
It means the request contains incorrect syntax or cannot be fulfilled. |
| 5 | 5xx: Server Error
It means the server failed to fulfill an apparently valid request. |
HTTP status codes are extensible and HTTP applications are not required to understand the meaning of all registered status codes. A list of all the status codes has been given in a separate chapter for your reference.
Response Header FieldsWe will study General-header and Entity-header in a separate chapter when we will learn HTTP header fields. For now, let"s check what Response header fields are.
The response-header fields allow the server to pass additional information about the response which cannot be placed in the Status- Line. These header fields give information about the server and about further access to the resource identified by the Request-URI.
-
Proxy-Authenticate
-
WWW-Authenticate
You can introduce your custom fields in case you are going to write your own custom Web Client and Server.
Examples of Response MessageNow let"s put it all together to form an HTTP response for a request to fetch the hello.htm page from the web server running on сайт
HTTP/1.1 200 OK Date: Mon, 27 Jul 2009 12:28:53 GMT Server: Apache/2.2.14 (Win32) Last-Modified: Wed, 22 Jul 2009 19:15:56 GMT Content-Length: 88 Content-Type: text/html Connection: Closed Hello, World!
The following example shows an HTTP response message displaying error condition when the web server could not find the requested page:
HTTP/1.1 404 Not Found Date: Sun, 18 Oct 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Content-Length: 230 Connection: Closed Content-Type: text/html; charset=iso-8859-1 404 Not Found Not Found
The requested URL /t.html was not found on this server.
Following is an example of HTTP response message showing error condition when the web server encountered a wrong HTTP version in the given HTTP request:
HTTP/1.1 400 Bad Request Date: Sun, 18 Oct 2012 10:36:20 GMT Server: Apache/2.2.14 (Win32) Content-Length: 230 Content-Type: text/html; charset=iso-8859-1 Connection: Closed 400 Bad Request Bad Request
Your browser sent a request that this server could not understand.
The request line contained invalid characters following the protocol string.
