Как запретить пользователям нажимать кнопку дважды? - PullRequest
44 голосов
/ 26 мая 2011

У меня есть старое приложение веб-форм ASP.NET (.NET 2.0), в котором при нажатии кнопки запускается примерно 30 секунд. Мне нужно, чтобы кнопка не была нажата дважды. Это предотвратит публикацию дважды, что приведет к дублированию данных в базе данных.

Я пытался добавить;

OnClientClick="this.disabled='true';"

, чтобы попытаться отключить кнопку в JavaScript. Однако, хотя кнопка становится отключенной, обратная передача для кнопки затем не работает.

Отключение кнопки для предотвращения многократных представлений является идеальным для этого приложения. Как я могу это сделать?

EDIT

Я не могу использовать сторонние элементы управления.

Ответы [ 14 ]

77 голосов
/ 06 августа 2012

Если вы просто отключите кнопку, ASP.NET не будет публиковать форму. Также вы хотите иметь дело с проверкой на стороне клиента. Вот мое решение:

<asp:Button runat="server" ID="btnSave" 
   Text="Save" OnClick="btnSave_Click" 
   OnClientClick="if (!Page_ClientValidate()){ return false; } this.disabled = true; this.value = 'Saving...';" 
   UseSubmitBehavior="false" />

См. @ пост Дэйва Уорда для описания UseSubmitBehavior.

Если у вас есть несколько групп проверки, вам нужно улучшить это решение для этого.

24 голосов
/ 26 мая 2011

Вы должны вернуть true после OnClientClick:

OnClientClick="this.disabled='true';return true;"

Любые клики на стороне клиента должны возвращать true, если обратная передача должна продолжаться, это средство обеспечения проверки на стороне клиента при нажатии кнопок.

15 голосов
/ 26 мая 2011

Вам также необходимо установить для свойства UseSubmitBehavior кнопки значение false.

Веб-браузеры не включают отключенные элементы в данные формы POST, даже если этот элемент в первую очередь вызывал отправку формы. К сожалению, дизайн одной страницы формы ASP.NET WebForms опирается на этот бит информации, чтобы узнать, какой элемент управления вызвал PostBack и какой обработчик события выполнить (т.е. Button1.On_Click).

Переключение на UseSubmitBehavior="false" добавляет __doPostBack('Button1', '') в клиентский обработчик onclick для решения этой проблемы. Затем, даже если вы отключите кнопку, параметр __doPostBack позволяет ASP.NET знать, какой элемент управления вызвал PostBack и какие события должны запускаться на стороне сервера.

12 голосов
/ 13 октября 2016

Большинство из приведенных выше решений, предлагающих отключение, не будут работать, потому что вы не получите PostBack. Это самое простое и чистое рабочее решение, которое я видел:

OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"
9 голосов
/ 25 июля 2015

Чтобы обойти все проблемы проверки и группы проверки, я нашел, что проще всего использовать событие window.onbeforeunload, например,

<script type = "text/javascript">
function DisableButton() {
    document.getElementById("<%=Button1.ClientID %>").disabled = true;
}
window.onbeforeunload = DisableButton;
</script>

Приведенный выше скрипт отключает кнопку ASP.Net, как только страницаготов сделать PostBack, включая проверку или отправку формы ASP.Net.

Отключить кнопку ASP.Net после нажатия, чтобы предотвратить двойной щелчок

3 голосов
/ 22 октября 2014

Я нашел эту ссылку очень полезной для решения этой проблемы Отключите кнопку ASP.Net после нажатия, чтобы предотвратить двойной щелчок

Надеюсь, что это может помочь:)

2 голосов
/ 28 декабря 2013

Я обычно добавляю этот метод в мою BasePage для повторного использования.

Этот код также обрабатывает проверки

/// <summary>
///  Avoid multiple submit
/// </summary>
/// <param name="button">The button.</param>
/// <param name="text">text displayed on button</param>
public void AvoidMultipleSubmit(Button button,string text="wait..." )
{
    Page.ClientScript.RegisterOnSubmitStatement(GetType(), "ServerForm", "if(this.submitted) return false; this.submitted = true;");
    button.Attributes.Add("onclick", string.Format("if(typeof(Page_ClientValidate)=='function' && !Page_ClientValidate()){{return true;}}this.value='{1}';this.disabled=true;{0}",
        ClientScript.GetPostBackEventReference(button, string.Empty),text));
}
1 голос
/ 04 марта 2015

