모드 DIV와 Update Progress를 결합하여 페이지의 중복 제출을 방지하다

원문:유 무 |모드 DIV와 Update Progress를 결합하여 페이지의 중복 제출을 방지하다
페이지가 제출될 때 서버 처리가 느려서 사용자가 여러 번 어떤 단추를 눌렀을 수 있기 때문에 우리는 사용자가 이렇게 하는 것을 방지해야 한다. 흔히 볼 수 있는 방법은 클라이언트가 이 단추disable를 없애는 것이다. 그러나 페이지가 처리되거나 오류가 발생했을 때 버튼의 상태를 회복해야 한다. 이렇게 조작하는 것은 비교적 복잡하다.atlas 페이지에서우리는 모드 DIV와 Update Progress를 이용하여 같은 효과를 실현할 수 있으며 실현도 비교적 간단하다.아래 페이지 보기
XML-Code:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>    </title>
    <style type="text/css">
    #modalDiv
    {
        position: absolute;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        z-index:1001;
        background-color: black;
        opacity:.60;
        filter: alpha(opacity=10);
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server" DisplayAfter="0">
            <ProgressTemplate>
                <div id="modalDiv">
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Button ID="Submit" runat="server"
                    OnClick="Submit_Click" Text="Submit" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

(20)angularJS 오류 이해 및 해결 $apply already in progress

angularJS의 $scope.$를 사용한 경우apply() 또는 $scope.$digest (), 우리는 아래와 같은 오류를 만날 수 있습니다. 상황 2: JQuery 코드에서 $scope의 데이터를 수정합니다....

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

모드 DIV와 Update Progress를 결합하여 페이지의 중복 제출을 방지하다

좋은 웹페이지 즐겨찾기