asp.net web form

asp.net web form

특징

1. 서버사이드 컨트롤
   ASP.NET은 버튼, 라벨, 텍스트 박스 등 다양한 서버사이드 컨트롤을 제공한다. 이 컨트롤들은 서버에서 실행되고, 사용자의 입력을 처리하거나 페이지의 데이터를 동적으로 변경할 수 있다.

2. 상태관리
   웹은 기본적으로 상태가 없는 환경이지만, ASP.NET Web Forms는 뷰 상태, 세션 상태, 쿠키 등을 사용하여 사용자 세션 간에 데이터를 유지할 수 있도록 지원한다.

3. 이벤트 드리븐 프로그래밍
   웹 폼은 윈도우 폼과 비슷한 이벤트 기반의 프로그래밍 모델을 사용한다. 개발자는 특정 사용자 동작 ( 버튼 클릭 등 ) 에 대응하는 이벤트 핸들러를 작성할 수 있다.

4. 페이지 생명주기
   ASP.NET 웹 페이지는 복잡한 페이지 생명주기를 가지고 있어서 *여러 단계를 거쳐 클라이언트에 응답을 제공한다.

• 여러단계
  예) 초기화, 로드, 포스트백 처리, 렌더링

ASP.NET 페이지 생명주기

1. 페이지 요청 Page Request
   페이지가 요청되는 단계로, 페이지가 처음 요청되는지 아니면, 이미 로드된 페이지에 대한 재요청인지 확인한다.

2. 시작
   페이지 프레임워크가 페이지 생성을 시작하고 필요한 페이지 속성을 설정한다

3. 초기화
   모든 컨트롤이 초기화되고, 컨트롤의 고유 id 가 할당되고 이벤트 핸들러를 컨트롤에 연결할 수 있다.

4. 로드
   포스트백 (재요청) 시에는 이전 페이지 요청에서 저장된 뷰 상태 정보를 로드하여 각 컨트롤의 속성 값을 복원한다.

5. 포스트백(재요청) 이벤트 처리
   클라이언트로부터의 입력이나 이벤트에 대응하여 서버 사이트 이벤트 핸들러가 실행된다.

6. 로드
   페이지와 관련된 모든 컨트롤이 메모리에 로드된다. 보통 이 단계에서 데이터 로딩 작업이나 다른 초기화 작업을 수행한다.

7. 프리렌더
   이 단계에서는 페이지의 각 컨트롤이 그 자체 렌더링에 필요한 내부 준비를 한다. 이 단계 뒤에는 변경 사항을 저장하는 것이 좋다.

8. 뷰 상태 저장
   페이지와 모든 컨트롤의 현재 상태가 저장된다. 이 상태는 다음 페이지 요청 시 사용되어 페이지의 상태를 복원한다.

9. 렌더링
   페이지와 그 외 모든 컨트롤이 클라이언트에 보낼 html로 변환된다. 이 단계에서는 실제 출력이 생성되지만, 클라이언트에 아직 보내진 않는다.

10. 종료
    페이지 처리가 완료된 후 마지막 정리 작업이 이루어지고, 페이지 및 컨트롤 개체가 메모리에서 해제된다.

프로젝트 주요 구조

1. Scripts 폴더
   일반적으로 자바스크립트 파일을 저장하는 폴더입니다. jQuery 라이브러리 파일(jQuery.js)과 관련 플러그인, 그리고 개발자가 작성한 사용자 정의 스크립트 파일들이 이 폴더에 위치합니다.

2. Content 폴더
   CSS 파일과 같은 스타일 관련 자원을 저장하는 폴더입니다. jQuery UI 같은 jQuery 기반 UI 라이브러리를 사용하는 경우, 관련 CSS 파일들도 여기에 포함될 수 있습니다.

3. ASPX 페이지와 Master 페이지
   jQuery를 사용하여 페이지 요소에 동적 기능을 추가할 수 있습니다. 예를 들어, 페이지 로드 시 DOM 요소를 조작하거나, 사용자 이벤트에 반응하여 비동기적으로 서버와 통신(Ajax)하는 스크립트를 삽입할 수 있습니다.

4. Web.config
   필요에 따라 스크립트 파일이나 CSS 파일을 CDN(Content Delivery Network)을 통해 로드하도록 설정할 수 있습니다. 이 설정은 Web.config 파일에서 구성할 수 있습니다.

5. Global.asax
   애플리케이션의 시작 시 jQuery 스크립트를 로드하기 위한 초기화 코드를 여기에 포함할 수 있습니다. 예를 들어, 모든 페이지에 공통적으로 적용될 스크립트를 세팅할 수 있습니다.

제이쿼리와 web form을 같이 사용하는 예제 케이스

1. 클라이언트 사이드 유효성 검사
   제이쿼리를 사용하여 사용자 입력의 유효성을 검사하고, 서버로 데이터를 전송하기 전에 즉각적인 피드백을 제공

