ASP.NET은 웹 폼에 포함할 수 있는 두 가지 유형의 서버 컨트롤을 제공한다.
- HTML 서버 컨트롤 : 표준 HTML 태그와 상응하는 서버 기반 컨트롤이다. HTML로 작업하는 것이 익숙한 경우에는 HTML 서버 컨트롤을 쉽게 이용할 수 있을 것이다. 최소의 변경으로 기존의 HTML 페이지나 ASP 페이지를 ASP.NET 페이지로 바꿀 수 있다.
- 웹 컨트롤러 : 윈도우 응용 프로그램을 작성할 때 사용하는 컨트롤이 웹 폼에서 사용될 경우, 이를 '웹 컨트롤'이라고 한다. 웹 컨트롤은 HTML 서버 컨트롤과 유사하지만 스타일이나 서식을 위한 속성들을 더욱 풍부하게 제공한다. GrieView, Calendar, Validation 웹 컨트롤과 같이 HTML에는 없는 요소들도 포함하고 있다.
HTML 페이지를 ASP.NET 페이지로 바꾸기
① HTML 페이지 만들기
<body>
<form id="form1" runat="server">
<div align="center">
신장 :
<input type="text" />
cm 몸무게 :
<input type="text" />
kg
<br /><br />
<input type="submit" value="산출하기" />
</div>
</form>
</body>② 새 웹 사이트 및 새 웹 폼 만들기
새 프로젝트를 만들어 이전과 같이 aspx 파일을 만든다.
Page 지시자 밑에 BMI.htm의 코드를 붙여 넣는다.
③ 서버 컨트롤로 바꾸기
HTML 태그를 서버 컨트롤로 바꾸려면 각 태그에 runat="server"라는 속성을 넣으면 된다. 또 코드 숨김 파일(확장자 cs) 파일에서 컨트롤을 식별하기 위해 유일한 이름으로 id 속성 값을 할당한다.
BIT 응용 프로그램에서 입력 글상자 2개와 제출 버튼 하나를 HTML 서버 컨트롤로 변환한다. ASP.NET과 form 엘리먼트가 포함하고 있는 컨트롤들이 정보를 주고받으려면 서버로 보내는 정보를 포함하고 있는 form 엘리먼트도 서버 컨트롤로 바꿔야 한다.
<form id="WebForm" runat="server"> // id와 runat 추가
<div align="center">
신장 :
<input id="Height" type="text" runat="server"/> // id와 runat 추가
cm 몸무게 :
<input id="Weight" type="text" runat="server"/> // id와 runat 추가
kg
<br /><br />
<input id="Calc" type="submit" value="산출하기" runat="server"/> // id와 runat 추가
</div>
</form>아직은 어떤 코드도 쓰지 않았기 때문에 어떤 작업도 수행하지 않는다. 하지만 정적 HTML 엘리먼트들이 HTML 서버 컨트롤로 바뀌었다. 이제 HTTP에서 제공하는 대표적인 전송 방식과 서버 컨트롤을 살펴보고 BMI.aspx가 동적으로 기능하도록 만들어 보도록 하자.
GET 방식과 POST 방식
① GET 방식의 특징
- 사용자가 input 엘리먼트에 입력한 정보를 URL을 통해 서버로 전송한다. GET 방식으로 전달되는 URL에서 '?' 뒤에 오는 문자열을 쿼리 스트링(Query String)이라고 한다. 쿼리 스트링은 매개변수=변수 값을 한 쌍으로 하며, &문자로 연결되어 있다.
http://localhost/WebEx/04/BMI.aspx?Height=175&Weight=70
- URL 길이에는 한계가 있어 많은 양의 데이터를 보내는 것은 적합하지 않다.
- 사용자 입력이 URL에 노출되어 있어 보안상 문제가 있다.
- URL에 쿼리 정보가 포함되어 있기 때문에 새로 고침을 하거나 URL을 복사하여 다른 곳에서 보아도 동일한 문서를 볼 수 있다.
② POST 방식의 특징
- 웹 브라우저가 서버로 보내지는 페이지 요청(Request)에 사용자가 input 엘리먼트를 통해 입력한 내용을 포함시켜 전달한다.
- 사용자 입력 정보는 특별한 도구를 사용하지 않는한 보이지 않는다.
- GET 방식과 달리 보내는 정보의 양에 한계가 없다.
- 특별하게 정보를 유지하지 않을 경우, 새로 고침에 의해 '만료된 페이지' 메시지가 나타난다.
뷰 상태
visual Studio에서 BMI.aspx 파일을 컨트롤 F5를 눌러 웹 폼을 실행한 후 웹 브라우저에서 마우스 클릭 -> 소스 보기를 선택하여 ASP.NET이 보낸 HTML 소스를 한 번 보자.
브라우저에서 보내진 HTML은 작성한 aspx 파일과 다르다. runat="server"가 벗겨졌지만 폼에 hidden 형의 input 태그가 추가되었다.
ASP.NET에서 보내는 hidden 필드는 압축된 형태로 페이지에 있는 모든 서버 컨트롤의 상태 정보를 갖고 있는데, 이를 '뷰 상태(View State)'라고 한다. 웹 서버는 사용자에게 보이지 않는 hidden 필드를 통해 웹 브라우저와 지속적으로 정보를 교환하며 변화를 관리한다. 이를 통해 페이지 코드에서 컨트롤 속성을 사용할 수 있다.
HTML 페이지에서 글상자에 데이터를 넣고 [산출하기] 버튼을 누르면, 다시 열리는 페이지에서는 글 상자의 값이 사라진다. 반면 ASP.NET 페이지에서 [산출하기] 버튼을 눌러 서버에보내면 서버에서 보내는 페이지에는 이전의 값이 그대로 들어 있는 것을 확인할 수 있다. 그 이유는 ASP.NET 컨트롤이 hidden 필드를 통해 자신들의 상태를 유지하기 때문이다.
진짜 htm 파일과 aspx 파일을 비교해보니 htm 파일은 입력 값이 사라졌지만 aspx 파일은 입력 값이 남아있었다.
HTML 서버 컨트롤 클래스
ASP.NET에서 각각의 서버 컨트롤은 별도의 클래스를 갖는다. HTML 서버 컨트롤의 경우 해당 클래스는 System.Web.UI.HtmlControls 네임스페이스에 정의되어있다.
아래 표는 form 태그에 포함되어 사용자 입력을 받는데 사용되는 HTML 엘리먼트와 이에 대응되는 HTML 서버 컨트롤 클래스를 나타낸 것이다.
| 클래스 | HTML 엘리먼트 | 클래스 | HTML 엘리먼트 |
| HtmlForm | <form> | HtmlInputCheckBox | <input type="checkbox"> |
| HtmlInputButton | <input type="button"> | HtmlInputRadioButton | <input type="radio"> |
| HtmlInputSubmit | <input type="submit"> | HtmlInputText | <input type="text"> |
| HtmlInputReset | <input type="reset"> | HtmlInputPassword | <input type="password"> |
| HtmlButton | <button> | HtmlTextArea | <textarea> |
| HtmlInputHidden | <input type="hidden"> | HtmlInputImage | <input type="image"> |
| HtmlSelect | <select> | HtmlInputFile | <input type="file"> |
HTML 서버 컨트롤을 추가하는데는 직접 aspx 파일에 입력하는 방법(일반 HTML태그에 runat="server" 속성을 넣는 것)과 visual studio에서 도구 상자의 HTML 탭에 컨트롤을 드래그하여 웹 폼에 넣는 방법이 있다.
BMI 산출기에는 하나의 HtmlForm과 2개의 HtmlInputText, 그리고 하나의 HtmlInputButton 클래스를 사용하였다.
아래는 컨트롤의 주요 속성들이다.
| 클래스 | 주요 속성 |
| HtmlInputCheckBox와 HtmlInputRadioButon | Checked |
| HtmlInputText | Value |
| HtmlTextArea | Value |
| HtmlInputImage | Src, Alt,Align, Border |
| HtmlSelect | Itmes(collection) |
| HtmlGenericControl | InnerText와 InnerHtml(System.Web.UI.HtomContorls 네임스페이스에 관련된 클래스가 없는 다양한 HTML 태그들은 이 컨트롤 클래스를 사용) |
BIT 산출기 코드 쓰기
BIT 산출기 페이지에서는 [산출하기] 버튼을 클릭할 때 발생하는 이벤트를 사용한다. HtmlInputButton이 클릭되면 ServerClick 이벤트가 발생되는데, 이를 처리하여 사용자 요청에 반응하도록 코드를 만들어보도록 하겠다.
① 웹 페이지에 이벤트 처리를 하기 위한 속성(Attribute)과 결과 출력용 엘리먼트 추가하기
사용자가 [산출하기] 버튼을 클릭하면 페이지의 입력 내용이 웹 서버로 보내진다. ASP.NET은 보내진 정보를 통해 어떤 코드가 실행되어야 하는지를 판단한다. 이를 위해서는 이벤트와 이벤트 처리기를 연결해야 한다. 연결은 컨트롤 태그에 이벤트 관련 속성을 추가하면서 이루어진다.
[산출하기] 버튼의 ServerClick 이벤트 처리 메서드를 만들기 위해서는 이벤트 관련 속성인 OnServerClick에 사용하고자 하는 이벤트 처리기를 넣어주면 된다.
<input id="Calc" type="submit" value="산출하기"
OnserverClick="Calc_ServerClick" runat="server"/>ASP.NET HTML 컨트롤은 태그에 이벤트 처리기를 추가할 때, 이벤트 이름에 'On'이 붙여진 속성을 이용한다.
산출한 결과를 보여줄 HTML 서버 컨트롤을 다음과 같이 추가한다. 형식이 있는 텍스트 블록을 웹 페이지에 넣을 때 사용하는 <p> 태그를 사용한다.
<p id="Result" runat="server"></p>완성된 aspx의 코드는 다음과 같다.
<form id="WebForm" runat="server">
<div align="center">
신장 :
<input id="Height" type="text" runat="server"/>
cm 몸무게 :
<input id="Weight" type="text" runat="server"/>
kg
<br /><br />
<input id="Calc" type="submit" value="산출하기" // 추가
OnServerClick="Calc_ServerClick" runat="server"/> // 추가
<br /><br /> // 추가
<p id="Result" runat="server" /></p> // 추가
</div>
</form>② BMI.aspx.cs 코드 쓰기
HTML 서버 컨트롤은 웹 컨트롤과 달리 visual studio의 속성 창을 이용하여 이벤트 처리기를 만들 수 없으므로 직접 입력해야 한다. 다음은 [산출하기] 버튼에 대한 이벤트 처리기를 포함하고 있는 'BML.aspx.cs' 코드로, 이벤트 처리기 내에서 BMI를 산출하여 결과를 보여준다.
protected void Calc_ServerClick(object sender, EventArgs e) {
decimal height = Decimal.Parse(Height.Value) / 100;
// cm 단위를 m 단위로 환산
decimal weight = Decimal.Parse(Weight.Value);
decimal BMI = weight / (height * height);
Result.InnerText = "체질량지수(BMI) : " + BMI.ToString();
}
* decimal이란?
decimal을 사용하면 0.000000001 -> 0.000000001
decimal을 사용하지 않으면 0.000000001 -> 1.0E-9으로 표기가 된다.
부동 소수점 형식을 원하지 않으면 decimal을 사용하면 된다.
정확한 계산이 필요할 때는 decimal 데이터형을 사용하라고 MSDN은 권고하고 있다.
ASP.NET에서 웹 폼의 처리 과정
ASP.NET이 BMI.aspx 페이지에 대항 요청을 받으면 웹 서버에서는 다음 과정을 거쳐 사용자에게 응답한다.
① 사용자 웹 브라우저가 페이지에 대한 요청을 IIS 웹 서버에 보낸다.
② 웹 서버는 요청한 aspx 파일의 확장자가 ASP.NET에 등록되어 있는지를 판단한다. 만일 파일의 확장자가 다른 서비스(asp나 html)에 속해 있다면 ASP.NET은 참여하지 않는다.
③ 응용 프로그램에 있는 해당 페이지가 처음 요청된 것이라면 ASP.NET은 자도응로 응용 프로그램 영역을 만든다. 최적화된 실행을 위해 웹 페이지의 모든 코드를 컴파일한 후 컴파일된 파일을 캐싱한다. 이 과정이 이미 이루어졌다면 ASP.NET은 페이지의 컴파일된 버전을 재사용한다.
④ 컴파일된 BMI.aspx 페이지는 마치 일반 프로그램처럼 행동하며, Page Load와 같은 이벤트를 발생시킨다. 이 단계에서는 메모리에 있는 .NET 객체와 함께 동작한다.
⑤ 코드의 실행이 끝나면 ASP.NET은 웹 페이지에 있는 모든 컨트롤이 적절한 HTML 태그로 표현되었는지를 확인한다.
⑥ 최종 페이지는 사용자에게 보내지고 응용 프로그램은 종료된다.
페이지에 있는 버튼을 클릭하면 똑같은 과정이 진행된다. 추가로 4번째 단계에서 Page Load 이벤트를 처리한 후 ServerClick 이벤트가 처리되어 BMI를 구하기 위해 작성한 코드가 처리된다.
'ASP.NET 4.0' 카테고리의 다른 글
| [ASP.NET] Request 객체와 Response 객체 (0) | 2021.12.28 |
|---|---|
| [ASP.NET] Page 클래스 속성 (0) | 2021.12.28 |
| [ASP.NET] 객체 지향 프로그래밍 (2) (0) | 2021.12.28 |
| [ASP.NET] 객체 지향 프로그래밍 (1) (0) | 2021.12.27 |
| [ASP.NET] 제어문 (0) | 2021.12.27 |
댓글