Несколько форм на странице в WebForms и клавиша Enter
Одно из ограничений WebForms — вся страница заворачивается в один тег <form>. В том случае, если на странице
располагается несколько логических «форм», например, форма логина и небольшая форма поиска, которая есть на всех страницах,
нажатие клавиши Enter в поле поиска может не приводить к срабатыванию правильного обработчика на серверной стороне.
Для решения проблемы можно использовать JavaScript, перехватывая нажатие клавиши Enter и вызывая соответствующий обработчик (например, клика на кнопке), который, в свою очередь, сформирует корректный postback-запрос.
Пример класса на Prototype:
/*
Namespace emulation
*/
var CrispStudio = {Goratovara : {}};
/*
Enter fixer
*/
CrispStudio.Goratovara.EnterFixer = Class.create();
CrispStudio.Goratovara.EnterFixer.prototype = {
initialize: function(options) {
this.clickElement = $(options.clickElementId);
this.fixEnterKey = this.fixEnterKey.bindAsEventListener(this);
if (options.bindToElementIds) {
options.bindToElementIds.each(function(item) {
Event.observe(item, 'keydown', this.fixEnterKey);
} .bind(this)
);
}
if (options.cssSelector) {
$$(options.cssSelector).each(function(item) {
Event.observe(item, 'keydown', this.fixEnterKey);
} .bind(this)
);
}
},
fixEnterKey: function(e) {
if (e.keyCode == 13) {
Event.stop(e);
this.clickElement.click();
}
}
};
Перечень полей можно передать в виде нескольких вариантов: id элемента, массива id или CSS-селектор (в варианте на JQuery всё можно упростить).
Пример использования:
<script type="text/javascript">
Event.observe(window, 'load', function() {
new CrispStudio.Goratovara.EnterFixer(
{
cssSelector: '.bottom_search_phrase',
clickElementId: '<%= ibSearchBot.ClientID %>'
}
);
});
});
</script>
