사용자가 단추를 두 번 클릭하지 않도록 하려면 어떻게 해야 합니까?

사용자가 단추를 두 번 클릭하지 않도록 하려면 어떻게 해야 합니까?

오래된 ASP를 가지고 있습니다.NET 웹 양식 응용 프로그램(.버튼을 클릭할 때 실행되는 데 30초 정도 걸리는 프로세스가 있는 NET 2.0).버튼이 두 번 클릭되지 않도록 해야 합니다.이렇게 하면 데이터베이스에 중복 데이터가 발생하는 두 번의 게시를 방지할 수 있습니다.

추가하려고 했습니다;

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

JavaScript에서 단추를 비활성화하려고 합니다.그러나 버튼이 비활성화되더라도 버튼에 대한 포스트백은 작동하지 않습니다.

단추를 비활성화하여 여러 개의 제출을 방지하는 것이 이 응용 프로그램에 이상적입니다.어떻게 해야 하나요?

편집

타사 컨트롤을 사용할 수 없습니다.

버튼을 비활성화하기만 하면 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에 대한 설명은 @Dave Ward의 게시물을 참조하십시오.

여러 검증 그룹이 있는 경우 이를 위해 이 솔루션을 개선해야 합니다.

OnClientClick 후 true를 반환해야 합니다.

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

포스트백을 계속하려면 클라이언트 측 클릭이 모두 참으로 반환되어야 합니다. 이는 버튼을 누르면 클라이언트 측 검증 기능을 제공하는 수단입니다.

또한 Button의 속성을 로 설정해야 합니다.

웹 브라우저는 처음에 양식 제출을 트리거한 단추인 경우에도 양식의 POST 데이터에 비활성화된 요소를 포함하지 않습니다.안타깝게도 ASP.NET WebForms의 단일 페이지 설계는 해당 정보에 의존하여 PostBack을 발생시킨 컨트롤과 실행할 이벤트 핸들러(예: Button1)를 파악합니다.On_Click).

으로 전환UseSubmitBehavior="false"주사를 __doPostBack('Button1', '')클라이언트 측에서 해당 문제를 해결하려면 클릭 핸들러를 클릭합니다.그런 다음 버튼을 비활성화하더라도__doPostBack매개 변수는 ASP를 허용합니다.NET은 어떤 컨트롤이 PostBack을 발생시켰는지, 서버 측에서 어떤 이벤트를 발생시킬지 알고 있습니다.

비활성화를 제안하는 위의 솔루션 대부분은 PostBack을 받을 수 없기 때문에 작동하지 않습니다.이것은 제가 본 것 중 가장 간단하고 깨끗한 솔루션입니다.

OnClientClick="if(this.value === 'Saving...') { return false; } else { this.value = 'Saving...'; }"

및 그룹 문제를 위해 저는 모든유성검사및검사그문피룹위방은가쉬법운장해하를 쉽다는 것을 .window.onbeforeunload 예를 들어 so 벤트이, 와은같.

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

위 스크립트는 ASP를 비활성화합니다.페이지가 유효성 검사 또는 ASP를 포함한 PostBack을 수행할 준비가 되는 즉시 Net Button(넷 버튼).Net 양식을 제출합니다.

ASP를 비활성화합니다.더블클릭 방지를 위한 클릭 후 네트 버튼

저는 이 링크가 이 문제를 해결하는 데 매우 유용하다는 것을 알았습니다.더블클릭 방지를 위한 클릭 후 네트 버튼

그게 도움이 되길 바랍니다 :)

저는 보통 이 메소드를 재사용하기 위해 제 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));
}

이점

• 모든 버튼에 대해 즉시 사용 가능
  • 제출을 트리거하지 않은 단추도 사용할 수 없습니다.
  • 링크 버튼도 비활성화됩니다.
• 업데이트 패널과 함께 작동(즉, 부분 및 비동기 포스트백)
• 전체 포스트백에 사용 가능
• 유효성 검사를 통해 포스트백이 차단되는 경우 버튼을 비활성화하지 않음
• 버튼 누르기, Enter 키 누르기 및 AutoPostBack 이벤트로 인해 버튼이 비활성화됩니다.

한계

제가 본 대부분의 다른 솔루션은 이러한 제한을 가지고 있습니다.

• jQuery에 의존
• ASP 양식에서만 작동합니다.
• 제출 후 사용자가 브라우저의 취소 버튼을 클릭하면 다시 제출할 수 없으며 혼란이 발생할 수 있습니다.
• 사용자가 포스트백을 시작할 수 있는 다른 방법은 다음과 같습니다.
  • Enter 키를 사용하여 제출
  • 자동 게시 이벤트

코드

닫기 전에 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>

한 가지 방법은 클릭한 후 클라이언트 측에서 숨기고 일부 로더 이미지를 표시하는 것입니다.

또는 그것이 형태이거나 당신이 추가할 수 있는 것이라면 recetchcha.

잠시 검색을 해본 결과, 이 해결책을 생각해냈습니다.

$('form').submit(function () {
    $('input[type=submit][data-loading]').addClass('disabled');

    if ($(this).data('submitted') == true) {
        $('input[type=submit][data-loading]').attr('disabled', 'disabled');
        return false;
    }

    $(this).data('submitted', true);
});

UseDefaultBehavior 솔루션의 문제는 Enter 키가 많이 사용되는 양식을 제출하지 않는다는 것입니다.저는 상당한 비율의 사용자들이 클릭하는 대신 입력을 시도한다고 생각합니다.

aspx.cs 파일에서 이 문제를 해결하기 위해 스크립트를 추가할 수 있습니다(이것이 저를 위해 작동한 유일한 솔루션이며 wexix에서 제공했습니다).

//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# 코드에 액세스했기 때문에 그렇게 사용했습니다.감사해요.

또한 동일한 스타일로 클라이언트 측 버튼을 만들고, "원래" 서버 측 버튼을 숨기고, Javascript를 사용하여 HTML 버튼을 비활성화하거나 원래 버튼을 호출하여 클릭함으로써 "해킹"할 수 있습니다.

다음 포스트백에서는 클라이언트 측 버튼 :)에서 변경 내용을 자동으로 되돌립니다.

<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();
  }

피드백을 유지하기 위해 버튼을 숨기거나 gif 로드를 위해 변경할 수도 있습니다.

$(document).on('submit','form',function (e) {
    $("input.SubmitButton").hide();
    // or change if to an loading gif image.
    return true;
});

양식의 Page_Load 이벤트에 다음 행을 입력합니다.

btnSubmit.Attributes.Add("onclick", " this.disabled = true; " + ClientScript.GetPostBackEventReference(btnSubmit, null) + ";");

출처: dotnetodyssey.com

여기 빠른 해결책이 있습니다.클릭할 때 너비를 0으로 설정합니다.계속 제출되지만 다시 클릭할 수 없습니다.유효성 검사 오류가 발생하는 시나리오에서 다시 표시하려면 서버 측 클릭 이벤트에서 Width to it original 값을 다시 설정할 수 있습니다.

OnClientClick="this.width=0;"

언급URL : https://stackoverflow.com/questions/6137172/how-do-i-prevent-users-clicking-a-button-twice