2. 동적 컨텐츠 로딩
   제이쿼리의 ajax 기능을 사용하여 페이지 전체를 새로 고치지 않고도 특정 부분만 업데이트할 수 있다. 예시로 사용자가 버튼을 클릭하면 서버에서 데이터를 가져와 페이지의 특정 부분만 갱신할 수 있다.

3. 애니메이션 및 효과

웹 폼 서버 컨트롤

ASP.NET Web Forms에서 서버 컨트롤은 서버 측에서 실행되고, 클라이언트에 html, css, js를 출력하는 재사용 가능한 컴포넌트이다. 이 컨트롤들은 페이지의 동적 상호작용 및 데이터 처리를 단순화하고, 복잡한 클라이언트-서버 통신을 보다 효율적으로 관리할 수 있게 한다.

예시로 asp:Button 컨트롤을 살펴보자.

<asp:Button runat="server" ID="cancelBtn" CssClass="board_prev_page" Text="취소" OnClientClick="return cancel();" />

• <asp:Button> : asp.net의 서버 사이트 버튼 컨트롤 생성
• runat = "server" : 이 컨트롤이 서버 사이드에서 실행됨을 명시
• ID = "cancelBtn" : 이 버튼의 고유 식별자로, 서버 사이드 코드나 클라이언트 측 스크립트에서 이 버튼을 참조할 때 사용
• CssClass = "board_prev_page" : 이 버튼에 적용할 css 클래스, 스타일 시트에서 이 클래스로 스타일 정의 가능
• Text = "취소" : 버튼에 표시될 텍스트이다.
• OnClientClick = "return cancel();" 클라이언트 측에서 버튼을 클릭했을 때 실행될 자바스크립트 함수를 지정한다.

몇가지를 더 살펴보면

기본 웹 컨트롤

Button, TextBox, .....

데이터 바인딩 컨트롤

• GridView
• DetailsView
• FormView
• Reapeater / DataList

특수기능 컨트롤

• FileUpload
• Image
• HyperLink
  하이퍼링크를 생성한다. 페이지 내부 혹은 외부의 다른 페이지로 연결

검증 컨트롤

• RequiredFieldValidator
  필드가 비어있지 않도록 한다.

• RegularExpressionValidator
  입력이 정규 표현식 패턴과 일치하는지 검사

• RangeValidator
  입력 값이 특정 범위 내에 있는지 검사

• CompareValidator
  두 입력 필드의 값을 비교

네비게이션 컨트롤

• Menu
  동적 메뉴를 생성하여, CSS 또는 이미지를 이용해 스타일 지정가능
• TreeView
  계층적 구조를 가진 트리뷰 제공
• SiteMapPath
  브레드크럼 탐색을 제공하여 사용자가 현재 위치를 쉽게 파악하고 페이지 간에 이동할 수 있도록 한다.

데이터바인딩 신택스

 <div class="board_list_title ellipsis">                                    
       <%# Eval("title") %>
       <%# Eval("userfile") %>
       <%# Eval("newtag") %>
   </div>

<%# ~~~ %>은 기존 프론트 개발에서 못보던건데 뭐지 싶었다.
이건 데이터 바인딩 신택스라고 한다. 데이터 소스에서 데이터를 가져와서 웹페이지의 컨트롤에 표시하는데 사용된다. 여기서 Eval 함수는 데이터소스에서 지정된 필드 이름에 해당하는 값을 동적으로 평가하고 검색한다. 이러한 식은 주로 위에서 언급한 ListView, GridView, Repeater와 같은 데이터바운드컨트롤 내에서 사용된다고 한다.

"Eval is evil"이라고 얼마전에 핸드폰을 보다가 스쳐지나간 글귀가 머릿속을 스쳐지나갔다 그래서 한번 짚어보고 넘어가려고 한다.

Eval(String command) : 결과값, 없을 경우 undefined

문자로 표현된 js 코드를 실행하는 함수

왜 Eval 은 Evil일까?
1. 보안에 취약하다.
주어진 문자열을 코드로 실행하기 때문에 악의적으로 조작된 코드가 실행될 가능성이 있다. 스크립트 삽입공격에 취약하고 보안에 악영향을 준다.

2. 디버깅이 어렵다.
   뭐가 들어오는지 우리는 알 수 없고, 오류 발생시 추적이 어렵고 유지보수가 힘들어진다.

3. 성능문제
   Eval을 사용하는 코드는 일반적으로 이해하기 어렵고 유지보수가 힘들다. 코드의 흐름을 따라가기 어려워 프로그램의 구조가 복잡해진다.

asp.net webform에서는 사실 좀 다른 의도로 사용한 것이지만 ( 데이터바인딩 )
그래도 Eval 보다는 Bind를 쓰는 걸 권장한다.

 <ItemTemplate>
      <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>