< %# % > 바인딩 태그의 이용과 활용

프로그램/c# asp.net

< %# % > 바인딩 태그의 이용과 활용

뭉치냐옹 2009. 2. 25. 18:48

요약설명	ASP.NET에는 기존의 '< % % >'태그 외에 데이터 바인딩을 위한 새로운 태그 '< %# % >'를 제공한다. 이 태그는 많은 유연성를 가지고 있어서 특정 데이터 소스 뿐만 아니라 컬렉션이나 메소드를 이용해서 바인딩할 수 있으므로 개발자에게 많은 편의성을 제공한다.

프로퍼티	Customer : <%# CustomerID %>
표현식	Contact : <%# (Customer.Firstname + Customer.LastName) %>
메소드	Total : <%# GetTotal(CustomerID) %>
컬렉션	Orders : <asp:ListBox id = "List1" datasource='<%# myArray %>' runat="server">

1. 프로퍼티 데이터 바인딩

웹 폼을 생성하고 Label 컨트롤을 추가한 후 Label 컨트롤의 속성창에'(DataBindings)'의 확장버튼을 클릭하면 DataBindings 창이 뜨는 것을

확인할 수 있을 것이다. 프로퍼티 중에서 데이터바인딩할 것은 Text 프로퍼티이다. 데이터바인딩 창에서 Text 프로퍼티를 선택하고,

'사용자 지정 바인딩 식'을 선택한 후 'CustomName'이라고 입력하자.

여기서 CustomName이 바로 우리가 사용할 프로퍼티 변수의 이름이다. 즉, 페이지 클래스의 CustomName 프로퍼티 값을 이용해서 Label 컨트롤의

Text 프로퍼티를 데이터바인딩 할 것이다.

property.aspx

<P><FONT face="굴림">Simple Property 데이터바인딩</FONT></P>

<P><FONT face="굴림"> 안녕하세요. 

<asp:Label id=lblName runat="server" Text="<%# CustomerName %>"> </asp:Label>님 반갑습니다.</FONT></P>

</form>

public string CustomerName

{

get

{

return "Younho~~";

}

private void Page_Load(object sender, System.EventArgs e)

{

Page.DataBind();

}

2. 표현식 데이터바인딩

웹 폼을 생성하고 TextBox 컨트롤 2개와 Button 컨트롤, Label 컨트롤을 추가하자. Label 컨트롤의 속성창에서 '(DataBindings)'의 확장버튼을

클릭하여 데이터바인딩 창을 띄우고 Text 프로퍼티를 선택하고 '사용자 지정 바인딩식'을 선택한 후 "<%# TextBox1.Text + TextBox2.Text %>"

라고 입력하자.

expression.aspx

<P><FONT face="굴림">Expression 데이터바인딩</FONT></P>

텍스트1 : <asp:TextBox id="TextBox1" runat="server"></asp:TextBox><br>

텍스트2 : <asp:TextBox id="TextBox2" runat="server"></asp:TextBox></FONT></P>

<asp:Button id="btnOK" runat="server" Text="Button"></asp:Button></FONT></P>

<asp:Label id="lblMessage" runat="server" Text="<%# TextBox1.Text + TextBox2.Text %>"></asp:Label>

</FONT></P>

</form>

private void btnOK_Click(object sender, System.EventArgs e)

{

Page.DataBind();

}

3. 메소드 데이터바인딩

웹 폼을 생성하고 TextBox, Button, Label을 추가하자. Html 뷰어에서 추가한 Label의 Text 프로퍼티에 직접

'<%# CaculateAge(txtYear.Text) %>'를 추가한다.

method.aspx

<P><FONT face="굴림">Method 데이터바인딩</FONT></P>

<P><FONT face="굴림">태어난 년도를 입력하세요.</FONT></P>

<P>

<asp:TextBox id="txtYear" runat="server"></asp:TextBox><FONT face="굴림">년

<asp:Button id="btnOK" runat="server" Text="Button"></asp:Button></FONT></P>

<P><FONT face="굴림">올해

<asp:Label id="lblAge" runat="server" Text="<%# CaculateAge(txtYear.Text) %>">

</asp:Label> 세 입니다.</P>

</FONT>

</form>

public int CaculateAge(string BirthYear)

{

int Age;

Age = DateTime.Now.Year - int.Parse(BirthYear) + 1;

return Age;

}

private void btnOK_Click(object sender, System.EventArgs e)

{

Page.DataBind();

}

4. 컬렉션 바인딩

데이터바인딩 방법에서 가장 많이 사용될 부분은 데이터베이스로 부터 쿼리한 데이터를 이용해서 결과를 페이지에 보여 주는 것이다.

그러나 이러한 경우의 데이터는 단일의 값이 아니라 여러 레코드로 구성되어 있고 게다가 하나의 레코드도 여러 칼럼으로 구성되어 있는 복작한

구조일 것이다. .NET에서 컬렉션을 구성할 수 있는 자료구조는 여러가지 형태가 있는데 여기서는 ArrayList, HashTabel, Stack, Queue

그리고 ADO.NET 객체를 이용한 방법을 통한 데이터바인딩을 알아 보도록 한다.

1) ArrayList : 간단한 값들의 리스트들을 저장할 수 있으며 ListBox나 DropDownList 컨트롤의 아이템을 구성하는데 유용하게 사용될 수 있는

