Как я могу подтвердить, а затем отключить кнопку в asp.net/javascript
-
20-08-2019 - |
Вопрос
У меня есть стандартная веб-страница ASP.NET 2.0 с кнопкой «Удалить».Что мне нужно и я не могу понять, как это осуществить, так это то, что когда пользователь нажимает кнопку удаления, появляется всплывающее диалоговое окно подтверждения с вопросом: «Вы уверены?».Если пользователь говорит «да», я хочу отключить кнопку удаления и выполнить обратную передачу, которая запустит серверный код deleteButton_Click.
Вот тег:
<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" />
Вот javascript (в jquery) для обработки щелчка на стороне клиента:
var deleteButton = $(input.eq(0));
deleteButton.click( function()
{
var a = confirm( "Are you sure you want to delete this item?" );
if ( a == false )
{
return false;
}
else
{
deleteButton.attr( "disabled", "disabled" );
__doPostBack( deleteButton.attr( "id" ), "" );
}
} );
Диалоговое окно подтверждения работает должным образом, и отключение тоже работает нормально.Форма отлично выполняет обратную передачу, но не запускает обработчик событий deleteButton_Click.Код JavaScript __doPostBack существует на странице.
Я мог бы добавить UseSubmitBehavior="false" в тег deleteButton, но тогда он игнорировал бы ответ диалогового окна подтверждения.
Так что, возможно, я прошу здесь слишком многого от ASP.NET.Есть идеи, как заставить это работать?
Спасибо,
Крейг
Решение 3
Спасибо за отзыв, но это было довольно простое решение.
Строка JavaScript должна быть:
__doPostBack( deleteButton.attr( "name" ), "" );
вместо:
__doPostBack( deleteButton.attr( "id" ), "" );
Я не осознавал, что атрибут «имя» — это тот атрибут, который искал метод doPostBack.
Другие советы
btnSubmit.Attributes.Add("onclick", "if(confirm(\"Are you sure you want to delete this item?\" ){this.disabled=true;" + ClientScript.GetPostBackEventReference(btnSubmit, "").ToString() + "}else{return false;}");
Взгляните на этот вопрос StackOverflow, он мне показался очень полезным:
Отключить кнопку при отправке формы
Добавьте логику подтверждения...и ты должен быть готов...
Я взялся за голову и написал метод расширения для вас и для себя тоже :)
public static void ConfirmThenDisableButtonOnClick(this Button buttonControl, string confirmMessage, string clientFunction)
{
StringBuilder sb = new StringBuilder();
// If the page has ASP.NET validators on it, this code ensures the
// page validates before continuing.
if (buttonControl.CausesValidation && !String.IsNullOrEmpty(buttonControl.ValidationGroup))
{
sb.Append("if ( typeof( Page_ClientValidate ) == 'function' ) { ");
sb.AppendFormat(@"if ( ! Page_ClientValidate('{0}') ) {{ return false; }} }} ", buttonControl.ValidationGroup);
}
//pop confirm, if confirm==true, disable button
sb.AppendFormat("if(confirm('{0}\')){{this.disabled=true;", confirmMessage.Replace("\"","").Replace("'",""));
// If a secondary JavaScript function has been provided, and if it can be found,
// call it. Note the name of the JavaScript function to call should be passed without
// parens.
if (!String.IsNullOrEmpty(clientFunction))
{
sb.AppendFormat("if ( typeof( {0} ) == 'function' ) {{ {0}() }};", clientFunction);
}
// GetPostBackEventReference() obtains a reference to a client-side script function
// that causes the server to post back to the page (ie this causes the server-side part
// of the "click" to be performed).
sb.Append(buttonControl.Page.ClientScript.GetPostBackEventReference(buttonControl, ""));
// if confirm==false do nothing
sb.Append(";}else{return false;}");
// Add the JavaScript created a code to be executed when the button is clicked.
buttonControl.Attributes.Add("onclick", sb.ToString());
}
только что добавил проверку валидации :)
Вместо того, чтобы выполнять обратную передачу через JavaScript, вы можете использовать OnClientClick для достижения той же цели.
<asp:Button OnClientClick="if (confirm('Are you sure?')) {this.disabled = true;} else {return false;}" />
Или, если вы хотите выполнить больше действий через JavaScript, чем просто отключить кнопку, вы можете сказать что-то вроде этого:
<asp:Button OnClientClick="return DisableOnConfirm();" />
Вам просто нужно убедиться, что вы формулируете это в форме оператора возврата, чтобы, когда вы не хотите, чтобы функция ASP запускалась, в операторе в конечном итоге говорилось «return false;».
Javascript:
deleteButton.disabled = true;
С#:
deleteButton.Enabled = false;
Вероятно, вам следует отключить кнопку на стороне сервера в событии deleteButton_Click (потому что вы выполните обратную передачу и заново создадите страницу).
<asp:Button ID="deleteButton" Text="Delete" OnClick="deleteButton_Click" runat="server" OnClientClick="javascript:return confirm('are you sure blah blah blah ...')" />
И в коде программной части:
private void deleteButton_Click(object sender, EventArgs e) {
deleteButton.Enabled = false;
// and the rest of event handling ...
}
Немного странно, что событие щелчка не срабатывает.Я бы предположил, что это произошло из-за отключения кнопки, но обычно это происходит только тогда, когда кнопка отключена на сервере, а не только на клиенте.Хотя это и не идеальное решение для вашей функции Page_Load, вы можете проверить обратную передачу и/или асинхронную обратную передачу и определить цель обратной передачи (в данном случае это ваша кнопка), а затем вызвать оттуда какой-либо метод.Вы также можете передавать аргументы, используя функцию __doPostBack().
Изначально я не был уверен, говорите ли вы о событии щелчка на стороне клиента ИЛИ о событии щелчка на стороне сервера.Я думаю, вам следует явно указать, что событие щелчка на стороне сервера не срабатывает.
В любом случае попробуйте <%@ Page EnableEventValidation="false" %> на своей странице ASPX и посмотрите, работает ли он (по умолчанию установлено значение true).Я не помню, чтобы этот атрибут работал в деталях, но эта функция гарантирует, что событие на стороне сервера запускается только в законных случаях.Например.допустим, на вашей странице была XSS-уязвимость, и хакер внедрил JavaScript для вызова кнопки удаления.Этот атрибут помогает предотвратить такие атаки.
$(":submit").click(function ()
{
$(this).attr("disabled", true); // disable input
if (confirm("Press OK to submit"))
{
__doPostBack(this.id, ""); // if user presses OK; submit
}
else
{
// If user presses cancel; enable input and stop submit
$(this).attr("disabled", false);
return false;
}
});
Я решил сделать это функцией JS, которую можно было бы вызывать с любой кнопки.
Вот пример, который работает, однако я бы переместил JavaScript в другое место, например в существующий файл .js или тег head.
<script>
function confirmPostback(button) {
if (confirm('Are you sure?')) {
button.disabled = true;
__doPostBack(button.name, '')
return true;
} else {
return false;
}
}
</script>
<asp:Button ID="TestPostback" runat="server" Text="Test Postback"
UseSubmitBehavior="false" OnClientClick="return confirmPostback(this)" />