Web Form
이번 강좌에서는 ASP.Net 웹폼(Web Form)에 대해 알아 보겠습니다. ASP.Net으로 Form을 만들게 되면 Web Form 이라고 하는데 이는 서버 기반의 이벤트 모델 입니다. 보여지는 부분(디자인) 과 비즈니스 로직(비하인드 코드 부분)을 분리하여 효율적인 프로그래밍이 가능 하도록 했습니다. 또한 다양한 콘트롤을 제공 함으로서 어려웠던 웹에서의 UI 구성을 쉽고 효율적으로 할 수 있습니다. 저도 과거에 JSP로 개발 할 때 UI만드는데 무려 한달 가까이 소모 했던 기억이 지금도 선 하군요…
그리고 ViewState라는 것을 두어 현재의 상태를 ASP.Net에서 저장 하고 있으므로 흔히 웹프로그래밍 시 매개변수로 값을 계속 던져 보관하여 나중에 뿌려주는 이런 귀찮음을 해결 했습니다. 결국 웹 페이지가 Reload 되더라도 ViewState라는 것 때문에 충분히 값을 보관 할 수 있다는 이야기 입니다.
또한 사용자가 자신의 컨트롤 등을 만들어서 정의할 수 있습니다. 사용자 인증을 위한 ID/Password의 UI부분을 통합하여 하나의 컨트롤로 만드는 것이 가능 하다는 이야기 입니다. 물론 만들어진 웹폼은 모바일등에서도 충분히 사용 가능 합니다.
Web Form 파일을 하나의 파일로 구성도 가능하며(Page 클래스를 상속 받아 만듬) 다음의 경우처럼 UI와 비즈니스 로직을 분리 할 수도 있습니다. 만약 UI와 비즈니스 로직을 분리하여 두개의 파일로 개발 하려면 아래 처럼 aspx 파일에서 @Page 지시자를 이용하여 정의 하면 됩니다.
Test.aspx 파일
<%@ Page language=”C#” Codebehind=”test.aspx.cs” %>
작성되는 test.aspx.cs 파일은 Page 클래스를 상속하여 만들면 됩니다.
물론 Visual Studio .Net을 이용하면 효율적으로 쉽게 UI를 작성 하는 것이 가능하며 CodeBehind의 작성 역시 쉽습니다. (위의 예처럼 사용자가 일일이 텍스트 파일 만드는 것 처럼 따로 만드셔도 되구요) Visual Studio .Net을 실행 하시고 C#(언어는 본인의 취향대로 로 하시면 됩니다) 웹응용 프로그램을 선택하시면 아래에 http://localhost/WebApplication1dlfkrh 표시 될 겁니다. (로컬에 IIS를 시작 시키 신 후) 시작을 하시면 폼이 하나 나타납니다. 거기에서 디자인을 하시면 되구요, 이벤트에 따라 코드를 작성 하실려면 컨트롤을 더블 클릭하거나 마우스 우측 버튼을 누르면 코드 보기 메뉴가 있는데 그걸 누르시면 Behind Code를 작성 할 수 있는 화면이 나타 납니다.
Visual Studio의 Web Forms 페이지 (Web Forms의 프로젝트 파일들 )
WebForm1.aspx,WebForm1.aspx.cs : 두 개의 파일로 하나의 Web Forms 페이지를 구성
.aspx 파일에는 HTML 요소와 Web Forms 컨트롤 등 Web Forms 페이지의 시각적 요소 포함, WebForm1.aspx.cs 클래스 파일은 숨겨져 있으며 WebForm1.aspx의 종속 파일
AssemblyInfo.cs : 이름, 버전, culture 정보 등 프로젝트의 어셈블리에 대한 메타데이터가 있는 프로젝트 정보 파일
Web.config : 웹 어플리케이션에서 사용되는 환경설정 파일(XML 기반)
Global.asax 및 Global.cs : 응용 프로그램 수준 이벤트 처리에 필요한 옵션 파일
(Application_Start, Application_End, Session_Start, Session_End)
Styles.css : 프로젝트에 사용되는 CSS 스타일시트 파일(컨트롤이 표시되는 시각적인 모양을 결정)
.vsdisco : XML Web services의 검색 정보를 제공하는 리소스에 대한 링크(URL)를 포함한 XML 기반 파일
Web Forms & Server control
Server Control 객체를 통하여 속성이나 이벤트, 메소드를 제어 합니다. 서버 컨트롤에는 이전 가오자에서도 보셨겠지만 HTML server control,Web control,Validation control,User control등이 있습니다.
서버 컨트롤과 그것이 HTML로 변환되었을때의 모양!
서버측) <asp:Button text = “저장” runat=“server” />
클라이언트 측) <input type = “submit” name=“save” value=“저장” >
서버 컨트롤은 ASP.Net이 인식 가능 하지만 HTML을 인식 할 수 있는 웹브라우저인 경우 이를 인식 할 수 없으므로 서버에서의 코딩 모양과 그것이 IIS 웹서버를 통해 번역 되었을때의 모습이 다름을 알 수 있습니다.
웹폼과 관련하여 이번에는 라운드 트립(Round Trip)에 대해 알아 보겠습니다.
라운드 트립이란 데이터가 돈다는 의미인데 예를들면 텍스트 박스가 하나 있고 거기에 어떤 글시를 썼다고 합시다. 만약 닷넷 환경이 아니라면 그 폼을 Submit 시키면 값이 없어 집니다. 그러나 닷넷의 웹 폼에서는 웹 브라우저의 그 값이 서버로 전송 되며 그 값이 다시 클라이언트로 간다는 의미 입니다.
그럼 이번에는 웹 폼 페이지의 처리 단계를 보도록 하겠습니다.
1. Init : 페이지와 컨트롤에 대해 초기화 합니다.
2. LoadViewState : 이전 요청에서 저장된 viewstate 속성값을 이용하여 서버컨트롤 상태 복구
3. LoadPostData : 서버 컨트롤 폼 필드로부터 반환된 데이터 처리, 컨트롤 속성 변경(IPostBackDataHandler를 구현하는 컨트롤만 처리:TextBox, Checkbox, Listbox, DropDownList)
4. Page Load : 서버 컨트롤 생성, 상태복원, 클라이언트의 데이터 반영 합니다.
5. RaisePostDataChangeEvent : postback에서의 상태 변경에 대한 이벤트 처리(IPostBackDataHandler를 구현하는 컨트롤만 처리)
6. RaisePostBackEvent : postback을 일으킨 서버 컨트롤의 이벤트 처리(IPostBackEventHandler를 구현하는 컨트롤만 처리: Button, Calenda, HtmlAnchor)
7. PreRender : 페이지 렌더링 전에 적용될 변경사항 처리 합니다.
8. SaveViewState : 서버 컨트롤의 상태를 viewstate에 저장 합니다.
9. Render : 컨트롤과 페이지의 출력결과가 생성되어 클라이언트로 전송 됩니다.
10. Control Dispose : 컨트롤 삭제 전의 정리 작업
11. Page Unload : 페이지와 페이지 구성 컨트롤들이 메모리에서 제거 됩니다.
페이지 처리 단계를 확인할려면 @Page 지시자에 trace=“true” 속성을 주시면 됩니다.
<!-- 아래는 하나의 파일로 UI와 로직을 같이 처리 했습니다.
이 파일을 c:\inetpus/wwwroot/test.aspx 라고 저장 후 브라우저에서
http://localhost/test.aspx 라고 하세요 -->
<% @Page Language = "C#" trace="true"%>
<script runat="server">
void btnClear_click(object o, System.EventArgs args) {
TextBox1.Text = "";
Label1.Text = "";
}
void btnContrl_click(object o, System.EventArgs args) {
for (int i= 0; i < Controls.Count; i++)
Label1.Text += "<br> " + Controls[i];
ControlCollection formCtrls = Controls[1].Controls;
Label1.Text += "<br>Form Control Count : " + formCtrls.Count;
}
void Page_Load() {
Label1.Text = TextBox1.Text + "반갑습니다.";
}
</script>
<HTML> <HEAD> <title>ASP.NET : Web Forms (Controls)</title> </HEAD>
<body>
<form runat="server">
이름을 입력하세요 : <asp:TextBox id = "TextBox1" runat="server"/>
<asp:Label id = "Label1" runat="server"/>
<asp:Button id = "btnClear" runat="server" onclick="btnClear_click" Text="Clear"/>
<asp:Button id = "btnContrl" runat="server" onclick="btnContrl_click" Text="컨트롤을 확인합니다"/>
</form>
</body>
</HTML>
이번 강좌에서는 ASP.Net 웹폼(Web Form)에 대해 알아 보겠습니다. ASP.Net으로 Form을 만들게 되면 Web Form 이라고 하는데 이는 서버 기반의 이벤트 모델 입니다. 보여지는 부분(디자인) 과 비즈니스 로직(비하인드 코드 부분)을 분리하여 효율적인 프로그래밍이 가능 하도록 했습니다. 또한 다양한 콘트롤을 제공 함으로서 어려웠던 웹에서의 UI 구성을 쉽고 효율적으로 할 수 있습니다. 저도 과거에 JSP로 개발 할 때 UI만드는데 무려 한달 가까이 소모 했던 기억이 지금도 선 하군요…
그리고 ViewState라는 것을 두어 현재의 상태를 ASP.Net에서 저장 하고 있으므로 흔히 웹프로그래밍 시 매개변수로 값을 계속 던져 보관하여 나중에 뿌려주는 이런 귀찮음을 해결 했습니다. 결국 웹 페이지가 Reload 되더라도 ViewState라는 것 때문에 충분히 값을 보관 할 수 있다는 이야기 입니다.
또한 사용자가 자신의 컨트롤 등을 만들어서 정의할 수 있습니다. 사용자 인증을 위한 ID/Password의 UI부분을 통합하여 하나의 컨트롤로 만드는 것이 가능 하다는 이야기 입니다. 물론 만들어진 웹폼은 모바일등에서도 충분히 사용 가능 합니다.
Web Form 파일을 하나의 파일로 구성도 가능하며(Page 클래스를 상속 받아 만듬) 다음의 경우처럼 UI와 비즈니스 로직을 분리 할 수도 있습니다. 만약 UI와 비즈니스 로직을 분리하여 두개의 파일로 개발 하려면 아래 처럼 aspx 파일에서 @Page 지시자를 이용하여 정의 하면 됩니다.
Test.aspx 파일
<%@ Page language=”C#” Codebehind=”test.aspx.cs” %>
작성되는 test.aspx.cs 파일은 Page 클래스를 상속하여 만들면 됩니다.
물론 Visual Studio .Net을 이용하면 효율적으로 쉽게 UI를 작성 하는 것이 가능하며 CodeBehind의 작성 역시 쉽습니다. (위의 예처럼 사용자가 일일이 텍스트 파일 만드는 것 처럼 따로 만드셔도 되구요) Visual Studio .Net을 실행 하시고 C#(언어는 본인의 취향대로 로 하시면 됩니다) 웹응용 프로그램을 선택하시면 아래에 http://localhost/WebApplication1dlfkrh 표시 될 겁니다. (로컬에 IIS를 시작 시키 신 후) 시작을 하시면 폼이 하나 나타납니다. 거기에서 디자인을 하시면 되구요, 이벤트에 따라 코드를 작성 하실려면 컨트롤을 더블 클릭하거나 마우스 우측 버튼을 누르면 코드 보기 메뉴가 있는데 그걸 누르시면 Behind Code를 작성 할 수 있는 화면이 나타 납니다.
Visual Studio의 Web Forms 페이지 (Web Forms의 프로젝트 파일들 )
WebForm1.aspx,WebForm1.aspx.cs : 두 개의 파일로 하나의 Web Forms 페이지를 구성
.aspx 파일에는 HTML 요소와 Web Forms 컨트롤 등 Web Forms 페이지의 시각적 요소 포함, WebForm1.aspx.cs 클래스 파일은 숨겨져 있으며 WebForm1.aspx의 종속 파일
AssemblyInfo.cs : 이름, 버전, culture 정보 등 프로젝트의 어셈블리에 대한 메타데이터가 있는 프로젝트 정보 파일
Web.config : 웹 어플리케이션에서 사용되는 환경설정 파일(XML 기반)
Global.asax 및 Global.cs : 응용 프로그램 수준 이벤트 처리에 필요한 옵션 파일
(Application_Start, Application_End, Session_Start, Session_End)
Styles.css : 프로젝트에 사용되는 CSS 스타일시트 파일(컨트롤이 표시되는 시각적인 모양을 결정)
.vsdisco : XML Web services의 검색 정보를 제공하는 리소스에 대한 링크(URL)를 포함한 XML 기반 파일
Web Forms & Server control
Server Control 객체를 통하여 속성이나 이벤트, 메소드를 제어 합니다. 서버 컨트롤에는 이전 가오자에서도 보셨겠지만 HTML server control,Web control,Validation control,User control등이 있습니다.
서버 컨트롤과 그것이 HTML로 변환되었을때의 모양!
서버측) <asp:Button text = “저장” runat=“server” />
클라이언트 측) <input type = “submit” name=“save” value=“저장” >
서버 컨트롤은 ASP.Net이 인식 가능 하지만 HTML을 인식 할 수 있는 웹브라우저인 경우 이를 인식 할 수 없으므로 서버에서의 코딩 모양과 그것이 IIS 웹서버를 통해 번역 되었을때의 모습이 다름을 알 수 있습니다.
웹폼과 관련하여 이번에는 라운드 트립(Round Trip)에 대해 알아 보겠습니다.
라운드 트립이란 데이터가 돈다는 의미인데 예를들면 텍스트 박스가 하나 있고 거기에 어떤 글시를 썼다고 합시다. 만약 닷넷 환경이 아니라면 그 폼을 Submit 시키면 값이 없어 집니다. 그러나 닷넷의 웹 폼에서는 웹 브라우저의 그 값이 서버로 전송 되며 그 값이 다시 클라이언트로 간다는 의미 입니다.
그럼 이번에는 웹 폼 페이지의 처리 단계를 보도록 하겠습니다.
1. Init : 페이지와 컨트롤에 대해 초기화 합니다.
2. LoadViewState : 이전 요청에서 저장된 viewstate 속성값을 이용하여 서버컨트롤 상태 복구
3. LoadPostData : 서버 컨트롤 폼 필드로부터 반환된 데이터 처리, 컨트롤 속성 변경(IPostBackDataHandler를 구현하는 컨트롤만 처리:TextBox, Checkbox, Listbox, DropDownList)
4. Page Load : 서버 컨트롤 생성, 상태복원, 클라이언트의 데이터 반영 합니다.
5. RaisePostDataChangeEvent : postback에서의 상태 변경에 대한 이벤트 처리(IPostBackDataHandler를 구현하는 컨트롤만 처리)
6. RaisePostBackEvent : postback을 일으킨 서버 컨트롤의 이벤트 처리(IPostBackEventHandler를 구현하는 컨트롤만 처리: Button, Calenda, HtmlAnchor)
7. PreRender : 페이지 렌더링 전에 적용될 변경사항 처리 합니다.
8. SaveViewState : 서버 컨트롤의 상태를 viewstate에 저장 합니다.
9. Render : 컨트롤과 페이지의 출력결과가 생성되어 클라이언트로 전송 됩니다.
10. Control Dispose : 컨트롤 삭제 전의 정리 작업
11. Page Unload : 페이지와 페이지 구성 컨트롤들이 메모리에서 제거 됩니다.
페이지 처리 단계를 확인할려면 @Page 지시자에 trace=“true” 속성을 주시면 됩니다.
<!-- 아래는 하나의 파일로 UI와 로직을 같이 처리 했습니다.
이 파일을 c:\inetpus/wwwroot/test.aspx 라고 저장 후 브라우저에서
http://localhost/test.aspx 라고 하세요 -->
<% @Page Language = "C#" trace="true"%>
<script runat="server">
void btnClear_click(object o, System.EventArgs args) {
TextBox1.Text = "";
Label1.Text = "";
}
void btnContrl_click(object o, System.EventArgs args) {
for (int i= 0; i < Controls.Count; i++)
Label1.Text += "<br> " + Controls[i];
ControlCollection formCtrls = Controls[1].Controls;
Label1.Text += "<br>Form Control Count : " + formCtrls.Count;
}
void Page_Load() {
Label1.Text = TextBox1.Text + "반갑습니다.";
}
</script>
<HTML> <HEAD> <title>ASP.NET : Web Forms (Controls)</title> </HEAD>
<body>
<form runat="server">
이름을 입력하세요 : <asp:TextBox id = "TextBox1" runat="server"/>
<asp:Label id = "Label1" runat="server"/>
<asp:Button id = "btnClear" runat="server" onclick="btnClear_click" Text="Clear"/>
<asp:Button id = "btnContrl" runat="server" onclick="btnContrl_click" Text="컨트롤을 확인합니다"/>
</form>
</body>
</HTML>
 |  [개발실무100%환급외]빅데이터/하둡/몽고DB/SQL/자바/스프링/안…  | 12-27 | 2465 | |