데이터 소수이다. 간단히 Add() 메소드를 이용해서 값을 추가할 수 있다.

웹 폼을 생성하고 DropDownList 컨트롤을 추가하자. DropDownList 컨트롤에서 주목해야 될 것은 DataSource 프로퍼티와 DataBind() 메소드이다.

대부분의 웹 서버 컨트롤은 배열이나 XML, 데이터베이스와 바인딩함으로써 구성될 수 있도록 DataSource 프로퍼티를 제공한다. DataSource 프로퍼티

에 바인딩할 데이터의 소스를 설정한 후 DataBind() 메소드를 호출하면 지정한 소스로 부터 가져온 값에 의해 컨트롤이 구성된다.

col_arraylist.aspx

<P><FONT face="굴림">Collection 데이터바인딩 - ArrayList</FONT></P>

</form>

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

// ArrayList 아이템 구성

ArrayList arr = new ArrayList();

arr.Add("손경동");

arr.Add("한동균");

arr.Add("어정두");

arr.Add("윤석헌");

// DropDownList 컨트롤 데이터 바인딩

// DataSource에 ArrayList를 대입시킨다.

comArray.DataSource = arr;

comArray.DataBind();

}

2) HashTable : 키(key)와 값(value)의 짝을 이루는 아이템으로 구성된 자료구조이다. HashTable은 사전(dictionary) 스타일의 데이터를

저장하는데 흔히 쓰인다. 그리고 키와 값을 저장하고 검색하는데 있어서 내부적으로 해시 알고리즘을 사용한다.

Add 메소드로 아이템을 추가하고 Remove 메소드를 이용해서 아이템을 삭제할 수 있다.

웹 폼을 생성하고 RadioButtonList 컨트롤을 추가하자. 여기선 HashTable의 자료를 통해 RadioButtonList 컨트롤을 구성할 것이다.

RadioButtonList 컨트롤의 Item이 선택되면 라운드트립이 발생할 수 있도록 AutoPostBack을 'True'로 설정한다.

col_hashtable.aspx

<P><FONT face="굴림">Collection 데이터바인딩 - HashTable</FONT></P>

</form>

HashTable에 저장할 키(key)로 '가수명'을 그리고 값(value)으로 '노래명'을 짝지어 저장하고

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

// HashTable 아이템 구성

Hashtable htSong = new Hashtable();

htSong.Add("서태지", "울트라맨이야");

htSong.Add("마이클잭슨", "Invincible");

htSong.Add("CBMASS", "휘파람");

htSong.Add("문윤호", "선하신 목자");

// RadioButtonList 컨트롤 데이터바인딩

optHash.DataSource = htSong;

