Programming/.NET
시간이 꽤 걸리는 어떤 처리를 진행할때 사용자에게 '처리중이나 좀만 기다려줘' 라는 메세지를 표시해야 할때가 있습니다. 이런 경우 어떻게 할까를 생각해 본 방법입니다.

우선 표시할 내용을 div 안에 집어넣고
<div id="basic-modal-content">
 <h5>뺑이치고 있으니 좀만 기다려줘</h5>
</div>
일단은 보이지 않게 해야하니 대충 스타일을 잡아줍니다. 더불어 딴것도 못 건드리게...
<style type="text/css">
    #basic-modal-content {display:none;}
    #simplemodal-overlay {background-color:#000;}
</style>
대기중 표시는 modal (http://www.ericmmartin.com/projects/simplemodal/)을 이용해 인라인으로 띄워줄려고 하니 필요한 스크립트를 올려줍니다.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/jquery.simplemodal.js"></script>
자! 사용자가 버튼을 클릭했을때 기다려달라는 메세지를 띄우고 뭔가를 처리하려면 OnClientClick 에 modal 띄우는 스크립트를, OnClick 이벤트에 처리할 내용을 담아두면 끝납니다.
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="$('#basic-modal-content').modal();" OnClick="Button1_Click" />
이건 버튼을 클릭할때 클라이언트 스크립트를 먼저 실행하고 그 다음 서버처리를 수행한다는 특성을 이용한 것입니다. 서버처리가 완료되서 다른 내용을 표시하게 되면 어차피 모달은 사라질 것이므로 뒷처리를 위해 별로 해줄것도 없어요.

다만 progressbar 등을 통해 %를 표시해야 한다던가 하면 조금 복잡해지겠지만 그래도 div 안에 문자열 대신 둥글둥글 돌아가는 gif  하나 넣어놓으면 그나마 봐줄만 하지 않을까요..?

'Programming > .NET' 카테고리의 다른 글

[ASP.NET] LinqDataSource - Query Parameter 설정  (0) 2014.05.09
[ASP.NET] SqlDataSource - 1. 연결설정  (0) 2014.05.02
[ASP.NET] 대기중 표시  (0) 2014.04.23
[ASP.NET] SqlDataSource - 2. 활용  (0) 2014.04.15
[ASP.NET] AccessDataSource  (0) 2014.04.07
[ASP.NET] Literal  (0) 2014.03.07
0 0