Несколько форм на странице в WebForms и клавиша Enter

17.11.2009 12:40 / Артём Волк / 1194 просмотра / ...

Одно из ограничений 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>