서버 컨트롤 (Server Controls)
: 서버 컨트롤은 ASP.NET 내부에서 제공하는 여러 프로세스들에 대한 인터페이스(Interface, 개발자와 배부 프로세스 사이의 접점, 개발자는 이 접접을 통해 내부 프로세스를 제어함)를
갭슐화아여 서버측에세 제어할 수 있도록 하나의 기능 단위로 만들어둔 서버측 구성 요소 이다.
1) 서버 컨트롤의 종류
: ASP.NET 2.0 서버 컨트롤은 도구 상자 안에서 다음과 같이 여러 탭으로 나뉘어져 관리되고 있다.
- 표준
- 데이터
- 유효성 검사
- 탐색
- 로그인
- 웹 파트
- HTML
2) 표준 컨트롤(Standard Controls)
: 표준 컨트롤은 웹 사이트에서 흔히 사용되는 컨트롤들, 예를 들어 TextBox, Button, DropDownList 등과 같은
기본적인 기능을 하는 컨트롤들을 의미한다.
- AdRotator
: AdRotator는 우리가 웹 사이트에서 흔히 볼 수 있는 배너 광고들을 쉽게 구현할 수 있도록 해주는 컨트롤이다.
[AdvertisementFile : 광고 정보를 포함하고 있는 XML 파일의 경로를 가져오거나 설정한다.]
[KeywordFilter : XML 광고 파일에서 특정 범주(카테고리)별로 광고를 필터링할 때 사용하는 키워드를 가져오거나 설정.]
[Target : AdRotator를 클릭할 때 링크되는 HTML 프레임 형식을 지정한다. 예를 들어 이 속성에 _blank를 지정하면 광고 클릭 시 새로운 창이 뜨게 된다.]
FrmAdRotator.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmAdRotator.aspx.cs" Inherits="FrmAdRotator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>광고컨트롤</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:AdRotator ID="AdRotator1" runat="server" Width="500px" Height="180px" AdvertisementFile="~/FrmAdRotator.xml" />
</div>
</form>
</body>
</html>
FrmAdRotator.xml
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>~/images/banner1.gif</ImageUrl>
<NavigateUrl>http://www.VisualAcademy.com/</NavigateUrl>
<AlternateText>비주얼아카데미</AlternateText>
<Keyword>비주얼아카데미</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/banner2.gif</ImageUrl>
<NavigateUrl>http://www.dotnetkorea.com/</NavigateUrl>
<AlternateText>닷넷코리아</AlternateText>
<Keyword>닷넷코리아</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/banner3.gif</ImageUrl>
<NavigateUrl>http://www.dotnetkorea.com/</NavigateUrl>
<AlternateText>닷넷코리아</AlternateText>
<Keyword>닷넷코리아</Keyword>
<Impressions>25</Impressions>
</Ad>
<Ad>
<ImageUrl>~/images/banner4.gif</ImageUrl>
<NavigateUrl>http://www.dotnetkorea.com/</NavigateUrl>
<AlternateText>닷넷코리아</AlternateText>
<Keyword>닷넷코리아</Keyword>
<Impressions>25</Impressions>
</Ad>
</Advertisements>
- BulletedList
: BulletedList 컨트롤은 기본적으로 Bullet 형식의 리스트를 표현할 때 사용하는 컨트롤이다. Bullet은 사전적으로 '총탄', '탄환', '작은 공',
'(주의를 끌기 위해 찍는)굵은 점' 등의 뜻을 가진다. BulletedList 컨트롤에서 사용된 Bullet은 (주의를 끌기 위해 찍는)굵은 점의 의미로
사용되었으며 (주의를 끌기 위해 찍는)굵은 점이란 다음과 같은 형식의 글머리 기호를 말한다.
<BulletList 이미지>
웹 페이지에서 이러한 형식의 리스트를 여러 개 작성해야 할 때 BulletedList 컨트롤을 사용하면 유용할 것이다. 또한 BulletedList 컨트롤은 각 항목의
글머리 기호로 숫자 또는 영문 형식을 사용할 수도 있다. 뿐만 아니라 각 항목에 링크를 걸거나 사용자가 특정 항목을 클릭했을 때 응답할 수도 있다.
다음은 BulletedList 컨트롤의 주용 속성과 이벤트이다.
[BulletStyle : 글머리 기호 스타일을 가져오거나 설정.]
[DisplayMode : 목록의 디스플레이 모드를 가져오거나 설정. 만약 이 속성을 LinkButton으로 지정하면 각 항목 클릭 시 다시 게시(Postback)할 수 있으며 HyperLink로 지정하면 단순 링크를 걸 수 있다.]
[BulletImageUrl : 글머리 기호에 표시할 이미지의 경로를 가져오거나 설정. 단, 글머리 기호에 이미지를 사용하기 위해서는 BulletStyle 속성을 CustomImage로 지정해야 한다.]
[FirstBulletNumber : BulletStyle이 숫자(Numbered), 영문자(LowerAlpha, UpperAlpha) 및 로마문자(LowerRoman, UpperRoman)로 지정되어 있을 때 항목의 시작 값을 가져오거나 설정한다.]
- Button
: Button 컨트롤은 다시 게시(Postback)을 일으키는 서버 컨트롤 중 하나로서 사용자가 웹 서버에게 서비스 요청 의사를 표현하는 관문이 된다. 여기에서는 ASP.NET 2.0에서 새롭게 추가된 Button 컨트롤의
OnClientClick 속성에 대해 알아본다.
[Text : Button 컨트롤의 이름을 가져오거나 설정.]
[PostBackUrl : Button 컨트롤 클릭 시 페이지 간 게시에 사용될 URL.]
[OnClientClick : Button 컨트롤 클릭 시 실행될 클라이언트 스크립트(Client Script)를 가져오거나 설정한다.]
* 클라이언트 스크립트(Client Script) : 클라이언트 스크립트에서 스크립트(Script)는 '구문' 또는 '코드'를 의미한다.
그러므로 클라이언트 스크립트는 클라이언트측(사용자 PC의 브라우저)에서 실행되는 구문을 말한다. 반대로 서버 스크립트는
웹 서버에서 실행되는 구문을 말하며 ASP.NET에서는 C#, VB.NET, J# 등으로 서버 스크립트를 작성한다.
대표적인 클라이언틑 스크립트에는 Java Script, VB Script 등이 있다. 이 클라이언트 스크립트는 굳이 서버측 프로세스를 사용할
필요가 없는 프로세스들, 예를 들어 회원 가입 시 꼭 필요한 정보를 입력하지 않았을 때 메시지를 띄워주거나 주민번호 및 전자메일
형식을 체크하는 등의 작업에 쓰일 수 있다.
- Calendar
: Calendar 컨트롤은 웹 사이트에서 달력을 쉽게 구현할 수 있도록 해준다. 또한 Calendar 컨트롤은 단순히 웹 사이트에서 달력을 보여주는
기능뿐만 아니라 사용자가 특정 일(Day), 주(Week), 달(Month)을 선택하는 기능도 제공하고 특정 날짜에 메시지를 뿌려줄 수도 있으므로
Calendar 컨트롤을 사용하면 달력을 이용한 일정표(Schedule)를 손쉽게 만들 수 있다. Calendar 컨트롤에는 여러 이벤트가 있는데 우리가 반드시
알고 있어야 하는 주요 이벤트는 다음과 같다.
(1) SelectionChanged : 특정 일, 주, 달을 선택했을 때 발생
(2) DayRender : 달력의 날짜 셀(cell)들이 하나씩 만들어질 때 발생
[ShowDayHeader : 요일의 머리글 표시 여부를 나타내는 값을 가져오거나 설정합니다.]
[ShowNextPrevMonth : Calendar 컨트롤의 제목 구역에 다음 달 및 이전 달 탐색 링크의 표시 여부를 나타내는 값을 가져오거나 설정.]
[TodaysDate : 오늘 날짜의 값을 가져오거나 설정.]
[SelectDate : 선택한 날짜를 가져오거나 설정.]
[SelectDates : 선택한 날짜들(System.DateTime 개체의 컬렉션)을 가져옴.]
[VisibleDate : Calendar 컨트롤에 표시할 달을 지정하는 개체를 가져오거나 설정.]
[DayNameFormat : 요일의 이름 형식을 가져오거나 설정. 예를 들어 이 속성이 Short이면 '일', '월', '화' 이런식으로 요일이 출력되지만 이 속성이 Full이면 '일요일' 과 같은 형식으로 출력된다. 참고로 이 속성은 ShowDayHeader 속성이 true로 설정된 경우에만 적용된다.]
[NextPrevFormat : 다음 달 및 이전 달 탐색 링크의 출력 형식을 가져오가나 설정. 참고로 이 속성은 ShowNextPreMonth 속성이 true로 설정된 경우에만 적용된다.]
[NextMonthText : 다음 달 탐색 링크에 표시할 텍스트를 가져오가나 설정.]
[PreMonthText : 이전 달 탐색 링크에 표시할 텍스트를 가져오거나 설정.]
[SelectionMode : 달력에서 일, 주, 달을 선택할 수 있게 하거나 하지 못하게 한다. 참고로 어떤 날짜도 선택하지 못하게 하려면 이 속성에 None을 지정하면 된다.]
[SelectMonthText : 달 선택 링크의 문구를 가져오거나 설정한다. SelectionMode 속성이 DayWeekMonth일 때 적용된다.]
[SelectWeekText : 주 선택 링크의 문구를 가져오거나 설정한다. SelectionMode 속성이 DayWeek, DayWeekMonth일 때 적용된다.]
[SelectionChanged : 특정 일, 주, 달을 선택했을 때 발생한다.]
[DayRender : 서버에서 웹 페이지에 그려질 달력의 날짜 셀들이 만들어질 때 발생한다.]
FrmCalendar.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmCalendar.aspx.cs" Inherits="FrmCalendar" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Calendar ID="Calendar1" runat="server"
onselectionchanged="Calendar1_SelectionChanged"></asp:Calendar>
<br />
<asp:Label ID="lblDate" runat="server" Text=""></asp:Label>
<hr />
<asp:Calendar ID="Calendar2" runat="server" SelectionMode="DayWeekMonth"
onselectionchanged="Calendar2_SelectionChanged"></asp:Calendar>
<br />
<asp:Label ID="lblDates" runat="server" Text=""></asp:Label>
<br />
<asp:Calendar ID="Calendar3" runat="server" BackColor="White"
BorderColor="White" BorderWidth="1px" Font-Names="Verdana" Font-Size="9pt"
ForeColor="Black" Height="190px" NextPrevFormat="FullMonth" Width="258px">
<SelectedDayStyle BackColor="#333399" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Bold="True" Font-Size="8pt" ForeColor="#333333"
VerticalAlign="Bottom" />
<DayHeaderStyle Font-Bold="True" Font-Size="8pt" />
<TitleStyle BackColor="White" BorderColor="Black" BorderWidth="4px"
Font-Bold="True" Font-Size="12pt" ForeColor="#333399" />
</asp:Calendar>
</div>
</form>
</body>
</html>
FrmCalendar.aspx.cs
using System;
public partial class FrmCalendar : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
{
// 현재 선택된 날짜/시간값을 출력
this.lblDate.Text = Calendar1.SelectedDate.ToLongDateString();
}
protected void Calendar2_SelectionChanged(object sender, EventArgs e)
{
// 현재 선택된 범위의 날짜값을 출력
string s = "";
foreach (DateTime item in Calendar2.SelectedDates)
{
s += item.ToShortDateString() + "<br />";
}
lblDates.Text = s;
}
}
- TextBox
: TextBox 컨트롤은 주로 문자 정보를 입력받을 때 사용하며 사용 빈도가 매우 높다.
[Text : TextBox 컨트롤의 텍스트 내용을 가져오거나 설정한다.]
[AutoPostBack : TextBox 컨트롤에서 사용자가 Enter 또는 Tab 키를 누를 때마다 서버에 자동으로 다시 게시 되는지 여부를 나타내는 값을 가져오거나 설정한다.]
[TextMode : TextBox 컨트롤의 동작 모드(한 줄, 여러 줄, 암호 모드)를 가져오거나 설정한다.]
[Columns : TextBox 컨트롤의 표시 너비(문자 단위)를 가져오거나 설정한다.]
[MaxLength : TextBox 컨트롤에 입력할 수 있는 최대 문자수를 가져오거나 설정한다.]
[Rows : TextBox 컨트롤의 행 수를 가져오거나 설정한다. 이 속성은 TextMode 속성이 MultiLine일 때만 유효하다.]
[TextChanged : TextBox 컨트롤의 텍스트 내용이 변경되었을 때 발생한다.]
FrmTextBox.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmTextBox.aspx.cs" Inherits="FrmTextBox" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>제목 없음</title>
</head>
<body>
<form id="form1" runat="server">
<div>
SingleLine:<br />
이름 :
<asp:TextBox ID="txtSingleLine" runat="server"></asp:TextBox>
<br />
<br />
MultiLine<br />
소개 :<asp:TextBox ID="txtMultiLine" runat="server" TextMode="MultiLine"
Rows="5" Columns="40"></asp:TextBox>
<br />
<br />
Password<br />
암호 :<asp:TextBox ID="txtPassword" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
<asp:Button ID="btnOK" runat="server" Text="확인" onclick="btnOK_Click" /><br />
<asp:Label ID="lblDisplay" runat="server" Text=""></asp:Label>
</div>
</form>
</body>
</html>
FrmTextBox.aspx.cs
using System;
public partial class FrmTextBox : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnOK_Click(object sender, EventArgs e)
{
// 이름
string name = txtSingleLine.Text;
// 소개
string intro = txtMultiLine.Text;
// 암호
string password = txtPassword.Text;
// 레이블에 출력
this.lblDisplay.Text = String.Format("{0}{1}{2}{1}{3}{1}", name, "<br />"
, intro.Replace("\r\n", "<br />"), password);
}
}
- Label
: Label 컨트롤은 특정 값을 해당 위치에 출력하는 아주 단순한 기능을 하는 컨트롤이다. 또한 ASP.NET 2.0에 새로 추가된 Label 컨트롤의 AssociatedControlID라는
속성을 사용하면 다른 서버 컨트롤의 기능을 확장할 수 있으며 특히, AccessKey 속성과 연동하면 웹 페이지에서 단축키를 일관성 있게 구현할 수 있다.
[Text : Label 컨트롤의 텍스트 내용을 가져오거나 설정한다.]
[AccessKey : 서버 컨트롤을 빠르게 탐색할 수 있는 단축키 문자(Alt키와 조합)를 가져오거나 설정한다.]
[AccociatedControlID : Label 컨트롤과 연결되는 서버 컨트롤에 대한 ID를 가져오거나 설정한다. Label 컨트롤이 다른 서버 컨트롤과 연결되면 특성을 사용하여 연결된 컨트롤의 기능을 확장할 수 있다(탭 인덱스 또는 바로가기 키 설정 등등).]
- Literal
: Literal 컨트롤은 Label 컨트롤과 마찬가지로 단순히 문자를 출력하는 컨트롤입니다. 하지만 이 둘은 서로 다른 점을 가지고 있는데 그것은 렌더링(Rendering) 형식이 다르다는 것이다.
[Text : Literal에 표시된 텍스트 내용을 가져오거나 설정한다.]
[Mode : Literal의 텍스트 내용이 렌더링되는 방법을 지정하는 열거형 값을 가져오거나 설정한다.]
[PassThrough : 컨트롤 내용이 수정되지 않는다. 예를 들어, Literal 컨트롤의 Text 속성에 <hr> 태그가 있으면 이 태그는 지원 여부에 관계없이 모든 장치와 브라우저에 전달된다.]
[Encode : 컨트롤의 내용이 HTML로 인코딩된 문자열로 변환된다. 예를 들어, Literal 컨트롤의 Text 속성에 <hr> 태그가 있으면 이 태그는 HTML이나 XHTML이 아닌 WML 또는 cHTML과 같은 태그 언어를 사용하는 장치에 전달될 때 제거된다.]
[Transform : 기본]
FrmLiteral.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmLiteral.aspx.cs" Inherits="FrmLiteral" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>리터럴 : 문자열/태그 출력</title>
</head>
<body>
<form id="form1" runat="server">
<div>
HTML :
<span>순수 태그로 출력</span>
<br />
레이블 :
<asp:Label ID="Label1" runat="server" Text="레이블로 출력"></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" Text="<hr />"></asp:Label>
<br />
리터럴 : 자리 역할, 원하는 위치에 무엇인가 출력해 주고 싶을 때
<asp:Literal ID="Literal1" runat="server" Text="리터럴 컨트롤"></asp:Literal>
<br />
<asp:Literal ID="Literal3" runat="server" Text="<hr />"></asp:Literal>
<br />
<asp:Literal ID="Literal2" runat="server" Text="<hr />" Mode="Encode"></asp:Literal>
<!--Mode="Encode"로 하면 <hr />을 실행하지 않고 그대로 보여줌
레이블 컨트롤은 실행 했을 때 모든 태그를 span태그로 묶음
리터럴은 아무런 태그도 만들어지지 않고 원하는 자리에 출력 가능.
태그로 묶이지 않기 때문에 간결
일반적으로 레이블 컨트롤 보다 리터럴 컨트롤을 권장함
게시판의 답변달 때 리터럴 컨트롤 사용-->
</div>
</form>
</body>
</html>
- Panel
: Panel은 다른 서버 컨트롤이나 HTML 및 정적 텍스트 등을 하나의 단위(unit)로 그룹핑하는 컨테이너 역할을 하는 컨트롤이다. 'Panel'이 사전적으로 '(직사각형의)합판', '(특정 공간의)구획' 등의 의미를 가지므로 Panel 위에 올려진 모든 것들은 같은 구획에서 하나로
묶인다고 생각하면 된다. 또한 Panel은 동적으로 생성된 서버 컨트롤들을 포함하거나 BackColor와 같은 스타일 관련 속성을 통해 웹 페이지 내에서 사용자의 시선을 집중시키는 데 사용될 수 있다.
[Visible : Panel 컨트롤의 보임 여부를 나타내는 값을 가져오거나 설정한다. 만약 이 속성이 false라면 Panel 내부에 포함된 모든 요소들은 렌더링되지 않는다.]
[BackImageUrl : Panel 컨트롤의 배경 이미지 URL을 가져오거나 설정한다.]
[HorizontalAlign : 텍스트의 가로 정렬을 가져오거나 설정한다.]
[Wrap : Panel 안에 있는 텍스트의 자동 줄 바꿈 여부를 나타내는 값을 가져오거나 설정한다.]
[ScrollBars : Panel의 스크롤 사용 형식을 가져오거나 설정한다.]
[Direction : 텍스트의 표시 방향을 가져오거나 설정한다.]
- LinkButton
: LinkButton은 Button 컨트롤과 마찬가지로 다시 게시(Postback)를 일으키는 서버 컨트롤이며 LinkButton이 브라우저에 렌더링될 때에는 링크 형식으로 렌더링된다.
하지만 LinkButton은 링크가 아니라 다시 게시(Postback)를 일으키는 버튼임을 알고 있어야 한다.
[Text : LinkButton 컨트롤의 이름을 가져오거나 설정한다.]
[PostBackUrl : LinkButton 컨트롤 클릭 시 페이지 간 게시에 사용될 URL을 가져오거나 설정한다.]
[OnClientClick : LinkButton 컨트롤 클릭 시 실행될 클라이언트 스크립트를 가져오거나 설전한다.]
FrmLinkButton.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmLinkButton.aspx.cs" Inherits="FrmLinkButton" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>링크 버튼 : 하이퍼링크</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<a href="http://www.dotnetkorea.com/" target="_blank">닷넷코리아</a>
<hr />
<asp:LinkButton ID="lnkVisualAcademy" runat="server"
onclick="lnkVisualAcademy_Click">비주얼아카데미</asp:LinkButton>
<hr />
<asp:HyperLink ID="lnkJavaCampus" runat="server" NavigateUrl="http://www.JavaCampus.com">자바캠퍼스</asp:HyperLink>
<hr />
<asp:ImageButton ID="imgDotNetNote" runat="server" ImageUrl="http://www.dotnetkorea.com/images/btn_home.gif"
Width="32px" Height="32px" AlternateText="홈페이지로 이동"
onclick="imgDotNetNote_Click" />
<br />
<!--서버 컨트롤 :기본 값으로 설정해 둔 값을 실행 시에 동적으로 바꿔 줄 수 있음-->
</div>
</form>
</body>
</html>
FrmLinkButton.aspx.cs
using System;
using System.Web.UI;
public partial class FrmLinkButton : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// HTML과 달리 서버컨트롤(runat=server)들은 런타임 시에 동적으로 변경 가능
if (DateTime.Now.Second % 2 == 0)
{
this.lnkJavaCampus.Text = "짜빠 캠퍼스";
}
else
{
this.lnkJavaCampus.Text = "자바 캠퍼스";
}
}
protected void lnkVisualAcademy_Click(object sender, EventArgs e)
{
// 링크 버튼은 이벤트 처리기 사용
Response.Redirect("http://www.VisualAcademy.com");
}
protected void imgDotNetNote_Click(object sender, ImageClickEventArgs e)
{
// EventArgs앞에 무언가 붙으면 e. 찍으면 무언가 얻을 수 있음
// 이미지를 기준으로 좌표값을 나눠줌
if (e.X < 16)
{
Response.Redirect("http://www.dotnetkorea.com/");
}
else
{
Response.Redirect("http://www.visualacademy.com/");
}
}
}
- ImageButton
: ImageButton 컨트롤은 Button, LinkButton 컨트롤과 마찬가지로 다시 게시(Postback)를 일으키는 서버 컨트롤이며 버튼 위에 이미지를 입힐 수 있기 대문에 디자인을 중시하는
실무에 많이 사용되는 컨트롤이다.
[AlternateText : 이미지를 사용할 수 없을 때 ImageButton 컨트롤에 표시할 대체(Alternate) 텍스트를 가져오거나 설정한다.]
[ImageUrl : ImageButton 컨트롤에 표시할 이미지의 경로를 가져오거나 설정한다.]
[PostBackUrl : ImageButton 컨트롤 클릭 시 페이지 간 게시에 사용될 URL을 가져오거나 설정한다.]
[OnClientClick : ImageButton 컨트롤 클릭 시 실행될 클라이언트 스크립트를 가져오거나 설정한다.]
- CheckBox
: CheckBox 컨트롤은 말 그대로 체크(Check)할 수 있는 박스를 서버 컨트롤로 만든 것이며 사용자가 여러 항목을 선택해야 할 때 주로 이 CheckBox 컨트롤을 사용한다.
[Text : CheckBox 컨트롤의 이름을 가져오거나 설정.]
[TextAlign : CheckBox 컨트롤의 이름 정렬 방법을 가져오거나 설정.]
[Checked : Checkbox 컨트롤이 선택되어 있는지의 여부를 나타내는 값을 가져오거나 설정.]
[Enabled : CheckBox 컨트롤의 활성화 여부를 나타내는 값을 가져오거나 설정. 만약 이 속성이 False이면 CheckBox 컨트롤은 회색처리(비활성화 처리)되어 사용할 수 없게 된다.]
[AutoPostBack : CheckBox 컨트롤의 체크 상태가 변경될 때 자동으로 다시 게시(Postback)되는지의 여부를 나타내는 값을 가져오거나 설정.]
[CheckedChanged : CheckBox 컨트롤의 체크 상태가 변경될 때 발생하는 이벤트.]
- DropDownList
: DropDownList 컨트롤은 리스트 컨트롤이며 여러 항복 중 하나의 항목을 선택할 수 있도록 하는 컨트롤이다.
[AutoPostBack : DropDownList 컨트롤 안에 있는 항목(ListItem)의 선택이 변경될 때 자동으로 다시 게시되는지의 여부를 나타내는 값을 가져오거나 설정한다.]
[Items : DropDownList 컨트롤 안에 있는 항목(ListItem)의 묶음, 즉 항목의 컬렉션(Collection)을 가져온다.]
[SelectedIndex : 선택된 항목의 인덱스를 가져오거나 설정한다. 인덱스는 Zero-Base(0부터 시작)이다.]
[SelectedItem : 선택된 항목(ListItem)을 가져온다.]
[SelectedIndexChanged : DropDownList 컨트롤 안에 있는 항목의 선택 사항이 변경될 때 발생한다.]
앞에서도 언급했지만 리스트 컨트롤은 데이터베이스와 연동할 때 주로 사용한다. 아직은 데이터베이스 연동 부분을 공부하지 않았으므로 ArrayList라는 클래스를
통해 ArrayList 형식의 개체를 만들고 이 개체를 DropDownList에 바인딩하는 예제를 작성해 보자. ArrayList도 데이터베이스와 마찬가지로 데이터 집합을 가지므로
하나의 데이터 소스(Data Source)로 볼 수 있다.
- HyperLink
: HyperLink 컨트롤은 링크를 거는 Anchor 태그(<a>)를 서버측에서 사용할 수 있도록 만든 컨트롤이다.
[NavigateUrl : HyperLink 컨트롤을 클릭할 때 이동할 페이지의 URL을 가져오거나 설정한다.]
[Target : HyperLink 컨트롤을 클릭할 때 링크되는 HTML 프레임 형식을 지정한다. 기본값은 빈 문자열("")이다.]
[ImageUrl : HyperLink 컨트롤에 텍스트를 사용하지 않고 이미지를 사용할 경우 이미지 경로를 가져오거나 설정한다.]
- Table
: Table 컨트롤은 HTML에서 사용되는 테이블 태그(<table>)를 서버측에서 프로그래밍 방식으로 제어하기 위해 만든 컨트롤이다. HTML에서 <table> 태그는 하위에 <tr>
태그를 가지고 있고, 또 이 <tr> 태그를 가지고 있는 계층적 구조이듯이 Table 컨트롤도 계층적 구조를 가진다. 다음 그림은 Table 컨트롤의 구조를 나타낸 것이다.
Table 컨트롤은 여러 개의 TableRow 컬렉션을 가지고 있으며 TableRow는 여러 개의 TableCell 컬렉션을 가진다. 그리고 이러한 형태를 갖춘 Table 컨트롤이 사용자의 웹
브라우저로 렌더링되면 실제 완전한 <table> 태그 형태로 나타낸다.
[Caption : Table 컨트롤의 이름(캡션)을 가져오거나 설정한다.]
[CaptionAlign : Table 컨트롤 이름(캡션)의 가로 또는 세로 위치를 가져오거나 설정한다.]
[GridLines : Table 컨트롤의 라인 형태를 가져오거나 설정한다.]
[CellPadding : 셀 내용과 셀 테두리 사이의 여백 크기를 가져오거나 설정한다.]
[CellSpacing : 셀 사이의 여백 크기를 가져오거나 설정한다.]
[HorizontalAlign : Table 컨트롤의 수평 정렬 방법을 가져오거나 설정한다.]
[Rows : Table 컨트롤을 구성하는 TableRow 개체의 컬렉션을 가져온다.]
[HorizontalAlign : TableRow의 수평 정렬 방법을 가져오거나 설정한다.]
[VerticalAlign : TableRow의 수직 정렬 방법을 가져오거나 설정한다.]
[Cells : TableRow를 구성하는 TableCell 개체의 컬렉션을 가져온다.]
[ColumnSpan : 수평 뱡향으로 병합할 칼럼의 수를 가져오거나 설정한다.]
[RowSpan : 수직 뱡향으로 병합할 칼럼의 수를 가져오거나 설정한다.]
[HorizontalAlign : TableCell의 수평 정렬 방법을 가져오거나 설정한다.]
[VerticalAlign : TableCell의 수직 정렬 방법을 가져오거나 설정한다.]
- Image
: Image 컨트롤은 ImageUrl 속성에 지정한 이미지를 보여주는 컨트롤이다.
[ImageUrl : 이민지의 경로를 가져오거나 설정한다.]
[ImageAlign : 이미지의 정렬 방법을 가져오거나 설정한다.]
[AlternateText : 이미지를 사용할 수 없을 때 Image에 표시할 대체(Alternate) 텍스트를 가져오가 설정한다. 이 속성은 도구 설명 기능을 지원하는 브라우저에서 이미지 위로 마우스를 올렸을 대 나타나는 툴팁 형식의 텍스트로도 사용된다.]
[DescriptionUrl : 이미지에 대한 자세한 설명이 있는 파일의 URL을 가져오거나 설정.]
- ImageMap
: ImageMap은 이미지를 특정 영역으로 분할하고 분할된 영역을 사용자가 선택할 수 있게 하는 컨트롤이다.
ImageMap 컨트롤 하위에는 <asp:RectangleHotSpot>, <asp:CirleHotSpot>, <asp:PolygonHotSpot> 요소가 올 수 있으며
각각 사각형, 원, 다각형 영역으로 이미지를 분할할 때 사용된다.
[ImageUrl : 이미지의 경로를 가져오거나 설정한다.]
[ImageAlign : 이미지의 정렬 방법을 가져오가나 설정한다.]
- FileUpload
: FileUpload는 클라이언트에 있는 파일을 서버로 전송할 때 사용하는 컨트롤이다. ASP.NET 1.x 에서는 파일 업로드를 위해 HTML FileUpload 컨트롤을 지원했었다.
하지만 HTML FileUpload 컨트롤을 서버측에서 제어하기 위해 runat="server" 속성을 추가해야 했으며, 정상적인 업로드를 위해 <form> 태그에 enctype="multipart/form-data" 속성을 반드시 추가시켜야 했다.
이러한 불편함 때문에 ASP.NET 2.0은 서버측에서 제어할 수 있는 FileUpload 컨트롤을 새로 지원하고 있으며 FileUpload 컨트롤을 사용하면 조금 전에 열거한 귀찮은
작업들을 더 이상 하지 않아도 된다.
[FileName : 업로드할 클라이언트의 파일 이름을 가져온다.]
[PostedFile : 첨부된 파일 개체(HttpPostedFile)를 가져온다.]
[HasFile : 업로드할 파일이 있는지의 여부를 나타내는 값을 가져온다.]
- HiddenField
: HiddenField 컨트롤도 FileUpload 컨트롤과 마찬가지로 ASP.NET 1.x에서 HTML 컨트롤로 지원했었지만 ASP.NET 2.0으로 오면서 서버 컨트롤 형태로 다시 추가된 컨트롤이다.
HiddenField 컨트롤은 브라우저에 '<input type=hidden>' HTML 태그로 렌더링되면 주로 다시 게시 후 웹 페이지의 상태값을 저장하기 위한 용도로 사용한다. 보면 알겠지만
'<input type=hidden>' 태그는 웹 브라우저에 보여지지 않는 태그이다.
[Value : HiddenField 컨트롤의 값을 가져오거나 설정한다.]
[Visible : HiddenField 컨트롤을 <input type='hidden'> 태크로 렌더링하던지, 아니면 뷰 상태에 저장할지 여부를 나타내는 값을 가져오거나 설장한다. [True(기본값), False], 만약 이 속성이 True이면 Hidden Field 컨트롤을 <input type='hidden'> 태그로 렌더링하며, 이 속성이 False 이면 HiddenField 컨트롤의 정보를 뷰 상태에 저장한다.]
[ValueChanged : HiddenField 컨트롤의 값이 변경되면 발생한다.]
- MultiView와 View
: MultiView 컨트롤과 View 컨트롤은 Panel 컨트롤, PlaceHolder 컨트롤과 마찬가지로 다른 서버 컨트롤 및 태그에 대한 컨테이너 역할을 하는 컨트롤이다. MultiView와 View는 항상 같이 붙어 다니며 MultiView가 View를 포함하는 관계를 가진다. Panel 및 PlaceHolder 컨트롤을 여러 개 사용하여 특정 영역을 나누어야 할 때 MultiView와 View를 사용하면
좀더 일관성 있게 영역을 나눌 수 있다.
[ActiveViewIndex : MultiView 컨트롤에 있는 활성 View 컨트롤의 인덱스를 가져오거나 설정한다. 기본값은 -1이면 이것은 어떤 View 컨트롤도 활성화되지 않았음을 의미한다.]
[Views : MultiView 컨트롤에 있는 View 컨트롤의 컬렉션을 가져온다.]
[Visible : MultiView 컨트롤의 보임 여부를 나타내는 값을 가져오거나 설정한다.]
[ActiveViewChanged : MultiView 컨트롤의 활성 View 컨트롤이 변경되면(사용자가 특정 View에서 다른 View로 옮겨 갈 때) 이 이벤트가 발생한다.]
[Controls : View 컨트롤 안에 포함된 하위 Control의 컬렉션(Control)을 가져온다.]
[Visible : View 컨트롤의 보임 여부를 나타내는 값을 가져오거나 설정한다.]
[Activate : 현재 View 컨트롤이 활성화될 때 발생한다.]
[Deactivate : 현재 활성 View 컨트롤이 비활성화될 때 발생한다.]
- Wizard
: Wizard 컨트롤은 일련의 순서를 가지는 작업들을 손쉽게 처리할 수 있도록 도와주는 컨트롤이다. 원래 컴퓨터 용어로 봤을 때 마법사(Wizard)는 복잡한 응용 프로그램의 사용이나 설치를 초보자도 쉽게 할 수 있도록 도와주는 프로그램을 일컫는 말이다.
ASP.NET 2.0 의 Wizard 컨트롤은 이런 기능을 물론이고 특정 순서(절차)를 가지는 작업들을 손쉽게 처리할 수 있도록 해준다. 예를 들어, 쇼핑몰 같은 경우 보통 아래와 같은 절차를 따른다.
(1) 물품 선택
(2) 주문자 정보 입력(이름, 전화 번호, 주소)
(3) 주문 확인(물품 및 수량, 주무자 정보)
(4) 결제
(5) 결제 확인
이와 같이 특정 절차를 따르는 프로세스가 있을 경우 Wizard 컨트롤을 사용하면 일관성 있게 해당 프로세스를 구현할 수 있다. 그외 설문 조사, 메뉴얼 설명, 온라인 강의화 같은 기능을 구현할 때에도 이 Wizard 컨트롤이 유용하게 사용될 수 있다.
[Wizard Step : Wizard의 실질적인 콘텐츠가 놓여지는 부분이며 여러 개의 Wizard Step이 Wizard 컨트롤에 포함될 수 있다. 그리고 보여질 때는 한번에 한 Wizard Step씩 보인다.]
[Header : Wizard 컨트롤의 제목이면 Wizard Step이 바뀌더라도 Header는 고정적으로 따라다닌다]
[Navigation Buttons : Wizard Step 하위에 위치하며 <다음>, <이전>, <마침> 등의 버튼을 통해 Wizard Step을 순차적으로 옮겨 다닐 수 있게 해준다.]
[Side Bar : Wizard Step 리스트이다. Side Bar를 이용하면 Navigation Button을 통해 순차적으로 Wizard Step을 옮겨 다닐 필요없이 바로 원하는 Wizard Step으로 이동할 수 있다.]
* Wizard의 Step 형식
[Start : 최초 시작 Wizard Step이며 <다음> 버튼 하나만 가진다.]
[Step : Start 현식과 Finish 형식 중간에 위치하는 Wizard Step이며 <이전> 버튼과 <다음> 버튼을 가진다.]
[Finish : Complete 형식 바로 전 단계의 Wizard Step이며 <이전> 버튼과 <마침> 버튼을 가진다.]
[Complete : 보통 가장 마지막에 위치하는 Wizard Step이며 Header, Navigation Buttons, Side Bar 요소가 모두 사라지고 컨텐츠 부분만 남는다.]
- Xml
: Xml 컨트롤은 XML 문서의 내용을 웹에 출력하는 역할을 하는 컨트롤이다.
[DocumentSource : XML 컨트롤에 표시할 XML 문서의 경로를 가져오거나 설정한다.]
[TransformSource : XML 문서의 내용을 출력하기 전에 XML 문서의 서식을 지정하는 XSLT(eXtensible Stylesheet Language Transformation)의 경로를 가져오거나 설정한다.]
- Substitution
: Substitution 컨트롤은 출력 캐싱된 웹 페이지에서 특정 영역만 캐싱하지 않을 때 사용하는 컨트롤이다.
3) HTML 컨트롤
: HTML 컨트롤은 HTML 태그와 1:1로 매핑되는 서버 컨트롤이다. 하지만, HTML 컨트로을 웹 폼위로 끌어다 놓고 웹 폼의 소스 뷰에서 이 컨트롤을 보면 단순 HTML 태그일을 알 수 있다.
HTML 컨트롤을 단순히 웹 폼 위로 끌어다 놓는다고 해서 서버 컨트롤로 사용할 수 있는 것은 아니며 서버 컨트롤로 사용하기 위해서는 이 컨트롤에 속성 하나를 추가해야 한다.
바로 runat 속성이며 이 속성에 "server" 라는 값을 지정해 주어야 한다. 또한 서버 컨트롤이 되기 위해서는 ID 속성도 필요한데 이것은 HTML 컨트롤을 웹 폼위로 올렸을 때 VS 2005에서
자동으로 만들어 준다.
HTML 컨트롤에 runat="server"를 추가하고 서버 컨트롤로 만들면 웹 폼 디자인 뷰에서 HTML 컨트롤 좌측 상단에 녹색 화살표가 나타난다. 이 녹색 화살표는 해당 컨트롤이 서버 컨트롤임을 표시하는
기호이다.
참고로 다음과 같이 웹 폼의 디자인 뷰에서 HTML 컨트롤을 마우스 오른쪽 버튼을 클릭하고 '서버 컨트롤로 실행' 메뉴를 클릭하면 HTML 컨트롤에 자동으로 runat="server"가 추가되므로 runat 속성을 직접 타이핑하여
입력하지 않아도 된다.
4) 유효성 검사 컨트롤(Validation Controls)
: 유효성 검사 컨트롤은 사용자가 입력한 데이터의 유효성을 판단해 주는 컨트롤이다. 예를 들어 회원 가입 시 사용자들은 주민번호, 우편번호, 전자메일 등의 정보를 입력하게 되는데 이렇게
입력한 정보가 유효한 정보인지를 판단할 때 유효성 검사 컨틀롤이 사용된다.
- RequiedFieldValidator
: RequiedFieldValidator 컨트롤은 필수 입력 사항을 체크한다. 즉, 회원 가입 시 필수적으로 입력해야 하는 이름, 아이디, 비밀번호와 같은 정보의 입력 유무를 체크하는데 이 컨트롤을 사용할 수 있다.
[ControlToValidate : 검사할 서버 컨트롤의 ID를 가져오거나 설정한다.]
[ErrorMessage : 정보가 유효하지 않을 경우 표시할 오류 메시지를 가져오거나 설정한다.]
[InitialValue : 초기값을 가져오거나 설정한다. 초기값을 설정되면 사용자가 입력한 값이 초기값과 다를 경우에만 유효한 경우로 인식된다.]
[Display : 오류 메시지가 보여지는 형식을 가져오거나 설정한다.]
[ValidationGroup : 이 유효성 검사 컨트롤이 속하는 유효성 검사 그룹의 이름을 가져오거나 설정한다.]
[SetFocusOnError : 정보가 유효하지 않을 경우 ControlToValidate 속성에서 지정된 컨트롤에 포커스를 설정할지 여부를 나타내는 값을 가져오거나 설정한다.]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRequiredFieldValidator.aspx.cs" Inherits="FrmRequiredFieldValidator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
입력 확인 유효성 검사 컨트롤<br />
<br />
<br />
아이디 :<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
[<asp:RequiredFieldValidator ID="valUserID" runat="server" ControlToValidate="txtUserID" ValidationGroup="Login" Display="Dynamic"
ErrorMessage="아이디를 입력하시오."></asp:RequiredFieldValidator>]
<br />
암호 :<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
[<asp:RequiredFieldValidator ID="valPassword" runat="server" ControlToValidate="txtPassword" ValidationGroup="Login" Display="Static"
ErrorMessage="암호를 입력하시오."></asp:RequiredFieldValidator>]
<br />
<asp:Button ID="btnLogin" runat="server" Text="로그인" ValidationGroup="Login" />
</div>
</form>
</body>
</html>
- CompareValidator
: CompareValidator 컨트롤은 사용자가 입력한 값과 다른 컨트롤의 값을 비교 연산하는데 사용하는 컨토롤이다.
[ControlToValidate : 유효성을 검사할 컨트롤의 ID를 가져오거나 설정한다.]
[ControlToCompare : 비교할 컨트롤의 ID를 거져오거나 설정한다.]
[ErrorMessage : 정보가 유효하지 않을 경우 표시할 오류 메시지를 가져오거나 설정한다.]
[Operator : 유효성 검사에 사용할 비교 연산을 가져오거나 설정한다.]
[ValueToCompare : 비교할 대상이 컨트롤이 아닌 특정 값일 때 그 값을 가져오거나 설정한다.]
[Type : ValueToCompare 속성을 사용할 때 값의 데이터 형식을 지정한다.]
[ValidationGroup : 이 유효성 검사 컨트롤이 속하는 유효성 검사 그룹의 이름을 가져오거나 설정한다.]
[SetFocusOnError : 정보가 유효하지 않을 경우 ControlToValidate 속성에서 지정된 컨트롤에 포커스를 설정할지의 여부를 나타내는 값을 가져오거나 설정한다.]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmCompareValidator.aspx.cs" Inherits="FrmCompareValidator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
비교<br />
<br />
암호 :
<asp:TextBox ID="txtPassword" runat="server"></asp:TextBox>
<asp:CompareValidator ID="CompareValidator1" runat="server"
ControlToValidate="txtPassword"
ControlToCompare="txtPasswordConfirm"
ErrorMessage="암호를 확인하세요."></asp:CompareValidator>
<br />
암호확인 :<asp:TextBox ID="txtPasswordConfirm" runat="server"></asp:TextBox>
<br />
<br />
<asp:LinkButton ID="btnLogin" runat="server">로그인</asp:LinkButton>
</div>
</form>
</body>
</html>
- RangeValidator
: RangeValidator 컨트롤은 사용자가 입력한 값이 특정 범위 안에 있는지를 체크한다.
[MaximumValue : 유효성 검사 범위의 최대값을 가져오거나 설정한다.]
[MinimumValue : 유효성 검사 범위의 최소값을 가져오거나 설정한다.]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRangeValidator.aspx.cs" Inherits="FrmRangeValidator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
범위<br />
<br />
나이 :
<asp:TextBox ID="txtAge" runat="server"></asp:TextBox>
(1~150)
<asp:RangeValidator ID="valAge" runat="server"
ControlToValidate="txtAge"
MinimumValue="1"
MaximumValue="150"
Type="Integer"
ErrorMessage="나이는 1~150까지 입력하시오."></asp:RangeValidator>
<br />
<br />
<asp:Button ID="btnLogin" runat="server" Text="확인" />
</div>
</form>
</body>
</html>
- RegularExpressionValidator
: RegularExpressionValidator 컨트롤은 사용자가 입력한 값이 정해진 정규식(패턴)을 따르는지를 검사하는 컨트롤이다. 우편번호, 전화번호, 전자메일 등과 같은 정보들은 정해진
패턴을 그대로 따르며 RegularExpressionValidator 컨트롤을 사용하면 사용자가 입력한 값이 이러한 패턴을 제대로 따르는지를 체크할 수 있다.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmRegularExpressionValidator.aspx.cs" Inherits="FrmRegularExpressionValidator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
정규식(정규표현식) 검사?<br />
이메일 :
<asp:TextBox ID="txtEmail" runat="server"></asp:TextBox>
<asp:RegularExpressionValidator ID="valEmail" runat="server"
ControlToValidate="txtEmail"
ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*"
ErrorMessage="이메일을 정확히"></asp:RegularExpressionValidator>
<br />
<br />
<asp:Button ID="btnOK" runat="server" Text="확인" />
</div>
</form>
</body>
</html>
- CustomValidator
: CustomValidator 컨트롤은 사용자에 의해 입력된 값을 개발자가 임의로 만든 유효성 검사 로직을 통해 체크하는 컨트롤이다.
FrmCustomerValidator.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmCustomValidator.aspx.cs" Inherits="FrmCustomValidator" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script> // 클라이언트 레벨이라 서버에 부하를 줄여줌
function ClientValidate(sender, args) {
if (args.Value.length < 3 || args.Value.length > 12) {
args.IsValid = false;
}
else {
args.IsValid = true;
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
아이디 :
<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox><br />
<asp:Button ID="btnOK" runat="server" Text="확인" />
<asp:CustomValidator ID="CustomerValidator1" runat="server"
ControlToValidate="txtUserID"
ClientValidationFunction="ClientValidate"
ErrorMessage="아이디는 3자 이상 12자 이하"
onservervalidate="valCustomer_ServerValidate"></asp:CustomValidator>
</div>
</form>
</body>
</html>
FrmCustomerValidator.aspx.cs
using System;
using System.Web.UI.WebControls;
public partial class FrmCustomValidator : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void valCustomer_ServerValidate(object source, ServerValidateEventArgs args)
{
// 서버 컨트롤로 할 수 있는 건 최대한 자바스크립트로 처리
// 서버의 부하를 줄여주기 위해서
string userID = args.Value; // 지정된 텍스트박스의 값을 받아서
if (userID.Length < 3 || userID.Length > 12)
{
args.IsValid = false; // 에러
}
else
{
args.IsValid = true; // 유효성 통과
}
}
}
- ValidationSummary
: ValidationSummary 컨트롤은 지금까지 소개한 5개의 유효성 검사 컨트롤에 의해 체크된 유효성 결과를 하나로 모아 출력해 주는 컨트롤이다.
[DisplayMode : 유효성을 검사 결과를 수집하여 출력할 때 출력되는 형식을 가져오거나 설정한다.]
[ShowMessageBox : 유효성 검사 결과를 메시지 박스에 표시할지의 여부를 나타내는 값을 가져오거나 설정한다.]
[ShowSummary : 유효성 검사 결과를 인라인으로 표시할지의 여부를 나타내는 값을 가져오거나 설정한다.]
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="FrmValidationSummary.aspx.cs" Inherits="FrmValidationSummary" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
아이디 :
<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
<br />
이름 :
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<br />
<asp:Button ID="btnOK" runat="server" Text="확인" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
ControlToValidate="txtUserID" Display="None"
ErrorMessage="아이디 입력"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="valName" runat="server"
ControlToValidate="txtName" Display="None"
ErrorMessage="이름 입력"></asp:RequiredFieldValidator>
<asp:ValidationSummary ID="valSummary" runat="server"
ShowMessageBox="true" ShowSummary="false"/>
</div>
</form>
</body>
</html>
5) 사용자 정의 컨트롤(Use Controls)
: 사용자 정의 컨트롤은 웹 페이지 내에서 공통적으로 사용되는 부분을 하나의 모듈로 만들어서 사용할 수 있도록 해주는 컨트롤을 말하며 사용자 정의 컨트롤로 사용되는 파일의 확장자는 .ascx이다.
사용자 정의 컨트롤은 다음과 같이 새 항목 추가 대화상자에서 '웹 사용자 정의 컨트롤' 템플릿을 선택하여 쉽게 생성할 수 있다. ASP.NET 2.0에서는 이러한 영역들의 일관성 있는 구현을 위해 마스터 페이지라는 새로운 형식의 페이지를 제공한다.
Default.aspx
Navigator.ascx : 상위 메뉴
Category.ascx : 하부 메뉴
Catalog.ascx : 상품 진열
Copylight.ascx : 회사 소개
About.aspx
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register src="Navigator.ascx" tagname="Navigator" tagprefix="uc1" %>
<%@ Register src="Category.ascx" tagname="Category" tagprefix="uc2" %>
<%@ Register src="Catalog.ascx" tagname="Catalog" tagprefix="uc3" %>
<%@ Register src="Copylight.ascx" tagname="Copylight" tagprefix="uc4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" width="100%">
<tr>
<td colspan="2">
<uc1:Navigator ID="Navigator1" runat="server" />
</td>
</tr>
<tr>
<td style="width:185px;height:300px;">
<uc2:Category ID="Category1" runat="server" />
</td>
<td>
<uc3:Catalog ID="Catalog1" runat="server" />
</td>
</tr>
<tr>
<td colspan="2">
<uc4:Copylight ID="Copylight1" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Navigator.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Navigator.ascx.cs" Inherits="Navigator" %>
<div>
<a href="Default.aspx">Home</a> | <a href="About.aspx">About</a>
</div>
Category.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Category.ascx.cs" Inherits="Category" %>
<div>
<h3>카테고리</h3>
<ul>
<li>C#</li>
<li>ASP.NET</li>
<li>Silverlight</li>
</ul>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>
Catalog.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Catalog.ascx.cs" Inherits="Catalog" %>
<div>
<h1>여기는 메인 페이지</h1>
</div>
Copylight.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Copylight.ascx.cs" Inherits="Copylight" %>
<div style="text-align:center;">
Copyright© All right reserved.
</div>
About.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" %>
<%@ Register src="Navigator.ascx" tagname="Navigator" tagprefix="uc1" %>
<%@ Register src="Category.ascx" tagname="Category" tagprefix="uc2" %>
<%@ Register src="Catalog.ascx" tagname="Catalog" tagprefix="uc3" %>
<%@ Register src="Copylight.ascx" tagname="Copylight" tagprefix="uc4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" width="100%">
<tr>
<td colspan="2">
<uc1:Navigator ID="Navigator1" runat="server" />
</td>
</tr>
<tr>
<td style="width:185px;height:300px;">
<uc2:Category ID="Category1" runat="server" />
</td>
<td>
<h3>여기는 소개 페이지 입니다.</h3>
</td>
</tr>
<tr>
<td colspan="2">
<uc4:Copylight ID="Copylight1" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
mek_part2.zip
