소개
웹 애플리케이션의 양식 제출 프로세스 중에, 특히 제출 프로세스에 시간이 오래 걸릴 때 "잠시 기다려 주십시오" 메시지나 애니메이션 GIF 이미지를 표시하는 것이 유용한 경우가 많습니다. 저는 최근 내부 사용자가 웹 페이지를 통해 Excel 스프레드시트를 업로드하는 설문조사 제출 프로그램을 개발했습니다. 프로그램은 업로드된 스프레드시트 데이터를 데이터베이스에 삽입합니다. 이 과정은 몇 초밖에 걸리지 않지만, 비록 몇 초라고 해도 웹페이지 입장에서는 너무나 당연한 대기 과정이다. 프로그램을 테스트하는 동안 일부 사용자가 업로드 버튼을 반복적으로 클릭했습니다. 따라서 업로드가 진행 중임을 사람들에게 알리는 시각적 메시지를 제공하는 것이 유용합니다. 그리고 다중 클릭을 방지하기 위해 업로드 버튼을 동시에 숨깁니다. 여기에 소개된 컨트롤은 Button 컨트롤의 하위 클래스로, 클라이언트측 JavaScript 코드를 ASP.NET 서버 컨트롤에 캡슐화하여 편리한 기능을 제공하는 방법을 보여줍니다.
이를 수행하기 위한 많은 JavaScript 예제가 있지만 이러한 함수를 ASP.NET 컨트롤에 캡슐화하려고 할 때 몇 가지 문제를 발견했습니다. 먼저 javascript onclick 핸들러를 통해 버튼을 무효화하고 다른 텍스트로 바꾸려고 했습니다. 그러나 나는 그것이 asp.net 서버 측의 클릭 이벤트 기능을 방해하기 때문에 매우 까다롭다는 것을 알았습니다. 마침내 효과가 있었고 다양한 브라우저를 잘 지원한 것은 div 태그에 버튼을 렌더링하는 것이었습니다. div는 숨겨지고 asp.net의 클릭 이벤트를 방해할 수 있습니다.
컨트롤 사용
일반 버튼 컨트롤의 파생형인 PleaseWaitButton의 기능은 기본적으로 동일합니다. 세 가지 추가 속성을 사용하여 버튼을 클릭할 때 "잠시 기다려 주십시오" 메시지나 이미지 표시를 관리합니다.
잠시만 기다려주세요텍스트
이는 표시되는 클라이언트 측 텍스트 메시지이며, 있는 경우 버튼을 클릭할 때 버튼을 대체합니다.
잠시만 기다려주세요이미지
이는 표시되는 이미지 파일(예: 애니메이션 GIF 이미지)이며, 있는 경우 클릭할 때 버튼을 대체합니다. 이 속성은 태그의 src 속성이 됩니다.
잠시만 기다려주세요유형
PleaseWaitTypeEnum 열거형 값 중 하나: TextOnly, ImageOnly, TextThenImage 또는 ImageThenText. 메시지와 이미지의 레이아웃을 제어합니다.
다음은 PleaseWaitText 및 PleaseWaitImage가 설정된 PleastWaitButton을 보여주는 예제 .aspx 파일입니다.
<%@ 페이지 언어="C#" %>
<%@ TagPrefix="cc1" Namespace="JavaScriptControls" 등록
Assembly="PleaseWaitButton" %>
<머리>