OnclientClick и OnClick не работают одновременно?
У меня есть кнопка, подобная следующей,
<asp:Button ID="pagerLeftButton" runat="server" OnClientClick="disable(this)" onclick="pager_Left_Click" Text="<" />
Когда я так использую свою кнопку, onclick не срабатывает. Когда я удаляю OnClientClick, то запускается onclick.
Что мне нужно сделать, это отключить кнопку во время обратной передачи и включить ее после окончания обратной передачи.
Изменить: Дополнительная информация:
Я добавил точку останова в мои функции запуска C# part и отлаживаю, они точно не запускаются. Эти функции похожи
protected void pager_Left_Click(object sender, EventArgs e)
{
//Do smthing.
}
protected void pager_Right_Click(object sender, EventArgs e)
{
//Do smthing.
}
и когда я нажимаю кнопку, она отключается на 1-2 секунды и включается автоматически, но я не уверен, почему она включена. Я не добавил ни одной части, чтобы он снова был включен.
7 ответов
Из этой статьи на web.archive.org:
Хитрость заключается в использовании свойств OnClientClick и UseSubmitBehavior элемента управления кнопки. Существуют и другие методы, использующие код на стороне сервера для добавления атрибутов, но я думаю, что простота такого подхода гораздо привлекательнее:
<asp:Button runat="server" ID="BtnSubmit" OnClientClick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="false" OnClick="BtnSubmit_Click" Text="Submit Me!" />OnClientClick позволяет добавить клиентский скрипт OnClick. В этом случае JavaScript отключит элемент кнопки и изменит его текстовое значение на сообщение о ходе выполнения. После завершения обратной передачи вновь отрендеренная страница вернет кнопку в исходное состояние без какой-либо дополнительной работы.
Единственная проблема, которая возникает при отключении кнопки отправки на стороне клиента, заключается в том, что она отменяет отправку в браузере и, следовательно, обратную передачу. Если для свойства UseSubmitBehavior задано значение false, в.NET необходимо внедрить необходимый клиентский сценарий для запуска обратной передачи, а не полагаться на поведение отправки формы в браузере. В этом случае код, который он внедряет, будет:
__doPostBack('BtnSubmit','')Это добавляется в конец нашего кода OnClientClick, давая нам этот визуализированный HTML:
<input type="button" name="BtnSubmit" onclick="this.disabled = true; this.value ='Submitting...';__doPostBack('BtnSubmit','')" value="Submit Me!" id="BtnSubmit" />Это дает приятную кнопку отключения эффекта и обработки текста, пока обратная передача завершается.
OnClientClick кажется очень требовательным при использовании с OnClick.
Я попытался безуспешно со следующими вариантами использования:
OnClientClick="return ValidateSearch();"
OnClientClick="if(ValidateSearch()) return true;"
OnClientClick="ValidateSearch();"
Но они не работали. Следующее сработало:
<asp:Button ID="keywordSearch" runat="server" Text="Search" TabIndex="1"
OnClick="keywordSearch_Click"
OnClientClick="if (!ValidateSearch()) { return false;};" />
Здесь есть две проблемы:
Отключение кнопки на стороне клиента предотвращает обратную передачу
Чтобы преодолеть это, отключите кнопку после JavaScript onclick событие. Простой способ сделать это - использовать setTimeout как предполагает этот ответ.
Так же OnClientClick код выполняется даже в случае сбоя проверки ASP.NET, поэтому, возможно, стоит добавить проверку на Page_IsValid, Это гарантирует, что кнопка не будет отключена, если проверка не удалась.
OnClientClick="(function(button) { setTimeout(function () { if (Page_IsValid) button.disabled = true; }, 0); })(this);"
Лучше поместить весь этот код JavaScript в его собственную функцию, как показывает вопрос:
OnClientClick="disable(this);"
function disable(button) {
setTimeout(function () {
if (Page_IsValid)
button.disabled = true;
}, 0);
}
Отключение кнопки на стороне клиента не отключает ее на стороне сервера
Чтобы преодолеть это, отключите кнопку на стороне сервера. Например, в OnClick обработчик события:
OnClick="Button1_Click"
protected void Button1_Click(object sender, EventArgs e)
{
((Button)sender).Enabled = false;
}
Наконец, имейте в виду, что предотвращение дублирования нажатий кнопок не мешает двум разным пользователям одновременно отправлять одни и те же данные. Обязательно учитывайте это на стороне сервера.
Vinay (выше) дал эффективный обходной путь. Фактически причина, по которой событие OnClick кнопки не работает после функции события OnClientClick, заключается в том, что MS определила его, где после того, как кнопка отключена (в функции, вызываемой событием OnClientClick), кнопка "уважает" это, не пытаясь завершить действие кнопки, вызывая определенный метод события OnClick.
Я боролся несколько часов, пытаясь понять это. После того, как я удалил оператор, чтобы отключить кнопку отправки (которая была внутри функции OnClientClick), метод OnClick был вызван без дальнейших проблем.
Microsoft, если вы слушаете, после нажатия кнопки она должна выполнить назначенное ей действие, даже если оно отключено на протяжении всего этого действия. Пока он не отключен при нажатии, он должен завершить все назначенные методы.
Что если вы не сразу установите кнопку в отключенное состояние, а отложите ее через setTimeout? Ваша функция "отключить" вернется, и отправка будет продолжена.
Ваш JavaScript в порядке, если на этой странице не запущены другие скрипты, которые могут повредить все. Вы можете проверить это с помощью Firebug.
Сейчас я немного протестировал, и кажется, что ASP.net игнорирует отключенные элементы управления. В основном, выполняется обратная передача, но, вероятно, инфраструктура игнорирует такие события, поскольку она "предполагает", что отключенная кнопка не может вызвать какую-либо обратную передачу, и поэтому игнорирует возможные подключенные обработчики. Теперь это только мои личные рассуждения, можно использовать Reflector, чтобы проверить это более подробно.
В качестве решения вы могли бы действительно попытаться сделать отключение на более позднем этапе, в основном вы задерживаете control.disabled = "disabled" вызов с использованием JavaTimer или некоторых других функций. Таким образом, во-первых, выполняется обратная передача на сервер перед отключением элемента управления функцией JavaScript. Не проверял это, но это могло сработать
function UpdateClick(btn) {
for (i = 0; i < Page_Validators.length; i++) {
ValidatorValidate(Page_Validators[i]);
if (Page_Validators[i].isvalid == false)
return false;
}
btn.disabled = 'false';
btn.value = 'Please Wait...';
return true;
}