회원가입 페이지 유효성 체크 버튼 추가하기 (1) 숫자값만 입력받기

요즘들어 Ajax랑 자바스크립트에 관심을 두다보니 잠깐동안 그전에 작성했던 글에 대해서 소홀했습니다. =_=
이번에는  이전에 작성했던 Regin.aspx 페이지에 유효성 검사를 하는 버튼을 추가 해보도록 합니다.
http://network.hanb.co.kr/view.php?bi_id=1065  한빛미디어의 지식종합 미디어 서비스를 참조하여 작성하였습니다.

먼저 BasePage를 작성하기 위해 파일 -> 새프로젝트 -> 클래스라이브러리 만들기를 선택한다.

솔루션 탐색기에서 참조추가를 선택합니다.

System.web.dll을 추가합니다.

네임스페이스는 Kiuk.Web.UI로 정의합니다. BasePage 클래스는 System.Web.UI.Page 클래스를 상속하게 합니다.  OnInit은 Page 클래스에서 각 컨트롤의 이벤트를 초기화하는 함수이며 이를 재정의 하는 코드를 작성합니다.
  protected override void OnInit(EventArgs e)
  {
     base.OnInit (e);
      this.PreRender += new EventHandler(BasePage_PreRender);
  }

함수를 재정의할 때는 필요한 처리를 하고 나머지 처리에 대해서 상속 클래스에서 처리할 수 있도록 base.OnInit()과 같이 상속 클래스의 메서드를 호출한다. 페이지가 로딩되고 브라우저에 전달되기 전에 발생하는 PreRender 이벤트에 자바 스크립트를 추가하는 부분을 작성합니다.

  protected void BasePage_PreRender(object sender, System.EventArgs e)
  {
        RegisterClientScript();
  }

  protected void RegisterClientScript()
  {
       AddNumeralsOnlyScript();
       AddStringOnlyScript();
  }

RegisterClientScript() 함수에서는 자바스크립트를 추가하는 함수를 호출합니다.

숫자만입력받는 자바스크립트 함수를 만들기 위해서, 함수의이름, 스크립트 이름 변수에 선언합니다.


  private const string NumeralsOnlyScriptName = "numeralsOnlyHandler";
  private const string NumeralsOnlyFunctionName ="numeralsOnly";
  private string numeralsOnlyWarning = "숫자만 입력할 수 있습니다.";

자바 스크립트를 등록하기 전에 IsStartupScriptRegistered()를 사용하여 스크립트 등록 여부를 확인하고, 등록되어 있지 않은 경우에 RegisterStartupScript()을 사용하여 스크립트를 등록합니다.

스크립트에 대한 코드는 무척깁니다. -_- 복잡한 삼항연산자가 어지러울정도입니다. IE에서는 이벤트는 event 이며, 다른브라우저에서는 매개변수인 evt가 됩니다.  W3C 웹 표준 모델에서는 keypress, keyup, keydown 이벤트에 대해 정의하고 있지만, 어떤 값을 주고 받는지에 대한 정의가 없어서, 각 브라우저 제작사에서 자기들만의 방식으로 값을 저장하고 있습니다. 네스케이브에서는 keypress 이벤트에 대해서 charCode 속성을 사용하여 값을 알아 낼수 있습니다.(ASCII값). keyup과 keydown 이벤트에 대해서는 keyCode 속성을 사용하여 값을 알아낼 수있습니다. 네스케이프 4 이하의 버전에서는 which 속성을 사용해서 키값을 가져올수 있습니다.
하지만 IE에서는 KeyCode 속성으로 앞서 말한 이벤트에 속성값을 알아낼 수 있습니다.
위 코드는 크로스브라우저를 지원하기 위해서 복잡하게 작성되었습니다.

경고창을 내용을 변경시키기 쉽게 프로퍼티형태로 작성하였습니다. -_- 굳이 경고창의 내용을 ' ' 런형태로 작성하지 않는다면 Replace 구문을 할필요는 없을듯 하네요.

public string NumeralsOnlyWarning
  {
   get { return numeralsOnlyWarning.Replace("'", "\\'");}
   set { this.numeralsOnlyWarning = value ; }
  }

직접 콘트롤에 숫자값만 입력받을수있는 함수를 작성한다.

ASP.NET에서 모든 컨트롤은 Control 클래스를 상속받는다. ASPX 페이지의 기본이 되는 Page 클래스로 Control 클래스를 상속받는다. Control 클래스는 컨트롤이 갖고 있는 자식 컨트롤들을 Controls 속성으로 접근할 수 있다.

foreach 구문을 사용하여 Controls에 있는 콘트롤의 집합을 하니씩 읽어와서 현재 콘트롤의 타입과 같은지 비교 한다음, 현재 콘트롤의 ID값과 유효성검사를 하고자하는 콘트롤의 ID 값이 같은지를 비교해서
텍스트박스 Attributes 속성값을 재정의 합니다.

member 프로젝트를 열고 방금 작성한 클래스 라이브러리를 참조 추가합니다.

BasePage.cs 화면

 Regin.aspx 페이지에서 using Kiuk.Web.UI; 앞서 제작한 네임스페이스를 추가합니다.

Page_Load() 이벤트에 다음과 같은 코드를 작성합니다.

SetNumeralOnly() 매개변수로 입력컨트롤의 아이디이름을 줍니다.
이 때 input_eight와 input_seven은 주민등록번호를 입력하는 컨트롤 입니다.

BasePage를 상속해서 코드를 작성하는 내용은 태요님의 ASP.NET에서 ConnectionString을 사용하는 부분에서 보고 두번째로 사용하는 예를 보았습니다. 전체적으로는 스크립트 코드가 복잡해서 그리 유용할거 같지는 않내요
어쨋든 아티클을 보고 적용해보는것과, 이런식으로 상속에의해서 이벤트를 재정의할 수 있다는 점에 만족해야겠네요.