Преимущества

  • Работает из коробки для всех кнопок
    • Даже кнопки, которые не инициировали отправку, будут отключены.
    • LinkButtons также будут отключены.
  • Работает с UpdatePanels (т. Е. Частичные и асинхронные обратные передачи)
  • Работает для полных обратных передач
  • Не отключать кнопки, когда проверка предотвращает обратную передачу
  • Нажатие кнопки, нажатие клавиши ввода и события AutoPostBack приведут к отключению кнопок

Ограничения

† Большинство других решений, которые я видел, имеют те же ограничения

  • Полагается на jQuery
  • Работает только для форм ASP
  • Если пользователь нажимает кнопку отмены браузера после отправки, пользователь не сможет повторить отправку и может запутаться.
  • Есть и другие способы, которыми пользователь мог инициировать обратную передачу:
    • Отправить с помощью клавиши ввода
    • События автоответчика

Код

Просто поместите этот фрагмент внизу вашего HTML-кода перед закрывающим тегом </body>.

<script type="text/javascript">
    jQuery(function ($) {

        /*
         * Prevent Double Submit
         * ---------------------
         * Disables submit buttons during form submission and asp async postbacks
         */

        // class name assigned to disabled :submit elements
        var disabledClass = 'asp-postback-disable';

        // selector for buttons and other elements that may cause a postback
        var submittableSelector = [
            'a[href^="javascript:__doPostBack"]',
            ':submit'
        ].join(",");

        // returns false; used to prevent event bubbling
        function returnFalse() { return false; }

        // logs errors
        function error(ex) {
            if (typeof console === 'object' && console.error != null) {
                console.error('Prevent Double Submit Error:', ex);
            }
        }

        // disables :submit elements
        function disableSubmit() {
            try {
                $(submittableSelector, 'form')
                    .addClass(disabledClass)
                    .on('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // enables :submit elements
        function enableSubmit() {
            try {
                $('.asp-postback-disable,' + submittableSelector, 'form')
                    .removeClass(disabledClass)
                    .off('click.asp-postback-disable', returnFalse);
            }
            catch (ex) { error(ex); }
        }

        // Handle async postbacks
        if (typeof Sys === 'object') {
            var prm = Sys.WebForms.PageRequestManager.getInstance();
            prm.add_beginRequest(function (s, e) { disableSubmit(); });
            prm.add_endRequest(function (s, e) { enableSubmit(); });
        }
        else {
            error('Sys is undefined.');
        }

        // Handle navigation (eg, Full postback)
        $(window).bind('beforeunload', function (e) {
            disableSubmit();
        });

    });
</script>

<style type="text/css">
    .asp-postback-disable { opacity: 0.25; }
</style>
0 голосов
/ 05 февраля 2019

Вы также можете «взломать» это путем создания кнопки на стороне клиента с тем же стилем, скрытия «оригинальной» кнопки на стороне сервера и использования javascript для отключения кнопки HTML / вызова исходной кнопки для нажатия. 1001 *

В следующем постбэке он автоматически отменит ваше изменение на стороне клиента :).

<asp:Button ID="btnSubmitQuote" class="btn btn-red btn-block" runat="server" Text="Submit Quote" style="display:none;" OnClick="btnSubmitQuote_Click" UseSubmitBehavior="false" />

<button id="btnSubmitQuoteClient"  class="btn btn-red btn-block" onclick ="disableBtn(this);">Submit Quote</button>
<script type="text/javascript">
 function disableBtn(t) {
    t.setAttribute('disabled', 'disabled');
    var btn = document.getElementById('<%=btnSubmitQuote.ClientID %>');
    btn.click();
  }

0 голосов
/ 22 сентября 2017

Из файла aspx.cs вы можете добавить скрипт для решения этой проблемы (это единственное решение, сработавшее для меня и предоставленное: wexxix)

//Declaring the string to hold the script
string doubleClickScript = @"<script type='text/javascript'>
                                    function DisableButton() {
                                    document.getElementById('YOURBUTTONID').disabled = true;
                                }
                                window.onbeforeunload = DisableButton;
                                </script>";
//Injecting the script to the aspx page.        
ClientScript.RegisterStartupScript(this.GetType(), "DoubleClickScript", doubleClickScript);

Очевидно, вы можете просто добавить скрипт встраницу, которую я только что использовал, так как у меня был только доступ к клиентскому коду C #.Спасибо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...