[팁] .NET 로딩페이지 구현하기

간만에 팁에 대한 글을 올리게 되네요. 어려운것도 아니지만, 대부분 이런 페이지를 구현하리라 생각은 했을 거라고 판단됩니다. 저두 의외로 쉬운 부분 같은데 아이디어가 잘 안 떠오르더라구요. 근데 이렇게 구현하니깐 상당히 이쁜 페이지가 되네요. 그럼 본론으로 들어가서...

 

페이지가 로딩될때 모든 데이터가 바인딩 되기전에 “페이지 로딩중...” 이런식으로 표현으로 먼저 보여주고 모든 데이터의 바인딩이 끝나게 되면 사라지게 되는거죠. 비스타에서도 이런 부분이 많이 적용된 걸로 알고 있는데요, 아직 많이 사용해보지 않아서 확답은 못하겠네요.

 

그래서 오늘 소개할 것은 비스타 처럼 페이지의 모든 데이터가 바인딩되기 전에 페이지 중간에 비스타에서 적용되는 이미지(동그랗게 돌아가는 gif 이미지죠)를 사용하여 구현해 볼까 합니다. 스텝바이스텝으로 가겠습니다. 죄송하지만 캡처는 귀차니즘이 발동하여 생략하겠습니다.

 

그럼 시작하도록 하죠.

 

참고로, 다음은 ASP.NET 1.1 with C# 기준입니다.

 

 

1. 아무런 이름으로 ASP.NET 프로젝트를 하나 만듭니다. 저는 LodingProject라고 하겠습니다.

 

2. Loading.aspx를 하나 만듭니다.

 

3. Loading.aspx에서는 아무런 작업을 할 필요가 없고, Loading.aspx.cs 파일을 열어봅니다.

 

4. 기본적으로 cs파일의 자동으로 만들어지는 코드에 굵게 된 부분을 주목하여 바꿔주세요.

 

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

 

namespace LoadingProject

{

             /// <summary>

             /// Loading에 대한 요약 설명입니다.

             /// </summary>

             public class Loading : PageBase

             {

                           private void Page_Load(object sender, System.EventArgs e)

                           {

                                        // 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.

                           }

 

                           #region Web Form 디자이너에서 생성한 코드

                           override protected void OnInit(EventArgs e)

                           {

                                        //

                                        // CODEGEN: 이 호출은 ASP.NET Web Form 디자이너에 필요합니다.

                                        //

                                        InitializeComponent();

                                        base.OnInit(e);

                           }

                          

                           /// <summary>

                           /// 디자이너 지원에 필요한 메서드입니다.

                           /// 이 메서드의 내용을 코드 편집기로 수정하지 마십시오.

                           /// </summary>

                           private void InitializeComponent()

                           {   

                                        this.Load += new System.EventHandler(this.Page_Load);

                           }

                           #endregion

             }

}

 

 

5. PageBase라는 것은 System.Web.UI.Page를 상속받는 클래스입니다. 따라서 PageBase라는 클래스를 하나 만듭니다.

 

 

6. 만들어진 PageBase 클래스에 다음과 같이 코드를 바꿔주세요

 

 

using System;

 

namespace LoadingProject

{

             /// <summary>

             /// PageBase에 대한 요약 설명입니다.

             /// </summary>

             public class PageBase : System.Web.UI.Page

             {

                           public PageBase()

                           {

                                        //

                                        // TODO: 여기에 생성자 논리를 추가합니다.

                                        //

                           }

 

                           protected override void Render(System.Web.UI.HtmlTextWriter writer)

                           {

                                        // 로딩이미지 설정

                                        Response.Write("<table id='waiting' width='100%' height='100%' style='position:absolute;visibility:hidden;' cellpadding=0 cellspacing=0 bgcolor='#ffffff'> ");

                                        Response.Write("<tr><td align=center valign='middle' width=100% height=100%>);

                                        Response.Write("<img src='img/loading01.gif' align='absmiddle' border=0>");

                                        Response.Write("</td></tr></table> ");

 

                                        //로딩중 이미지 보여주기

                                        Response.Write("<script language='Javascript'> ");

                                        Response.Write("waiting.style.visibility='visible' ");

                                        Response.Write("</script>") ;

                                       

                                        base.Render(writer);

                          

                                        //로딩중 이미지 숨기기

                                        Response.Write("<script language='Javascript'> ");

                                        Response.Write("waiting.style.visibility='hidden' ");

                                        Response.Write("</script>") ;

                           }

             }

}

 

7. 이미지가  지금 없기 때문에 “img”라는 폴더를 하나 만들어 첨부된 이미지를 그 폴더에 저장합니다.

 

이걸로 모든 준비는 끝났습니다. 그런데 테스트를 해보면 로딩 이미지가 보이지 않을 겁니다. 바인딩 될 데이터가 워낙에 없어서 그렇습니다. 작업하실때 위와같이 System.Web.UI.Page를 상속받는 PageBase라는 것을 만들어서 모든 aspx.cs파일은 상속을 받아서 사용하게 합니다. 이건 데이터가 많을 경우 아주 잘 보여질겁니다. 안된다고 상심마시고 바인딩이 많이 되는 페이지에 적용시켜 보세요. 아주 이쁘게 잘 나옵니다.