optHash.DataTextField = "Value";

optHash.DataValueField = "Key";

optHash.DataBind();

}

private void optHash_SelectedIndexChanged(object sender, System.EventArgs e)

{

Response.Write("선택한 아이템 : " + optHash.SelectedItem.Text + "(" + optHash.SelectedItem.Value + ")<hr>");

}

3) Stack : LIFO(Last-In First-Out) 형태의 컬렉션 구조를 가지는 자료구조이다. 데이터를 저장하는 행위를 'Push'라고 하며

데이터를 가져오는 행위를 'Pop'이라고 한다. .NET에서는 Stack 자료구조를 BCL 차원에서 지원 해주며 데이터 처리를 위해

Pop과 Push 메소드를 제공하고 있다.

웹 폼을 생성하고 ListBox 컨트롤을 추가하자.

col_stack.aspx

<P><FONT face="굴림">Collection 데이터바인딩 - Stack</FONT></P>

<P>

<asp:ListBox id="lstStack" runat="server" SelectionMode="Multiple" Rows="3"></asp:ListBox></P>

</form>

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

// Stack 아이템 구성

Stack st = new Stack();

st.Push("John Petrucci");

st.Push("Eric Johnson");

st.Push("Pat Mathney");

st.Push("Steve Vai");

// ListBox 컨트롤 데이터바인딩

lstStack.DataSource= st;

lstStack.DataBind();

}

4) Queue : FIFO(First-In First-Out) 형태의 컬렉션 구조를 가지는 자료구조이다. 데이터를 입력하는 행위를 'Enqueue'라고 하며

데이터를 추출하는 행위를 'Degueue'라고 한다.

웹 폼을 생성하고 CheckBoxList 컨트롤을 추가하자.

col_queue.aspx

<P><FONT face="굴림">Collection 데이터바인딩 - Queue</FONT></P>

</form>

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

// Queue 아이템 구성

Queue q = new Queue();

q.Enqueue("HDD");

q.Enqueue("CPU");

q.Enqueue("VGA");

q.Enqueue("RAM");

// CheckBoxList 컨트롤 데이터바인딩

chkQueue.DataSource = q;

chkQueue.DataBind();

}

5. DataBinder.Eval 메소드

Repeater나 DataList, DataGrid와 같은 컨트롤은 데이터바인딩에 템플릿(template)을 사용한다. 이때 실제 데이터소스와 연결된 것은 아이템을

구성하는 템플릿이 아니라 이를 포함하고 있는 부모 객체이므로 템플릿 내에서는 부모객체의 데이터소스에 접근하기 위해서

Container.DataItem("필드이름")과 같은 형태로접근해야 한다. 바인딩할 아이템을 지정하기 위해 DataBinder.Eval()메소드를 이용한다.

ex : <%# DataBinder.Eval(Container.DataItem, "CategoryName") %>

웹 폼 컨트롤을 데이터바인딩할 때 실제 데이터소스의 값이 아니라 어떠한 변형과정을 거쳐서 출력하고자 할 경우, 또는 숫자 값이나 날짜 데이터를

특정 형태로 보여주고자 할 때에는 DataBinder.Eval() 메소드를 이용해서 표현식을 정의할 수 있다.

ex : <%# DataBinder.Eval(Container.DataItem, "RegistrationDate", "{0:s}") %>

숫자 관련 표현식 1

----------------------------------------------------------------

형식 문자 설명 예

----------------------------------------------------------------

C/c 화페형(currency) \1,500,000 , $1,302.50

D/d 10진수(decimal) 203, 1032, -83

E/e 지수형(exponential) 3.56E+12, -1.5e+3

F/f 고정소수점(fix-point) 35.200, -0.291

G/g 일반형(general) 실제값에 따라 달라짐

N/n 숫자형(number) 2,593.12 16.21

P/p 확률형(%) 25.3% -20%

X/x 16진수(hex) &H2f89 0x2931

----------------------------------------------------------------

숫자 관련 표현식 2

----------------------------------------------------------------

