[ASP.NET] 서버 컨트롤

SSR VS CSR

• SSR: 서버에서 최종 HTML을 전부 랜더링해서 웹 브라우저에 송출하는 것
• CSR: 웹 브라우저에서 최종 HTML을 랜더링하는 것
  => 클라이언트는 AJAX, Fetch API, Axios등을 사용해 서버에 데이터 요청하고 서버는 데이터(API)를 JSON 혹은 XML 형태로 제공 후 클라이언트에선 JavaScript로 동적 랜더링
  => 즉 1. 클라이언트에서 ajax, fetch, axios로 데이터 요청 => 2. 서버에서 json or xml 데이터 응답 => 3. 클라이언트에서 랜더링

Master Page

개념

• Master Page: 공통 레이아웃(헤더 및 푸터) 관리
• <asp:ContentPlaceHolder id="cphContents" runat="server"></asp:ContentPlaceHolder>에 각 페이지 별 코드가 삽입됨

Master Page 선언

<asp:ContentPlaceHloder id="masterPage" >

Master Page의 부분부분의 해당 서버 컨트롤들을 배치하면서 해당 부분에 외부로부터 주입받을 수 있음

Master Page 호출

<%@ Language="C#" MasterPageFile="~/SiteLayout/Record.master" AutoEventWireup="true" CodeBehind="TeamRank.aspx.cs" Inherits="KBOClient.TeamRank.TeamRank" %>

<asp:Content ContentPlaceHloderID="masterPage">

Content Page

• Master Page: 공통 레이아웃
• Content Page: Master Page를 사용하는 페이지, <asp:Content ID="content" runat="server" ContentPlaceHolderId="bodyLayout"> 으로 해당 Content를 Master Page에 주입 가능

runat="server" 이유

1. 코드 비하인드에서 사용 가능

• 해당 태그가 ASP.NET 서버에서 처리되는 것을 의미
• 즉 해당 태그를 C# 코드에서 활용 가능
• 예를 들어 <asp:Repeater ID="rptMember" runat="server"> 사용 시 해당 태그를 C# 코드에서 바인딩할 수 있기에 rptMember.DataSource = memberList; rptMember.DataBind()등의 명령을 수행할 수 있는 것
• 이것은 SOAP 통신을 기반으로 하므로 이렇게 동작하는 것
• 즉 프론트 우선 개발 후 서버 개발로 흐름이 이어지는 것
• .aspx => runat & ID => .aspx.designer.cs => .aspx.cs

1-1. 작동 원리

• 하나의 Web Form인 Ceing.aspx를 만들었을 경우 코드 비하인드에 Ceing.aspx.cs
• 이때 코드 비하인드에서 asp 서버 컨트롤을 사용해서 작업하려면 앞단에서 asp 서버 컨트롤들에 대한 ID 및 runat 속성을 지정해줘야 aspx.desinger.cs 에도 자동적으로 선언이 되어 실제 코드 비하인드인 aspx.cs에서 쓸 수 있는 것
• 즉 Ceing.aspx => Ceing.aspx.designer.cs => Ceing.aspx.cs 가 되는 것

2. 결론

asp 서버 컨트롤에 ID 혹은 runat 속성을 하나라도 지정 안 하면 aspx.designer.cs에 선언되지 않으므로 결국 코드 비하인드(C#)에서 작업 불가능, 그럼 태그들에 대한 명령을 내릴 수 없음

ASP.NET 에서의 input 및 label

• <asp:TextBox>: input과 같은 역할
• <asp:Label>: label과 흡사하지만, span 태그를 랜더링해주기에 AssociatedControlID 속성으로 for 값을 지정하면 label처럼 동작

ASP.NET 서버 컨트롤 종류

개념

Web Form(.aspx)에서 동적 랜더링을 위한 asp.net framework 에서 제공하는 태그

asp:Panel

th:block과 같음 특정 HTML 영역을 ASP 서버 컨트롤들로 서버에서 조작하기 위해 그룹화 시키는 것

asp:DropDownList

• 셀렉트 박스 즉 <select></select>를 의미, 셀렉트 박스의 입력 항목 <option></option>은 <asp:ListItem>으로 가능
• DropDownList가 부모이므로 여기에 ID 및 runat 지정
• <asp:ListItem>: Text에는 보여줄 데이터, Value에는 서버에 넘길 데이터
• autoPostBack 속성을 키면 자동으로 데이터를 선택할 때마다 데이터가 서버에 보내짐에 따라 선택할때마다 페이지가 새로 로딩됨 SSR 방식이므로!

asp:Literal vs asp:Label

• <asp:Literal>: HTML 그대로 리턴
• <asp:Label>: <span></span> 붙여서 리턴

asp:Repeater

• 반복 시 <ItemTemplate>, <%#Eval()%>와 같이 사용

asp:HiddenField

• 클라이언트의 입력값 상태 유지하기 위해 사용

asp:ImageButton

• <input type="image"> 를 랜더링해줌
• 말 그대로 이미지 모양의 버튼임
• ImageUrl: 이미지 경로 지정(Object Storage)
• AlternateText: 해당 버튼을 설명할 텍스트
• OnClick: 해당 값 지정 시 자동으로 코드 비하인드에서 메서드 생성됨, 디자이너 partial class 마냥