| [채용확정무료교육]오라클자바개발잘하는신입뽑기2개월과정,교육… | 12-11 | 1812 | |
| 53 | [평일100%환급7건]Spring,자바&JSP,안드로이드,웹퍼블리싱,C#닷… | 03-15 | 1618 | |
| 52 | [주말]C#,ASP.NET마스터 | 01-31 | 1711 | |
| 51 | [기업100%환급,평일주간]SQL기초에서스키마오브젝트,PLSQL,힌트… | 01-31 | 2405 | |
| 50 | [평일주간야간,주말]C기본&자료구조,알고리즘 | 01-31 | 1354 | |
| 49 | [평일주간,평일야간,주말]Spring,MyBatis,Hibernate개발자과정-… | 01-19 | 1654 | |
| 48 | [평일야간,주말]안드로이드개발자과정(Android기초실무) | 01-11 | 1511 | |
| 47 | [평일야간,주말주간야간]JAVA,Network&JSP&Spring,MyBatis,Hiber… | 01-03 | 2040 | |
| 46 | [개발실무100%환급외]빅데이터/하둡/몽고DB/SQL/자바/스프링/안… | 12-27 | 2465 | |
| 45 | [평일주간]NoSQL,MongoDB,빅데이터기초과정 | 12-19 | 1771 | |
| 44 | [평일주간야간, 주말]웹퍼블리싱 마스터(HTML5,CSS3,jQUERY,AJAX… | 12-14 | 1746 | |
| 43 | [채용확정무료교육]오라클자바개발잘하는신입뽑기2개월과정,교육… | 12-11 | 1812 | |
| 42 | [평일주간]빅데이터하둡기초과정(BigData Hadoop) | 12-09 | 1414 | |
| 41 | [평일야간]닷넷(C#,Network,ADO.NET,ASP.NET)마스터 | 12-01 | 1643 | |
| 40 | [기업100%환급]오라클&자바웹스프링신입과정3주(SQL,JAVA,JSP,Se… | 12-01 | 1821 | |
| 39 | [평일야간,주말]SQL기초에서실무까지(SQL기초,PLSQL,힌트,튜닝) | 12-01 | 1292 | |
댓글 없음:
댓글 쓰기