형식 문자 설명

----------------------------------------------------------------

0 지정된 자리에 값이 없으면 0으로 표시

# 지정된 값을 표시하고 값이 없으면 무시

. 소수점 표시

, 컴마로 숫자 그룹을 표시

% 퍼센트 문자 표시

; 양수, 음스, 0일때 값을 구분지어서 표현식을 지정

----------------------------------------------------------------

EX : 1.2345 "00#.##" 001.23

-1.1234 "00#.##;(00#.##);[0]" (001.12)

날짜 관련 표현식

----------------------------------------------------------------

형식 문자 설명 예

----------------------------------------------------------------

d Short date 2001-12-21

D Long date 2001년 12월 21일 금요일

f full(long date, short time) 1996년 4월 7일 목요일 오전 12:00

F Full(long date, long time) 1996년 4월 7일 목요일 오전 12:00:00

g 일반(short date, short time) 2001-12-21 오전 12:00

G 일반(short date, long time) 2001-12-21 오전 12:00:00

M/m 월일 7월 4일

R/r RFC1123 형식 Thu, 04 Jul 1996 00:00:00 GMT

s ISO8601 지역시간 1996-04-07T00:00:00

t short time 오전 12:00

T Ling time 오전 12:00:00

u ISO8601 세계시간 1996-07-04 00:00:00Z

U Universal date/time 1996년 7월 3일 수요일 오후 3:00:00

Y/y 년월 1996년 7월

----------------------------------------------------------------

웹 폼을 추가하자. DataList, SqlDataAdapter 컨트롤을 추가한다. Northwind DB의 Orders 테이블의 내용을 연결하고

DataSet은 'DsOrders1' 이름으로 추가한다. DataList 컨트롤의 데이터바인딩을 처리하기 위해서 속성을 설정해 준다.

DataSource는 'DsOrders1', DataMember는 'Orders', DataKeyFiled는 'OrderID'로 각각 지정한다.

DataList 컨트롤의 템플릿을 구성하기 위해 컨텍스트 메뉴에서 '템플릿 편집-항목 템플릿'을 선택한다.

템플릿 편집모드의 ItemTemplate에 Label 컨트롤을 4개 추가한다. Label의 데이터바인딩을 하기 위해 속성을 설정하자.

(DataBindings) 확장버튼을 클릭하여 Text 프로퍼티를 설정하는데 단순바인딩을 선택하고 'DataItem-OrderID'와 같이

바인딩할 필드를 설정해 준다.

각 컨트롤별 서식은 다음과 같이 지정하자

컨트롤 유형 서식

lblOrderID Number {0:N}

lblOrderDate Long Date {0:D}

lblShippedDate Short Date {0:d}

lblFreight Fixed Point {0:F2}

format.aspx

<P><FONT face="굴림">DataBinder.Eval - format expression</FONT></P>

<P>

<asp:DataList id=DataList1 runat="server" DataSource="<%# dsOrders1 %>" DataMember="Orders" DataKeyField="OrderID">

<FONT face="굴림">주문번호 :

<asp:Label id=lblOrderID runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.OrderID", "{0:N}") %>'></asp:Label><BR>

주문일 :

<asp:Label id=lblOrderDate runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.OrderDate", "{0:D}") %>'></asp:Label>  선적일 :

<asp:Label id=lblShippedDate runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.ShippedDate", "{0:d}") %>'></asp:Label><BR>

운임 :

<asp:Label id=lblFreight runat="server" Text='<%# DataBinder.Eval(Container, "DataItem.Freight", "{0:F2}") %>'></asp:Label>

</FONT>

</ItemTemplate>

</asp:DataList>

</P>

</form>

private void Page_Load(object sender, System.EventArgs e)

{

if(!Page.IsPostBack)

{

sqlDataAdapter1.Fill(dsOrders1);

DataList1.DataBind();

}

참고문헌:ASP.NET Prgoramming Bible

msdn : http://www.gosu.net/GosuWeb/ArticleMSView.aspx?ArticleCode=400