본문 바로가기

프로그래밍언어/ASP.NET

서버 컨트롤 사용하기

서버 컨트롤: ASP.NET 내부에서 제공하는 여러 프로세스들에 대한 인터페이스를 캡슐화하여 서버측에서 제어할 수 있도록 하나의 기능 단위로 만들어둔 서버측 구성 요소이다

표준 컨트롤: 웹 사이트에서 흔히 사용되는 컨트롤 (예: Textbox, Button, Dropdownlist)

AdRotator: 우리가 웹 사이트에서 흔히 볼 수 있는 배너 광고들을 쉽게 구현할 수 있도록 해주는 컨트롤

Ad.xml

<?xml version="1.0" encoding="utf-8" ?>

 

<Advertisements>

    <Ad>

        <ImageUrl>C:\Users\Administrator\Pictures\banner2.gif</ImageUrl>

        <NavigateUrl>http://www.naver.com</NavigateUrl>

        <AlternateText>banner2</AlternateText>

        <Keyword>naver</Keyword>

        <Impressions>50</Impressions>

    </Ad>

    <Ad>

        <ImageUrl>C:\Users\Administrator\Pictures\ImageButton1.gif</ImageUrl>

        <NavigateUrl>http://www.naver.com</NavigateUrl>

        <AlternateText>banner1</AlternateText>

        <Keyword>naver</Keyword>

        <Impressions>20</Impressions>

    </Ad>

    <Ad>

        <ImageUrl>C:\Users\Administrator\Pictures\ImageButton2.gif</ImageUrl>

        <NavigateUrl>http://www.naver.com</NavigateUrl>

        <AlternateText>배넌 왜 사진이 안떠!!</AlternateText>

        <Keyword>naver</Keyword>

        <Impressions>20</Impressions>

    </Ad>

      

    

</Advertisements>

Default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server"></script>

<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" AdvertisementFile="~/ad.xml" BorderWidth="1" />

 

</div>

</form>

</body>

</html>

 

BulletedList: 기본적으로 Bullet 형식의 리스트를 표현할 때 사용하는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat ="server">

protected void bulletedlist3_click(object sender, BulletedListEventArgs e)

{

Response.Write("선택한 목록 번호:" + e.Index.ToString() + "<br>선택한 목록 value : " + bulletedlist3.Items[e.Index].Value + "<br>선택한 목록 Text : " + bulletedlist3.Items[e.Index].Text);

}

 

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<table>

<tr align="center">

<td>

<h3>Disc</h3>

<asp:BulletedList ID="bulletedlist1" runat="server">

<asp:ListItem>item #1</asp:ListItem>

<asp:ListItem>item #2</asp:ListItem>

<asp:ListItem>item #3</asp:ListItem>

<asp:ListItem>item #4</asp:ListItem>

</asp:BulletedList>

</td>

 

<td>

<h3>Cicle</h3>

<asp:BulletedList ID="bulletedlist2" BulletStyle="Circle" DisplayMode="HyperLink" runat="server">

<asp:ListItem Value="http://www.naver.com">item #1</asp:ListItem>

<asp:ListItem Value="http://www.empas.com">item #2</asp:ListItem>

<asp:ListItem Value="http://www.daum.net">item #3</asp:ListItem>

<asp:ListItem Value="http://www.yahoo.co.kr">item #4</asp:ListItem>

</asp:BulletedList>

 

</td>

 

<td>

<h3>square</h3>

<asp:BulletedList ID="bulletedlist3" BulletStyle="square" DisplayMode="LinkButton" runat="server" OnClick="bulletedlist3_click">

<asp:ListItem Value="item #1 value">item #1</asp:ListItem>

<asp:ListItem>item #2</asp:ListItem>

<asp:ListItem>item #3</asp:ListItem>

<asp:ListItem>item #4</asp:ListItem>

</asp:BulletedList>

 

</td>

 

<td>

 

<h3>numbered</h3>

<asp:BulletedList ID = "bulletedlist4" BulletStyle="Numbered" FirstBulletNumber="3" runat="server">

<asp:ListItem>item #1</asp:ListItem>

<asp:ListItem>item #2</asp:ListItem>

<asp:ListItem>item #3</asp:ListItem>

<asp:ListItem>item #4</asp:ListItem>

</asp:BulletedList>

</td>

 

</tr>

 

 

</table>

 

</div>

</form>

</body>

</html>

(website6)

 

Button: 다시 게시를 일으키는 서버 컨트롤 중 하나로서 사용자가 웹 서버에게 서비스 요청의사를 표현하는 관문이 된다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void button1_click(object sender, EventArgs e)

{

Response.Write("다시 게시 되었습니다!!!!!!!!!!!!!!!!!!!!!!!!!");

}

 

</script>

 

<script type="text/javascript">

function confirmpostback()

{

return confirm('다시 게시 하시겠습니까?');

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>button 예제</h3>

 

<asp:Button ID ="button1" runat="server" Text="postback하기" OnClientClick="return confirmpostback()" OnClick="button1_click" />

 

 

</div>

</form>

</body>

</html>

(website7)

Calender: 웹 사이트에서 달력을 쉽게 구현할 수 있도록 해줍니다. 단순히 웹 사이트에서 달력을 보여주는 기능뿐만 아니라 사용자가 특정 일, 주, 달을 선택하는 기능도 제공하고 특정날짜에 메시지를 뿌려줄 수도 있다

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat = "server">

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

Calendar1.SelectionMode = (CalendarSelectionMode)DropDownList1.SelectedIndex;

if (Calendar1.SelectionMode == CalendarSelectionMode.None)

Calendar1.SelectedDates.Clear();

}

 

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

switch (Calendar1.SelectedDates.Count)

{

case (0):

Response.Write("어떤 일자도 선택되지 않았습니다.");

break;

case (1):

Response.Write("선택한 일자" + Calendar1.SelectedDate.ToShortDateString());

break;

case (7):

Response.Write("선택한 주의 시작 일자" + Calendar1.SelectedDate.ToShortDateString());

break;

default:

Response.Write("선택한 달의 시작 일자" + Calendar1.SelectedDate.ToShortDateString());

break;

}

}

 

</script>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>calendar selectionchanged 이벤트를 사용한 예제</h3>

 

selectionmode 선택:

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged ="DropDownList1_SelectedIndexChanged">

<asp:ListItem Value="None">None</asp:ListItem>

<asp:ListItem Value="Day" Selected="True">Day</asp:ListItem>

<asp:ListItem Value="DayWeek">DayWeek</asp:ListItem>

<asp:ListItem Value="DayWeekMonth">DayWeekMonth</asp:ListItem>

 

</asp:DropDownList>

 

<p></p>

<asp:Calendar ID="Calendar1" runat="server" OnSelectionChanged="Calendar1_SelectionChanged"></asp:Calendar>

 

</div>

</form>

</body>

</html>

(website8)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat="server">

protected void Calendar1_DayRender(object sender, DayRenderEventArgs e)

{

CalendarDay d = e.Day;

TableCell c =e.Cell;

 

if (d.IsOtherMonth)

{

c.Controls.Clear();

}

else

{

string message = GetSchedule(d.Date.Month, d.Date.Day);

c.Controls.Add(new LiteralControl("<br>"+ message));

}

}

 

string GetSchedule(int month, int day)

{

string schedule = "";

 

if (month == 10 && day == 3)

{

schedule = "<a href='http://www.naver.com'>개쳔전</a>";

}

else if (month == 10 && day == 10)

{

schedule = "재항 군인의 날";

}

else if (month == 11 && day == 17)

{

schedule = "순국 선열의 날";

}

else if (month == 12 && day == 25)

{

schedule = "크리스마스";

}

 

return schedule;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>calendar dayrender이벤트를 사용한 예제</h3>

 

<asp:Calendar ID="Calendar1" runat="server" OnDayRender="Calendar1_DayRender" ShowGridLines="true" Width="500px" TitleStyle-BackColor="Gainsboro" TitleStyle-Font-Size="X-Small" TitleStyle-Font-Bold="true" DayStyle-VerticalAlign="Top" DayStyle-Height="50px" DayHeaderStyle-Width="14%" SelectedDayStyle-BackColor="Navy" VisibleDate="7/1/2010"></asp:Calendar>

 

</div>

</form>

</body>

</html>

(website9)

TextBox: 주로 문자 정보를 입력 받을 때 사용하며 사용 빈도가 매우 높다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat ="server">

protected void Button1_Click(object sender, EventArgs e)

{

Response.Write(TextBox1.Text + "<br>");

Response.Write(TextBox2.Text + "<br>");

Response.Write(TextBox3.Text + "<br>");

Response.Write(TextBox4.Text + "<br>");

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>textbox 예제</h3>

 

<table>

<tr>

<td>이름: </td>

<td><asp:TextBox ID="TextBox1" runat="server"></asp:TextBox></td>

</tr>

<tr>

<td>아이디: </td>

<td><asp:TextBox ID="TextBox2" runat= "server" MaxLength="12"></asp:TextBox></td>

 

</tr>

 

<tr>

<td>비밀번호: </td>

<td><asp:TextBox ID="TextBox3" runat="server" TextMode="Password" MaxLength="12"></asp:TextBox> </td>

</tr>

 

<tr>

<td>기타: </td>

<td><asp:TextBox ID="TextBox4" runat="server" TextMode="MultiLine" Rows="12" Columns="40"></asp:TextBox></td>

</tr>

 

</table>

<p></p>

<asp:Button ID="Button1" runat="server" Text="확인" OnClick="Button1_Click" />

 

</div>

</form>

</body>

</html>

(website10)
Label: 특정 값을 해당 위치에 출력하는 아주 단순한 기능을 하는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat ="server">

protected void Button1_Click(object sender, EventArgs e)

{

Label3.Text = TextBox1.Text;

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>label 예제</h3>

 

<asp:Label ID="Label1" runat ="server" Text="이름(n)" AccessKey="n" AssociatedControlID="TextBox1"></asp:Label>

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />

<asp:Label ID="Label2" runat="server" AccessKey="o" AssociatedControlID="Button1"></asp:Label>

<asp:Button ID="Button1" runat ="server" Text="Button(o)" OnClick="Button1_Click" />

 

<p></p>

<asp:Label ID="Label3" runat="server" ></asp:Label>

 

</div>

</form>

</body>

</html>

(website11)

Literal: 단순히 문자를 출력하는 컨트롤

(Label 컨트롤은 <span 태그를 통해 글자 크기, 굵기, 색상 등의 여러 스타일을 지정할 수 있지만

Latieral 컨트롤은 스타일을 지정할 수 없다.)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat = "server"></script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>literal 예제</h3>

 

<asp:Literal ID= "Literal1" runat="server" Text="<strong>test</strong>"></asp:Literal><br />

<asp:Literal ID= "Literal2" runat="server" Text="<strong>test</strong>" Mode="Encode"></asp:Literal>

 

</div>

</form>

</body>

</html>

Panel: 다른 서버 컨트롤이나 HTML 및 정적 텍스트 등을 하나의 단위로 그룹핑하는 컨테이너 역할을 하는 컨트롤이다.

동적으로 생성된 서버 컨트롤들을 포함하거나 backcolor와 같은 스타일 관련 속성을 통해 웹 페이지 내에서 사용자의 시선을 집중시키는 데 사용될 수 있다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

Panel1.Visible = true;

}

protected void Button2_Click(object sender, EventArgs e)

{

Panel1.Visible = false;

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>panel 예제</h3>

 

<asp:Button ID="Button1" runat="server" Text="Panel1 보임" OnClick="Button1_Click" />

<asp:Button ID="Button2" runat="server" Text="Panel1 안보임" OnClick="Button2_Click" />

<p></p>

 

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button3" runat="server" Text="Button" />

</asp:Panel>

 

</div>

</form>

</body>

</html>

PlaceHolder: panel과 마찬가지로 다른 서버 컨트롤이나 HTML 및 정적 텍스트 등을 하나의 단위로 그룹핑하는 컨테이너 역할을 하는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

TextBox TextBox1 = new TextBox();

TextBox1.Text = "텍스트 박스1";

PlaceHolder1.Controls.Add(TextBox1);

 

TextBox TextBox2 = new TextBox();

TextBox2.Text = "텍스트 박스2";

TextBox2.TextMode = TextBoxMode.MultiLine;

TextBox2.Rows = 3;

PlaceHolder1.Controls.Add(TextBox2);

 

Button Button1 = new Button();

Button1.Text = "버튼1";

PlaceHolder1.Controls.Add(Button1);

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>placeholder 예제</h3>

 

<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

 

</div>

</form>

</body>

</html>

LinkButton: 다시 게시를 일으키는 서버컨트롤이다. 링크가 아니라 다시 게시를 일으키는 버튼이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Linkbutton1_Click(object sender, EventArgs e)

{

Label1.Text = LinkBtn1.ID + "이 클릭되었습니다";

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>예제</h3>

<asp:LinkButton ID ="LinkBtn1" runat ="server" Text="다시게시!!!" OnClick ="Linkbutton1_Click"></asp:LinkButton>

<p></p>

<asp:Label ID ="Label1" runat ="server"></asp:Label>

 

</div>

</form>

</body>

</html>

Imagebutton: 다시 게시를 일으키는 서버 컨트롤이며 버튼 위에 이미지를 입힐 수 있기 때문에 디자인을 중시하는 실무에서 많이 사용되는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat ="server">

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)

{

Label1.Text = " x: " + e.X.ToString();

Label2.Text = " y: " + e.Y.ToString();

}

protected void ImageButton2_Click(object sender, ImageClickEventArgs e)

{

Label3.Text = "'확인' 버튼이 클릭되었습니다.";

}

</script>

 

 

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>imagebutton 예제</h3>

<table>

<tr>

<td>

<asp:ImageButton ID="ImageButton1" runat ="server" ImageUrl="~/Default.aspx" OnClick="ImageButton1_Click" />

 

</td>

<td>

<asp:Label ID="Label1" runat="server" Text="x : "></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text="y : "></asp:Label>

 

</td>

 

</tr>

<tr>

<td colspan="2">&nbsp;</td>

</tr>

<tr>

<td>

<asp:ImageButton ID="ImageButton2" runat ="server" ImageUrl="~/Default.aspx" OnClick="ImageButton2_Click" />

 

 

</td>

<td>

<asp:Label ID ="Label3" runat="server" Text=""></asp:Label>

</td>

 

</tr>

 

 

</table>

</div>

</form>

</body>

</html>

Checkbox: 체크할 수 있는 박스를 서버 컨트롤로 만든 것이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = "선택한 스포츠 : ";

if (CheckBox1.Checked == true)

Label1.Text += CheckBox1.Text + "";

if (CheckBox2.Checked == true)

Label1.Text += CheckBox2.Text + "";

if (CheckBox3.Checked == true)

Label1.Text += CheckBox3.Text + "";

}

protected void CheckBox4_CheckedChanged(object sender, EventArgs e)

{

if (CheckBox4.Checked == true)

Label2.Text = "메일링에 가입 합니다.";

else

Label2.Text = "메일링에 가입 하지 않습니다.";

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>checkbox 예제</h3>

<h4>1. 좋아하는 스포츠를 고르세요</h4>

<asp:CheckBox ID ="CheckBox1" runat="server" Text="야구" />

<br />

<asp:CheckBox ID ="CheckBox2" runat ="server" Text="축구" TextAlign="Left" /><br />

<asp:CheckBox ID ="CheckBox3" runat ="server" Text="농구" Enabled="false" /> <br />

<asp:Button ID ="Button1" runat="server" Text="선택" OnClick="Button1_Click" /> <br />

<asp:Label ID="Label1" runat="server" Text="" ></asp:Label>

 

<h4>2. 메일링에 가입 여부 체크</h4>

<asp:CheckBox ID="CheckBox4" runat="server" Text="메일링 가입" AutoPostBack="true" OnCheckedChanged="CheckBox4_CheckedChanged" /><br />

<asp:Label ID ="Label2" runat="server" Text=""></asp:Label>

</div>

</form>

</body>

</html>

RadioButton: 여러 개의 항목 중 한 항목만 선택할 수 있게 만든 동그란 버튼입니다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

Label1.Text = "선택한 스포츠 : ";

if (RadioButton1.Checked == true)

Label1.Text = RadioButton1.Text;

else if (RadioButton2.Checked == true)

Label1.Text = RadioButton2.Text;

else if (RadioButton3.Checked == true)

Label1.Text = RadioButton3.Text;

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>radiobutton 예제</h3>

 

<h4> *좋아하는 스포츠를 고르세요</h4>

<asp:RadioButton ID="RadioButton1" runat="server" GroupName="Sports" Text="야구" /><br />

<asp:RadioButton ID="RadioButton2" runat="server" GroupName="Sports" Text="축구" /><br />

<asp:RadioButton ID="RadioButton3" runat="server" GroupName="Sports" Text="농구" Enabled="false" /><br />

<asp:Button ID="Button1" runat ="server" Text="선택" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text="" ></asp:Label>

</div>

</form>

</body>

</html>

Checkboxlist: checkbox 컨트롤을 여러 개 묶어서 사용하는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadioButton1_CheckedChanged(object sender, EventArgs e)

{

CheckBoxList1.RepeatLayout = RepeatLayout.Table;

}

protected void RadioButton2_CheckedChanged(object sender, EventArgs e)

{

CheckBoxList1.RepeatLayout = RepeatLayout.Flow;

}

protected void RadioButton3_CheckedChanged(object sender, EventArgs e)

{

CheckBoxList1.RepeatDirection = RepeatDirection.Vertical;

}

protected void RadioButton4_CheckedChanged(object sender, EventArgs e)

{

CheckBoxList1.RepeatDirection = RepeatDirection.Horizontal;

}

protected void Button1_Click(object sender, EventArgs e)

{

string s ="선택한 항목: <br>";

for(int i=0; i< CheckBoxList1.Items.Count; i++)

{

if(CheckBoxList1.Items[ i ].Selected == true)

{

s += CheckBoxList1.Items[i].Text + "<br>";

}

}

Label1.Text = s;

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>checkboxlist 예제</h3>

 

RepeateLayout: <asp:RadioButton ID="RadioButton1" runat ="server" Checked="true" Text="Table" GroupName="Layout" AutoPostBack="true" OnCheckedChanged="RadioButton1_CheckedChanged" />

<asp:RadioButton ID="RadioButton2" runat="server" Text="Flow" GroupName="Layout" AutoPostBack="true" OnCheckedChanged="RadioButton2_CheckedChanged" /><br />

RepeateDirection: <asp:RadioButton ID="RadioButton3" runat="server" Checked="true" Text="Vertical" GroupName="Direction" AutoPostBack="true" OnCheckedChanged="RadioButton3_CheckedChanged" />

<asp:RadioButton ID="RadioButton4" runat ="server" Text="Horizontal" GroupName="Direction" AutoPostBack="true" OnCheckedChanged="RadioButton4_CheckedChanged" />

 

<p></p>

<asp:CheckBoxList ID="CheckBoxList1" runat ="server">

<asp:ListItem Value="1" >item 1</asp:ListItem>

<asp:ListItem Value="2" Text="Items 2"></asp:ListItem>

<asp:ListItem Value="3" Enabled="false">item3</asp:ListItem>

<asp:ListItem Value="4" Selected="True">item4</asp:ListItem>

 

</asp:CheckBoxList>

<p></p>

<asp:Button ID="Button1" runat ="server" Text="확인" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

 

 

</div>

</form>

</body>

</html>

Radiobuttonlist: 여러 개의 radiobutton 컨트롤을 묶어서 사용하는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)

{

Label1.Text = RadioButtonList1.SelectedIndex.ToString() + "번째 항목 value : " + RadioButtonList1.SelectedItem.Value + ", Text: " + RadioButtonList1.SelectedItem.Text;

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>radiobuttonlist 예제</h3>

 

<asp:RadioButtonList ID="RadioButtonList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged">

<asp:ListItem Value="A" Selected="True" >item1</asp:ListItem>

<asp:ListItem Value="B">item2</asp:ListItem>

<asp:ListItem Value="C">item3</asp:ListItem>

 

 

</asp:RadioButtonList>

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

</div>

</form>

</body>

</html>

Dropdownlist: 리스트 컨트롤이며 여러 항목 중 하나의 항목을 선택할 수 있도록 하는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

ArrayList ar = new ArrayList();

ar.Add("Item 1");

ar.Add("Item 2");

ar.Add("Item 3");

DropDownList1.DataSource = ar;

DropDownList1.DataBind();

}

}

protected void Button1_Click(object sender, EventArgs e)

{

string s = "";

s = "선택한 항목 index : " +

DropDownList1.SelectedIndex.ToString() + "<br>";

s += "선택한 항목 Text :" +

DropDownList1.SelectedItem.Text + "<br>";

s += "선택한 항목 value: " + DropDownList1.SelectedItem.Value;

Label1.Text = s;

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>dropdownlist 예제</h3>

 

<asp:DropDownList ID="DropDownList1" runat ="server" ></asp:DropDownList>

 

<asp:Button ID="Button1" runat ="server" Text="Button" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text="" ></asp:Label>

</div>

</form>

</body>

</html>

Listbox: 한 번에 여러 개의 항목을 선택할 수 있도록 해주는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

string s = "선택한 항목: ";

for (int i = 0; i < ListBox1.Items.Count; i++)

{

if (ListBox1.Items[i].Selected == true)

{

s += ListBox1.Items[i].Text + "";

}

 

 

}

Label1.Text = s;

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>listbox 예제</h3>

 

<asp:ListBox ID="ListBox1" runat ="server" SelectionMode="Multiple">

<asp:ListItem Value="1" Text="Item 1" ></asp:ListItem>

<asp:ListItem Value="2" Text="Item 2" ></asp:ListItem>

<asp:ListItem Value="3" Text="Item 3" ></asp:ListItem>

 

</asp:ListBox>

<asp:Button ID="Button1" runat ="server" Text="Button" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

 

</div>

</form>

</body>

</html>

Hyperlink: 링크를 거는 anchor태그(<a>)를 서버 측에서 사용할 수 있도록 만든 컨트롤이다.

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server"></script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl ="http://www.microsoft.co.kr" Text="한국 마이크로소프트 웹 사이트로 이동"></asp:HyperLink>

 

<p></p>

 

<asp:HyperLink ID="HyoerLink2" runat="server" ImageUrl="~/Images/microsoft.gif" NavigateUrl="http://www.microsoft.co.kr" Target="_blank" ></asp:HyperLink>

</div>

</form>

</body>

</html>

Table: html에서 사용되는 테이블 태그를 서버 측에서 프로그래밍 방식으로 제어하기 위해 만든 컨트롤 이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

int iRows = int.Parse(DropDownList1.SelectedItem.Value);

int iCells = int.Parse(DropDownList2.SelectedItem.Value);

 

for (int i = 0; i < iRows; i++)

{

TableRow r = new TableRow();

for (int k = 0; k < iCells; k++)

{

TableCell c = new TableCell();

c.Controls.Add(new LiteralControl("행 " + i.ToString() + ", 셀" + k.ToString()));

r.Cells.Add(c);

 

 

}

Table1.Rows.Add(r);

 

}

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>table 예제</h3>

 

<asp:Table ID="Table1" runat ="server" CellPadding="5" CellSpacing="0" GridLines="Both" BorderWidth="1" Caption="Table 동적 생성" CaptionAlign="Left"></asp:Table>

<p></p>

행의수:

<asp:DropDownList ID="DropDownList1" runat="server">

<asp:ListItem Value="1"> 1행</asp:ListItem>

<asp:ListItem Value="2"> 2행</asp:ListItem>

<asp:ListItem Value="3"> 3행</asp:ListItem>

<asp:ListItem Value="4"> 4행</asp:ListItem>

 

</asp:DropDownList>

 

셀의수:

<asp:DropDownList ID="DropDownList2" runat="server">

<asp:ListItem Value="1"> 1셀</asp:ListItem>

<asp:ListItem Value="2"> 2셀</asp:ListItem>

<asp:ListItem Value="3"> 3셀</asp:ListItem>

<asp:ListItem Value="4"> 4셀</asp:ListItem>

 

</asp:DropDownList>

<p></p>

<asp:Button ID="Button1" runat="server" Text="테이블 생성" OnClick="Button1_Click" />

</div>

</form>

</body>

</html>

Image: ImageUrl 속성에 지정한 이미지를 보여주는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat ="server" >

protected void Page_Load (object sender, EventArgs e)

{

if(DropDownList1.SelectedItem.Value == "0")

Image1.ImageUrl="C:/Users/Administrator/Desktop/aa.jpg";

else

Image1.ImageUrl = "C:/Users/Administrator/Desktop/bb.jpg";

Image1.AlternateText = DropDownList1.SelectedItem.Text;

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Image ID="Image1" runat ="server" />

 

<p></p>

 

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">

<asp:ListItem Value="0" > 최홍만</asp:ListItem>

<asp:ListItem Value="1">밥샵</asp:ListItem>

 

</asp:DropDownList>

</div>

</form>

</body>

</html>

Imagemap: 이미지를 특정 영역으로 분할하고 분할된 영역을 사용자가 선택할 수 있게 하는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server" >

protected void ImageMap1_Click(object sender, ImageMapEventArgs e)

{

Label1.Text = e.PostBackValue + "가 클릭 되었습니다.";

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:ImageMap ID="ImageMap1" runat ="server" ImageUrl="C:/Users/Administrator/Desktop/aa.jpg" OnClick="ImageMap1_Click">

<asp:RectangleHotSpot HotSpotMode ="PostBack" PostBackValue ="HotSpot1" AlternateText="HotSpot 1" Top="30" Left="175" Bottom="110" Right="355" />

 

<asp:RectangleHotSpot HotSpotMode="PostBack" PostBackValue ="HotSpot2" AlternateText ="HotSpot2" Top="155" Left="175" Bottom="240" Right="355" />

 

<asp:RectangleHotSpot HotSpotMode ="Navigate" NavigateUrl="www.naver.com" AlternateText="HotSpot3" Top="285" Left="175" Bottom="365" Right="355" />

 

<asp:RectangleHotSpot HotSpotMode="PostBack" PostBackValue="BackGround" AlternateText="BackGround" Top="0" Left="0" Bottom="390" Right="540" />

 

</asp:ImageMap>

<p></p>

 

<asp:Label ID="Label1" runat="server" Text="" ></asp:Label>

 

</div>

</form>

</body>

</html>

 

FileUpload: 클라이언트에 있는 파일을 서버로 전송할 때 사용하는 컨트롤 이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

if (FileUpload1.HasFile)

{

FileUpload1.SaveAs("c:\\Uploads\\" + FileUpload1.FileName);

Label1.Text = "파일명 :" + FileUpload1.FileName + "<br>콘텐츠 타입:" + FileUpload1.PostedFile.ContentType + "<br> 파일 사이즈: " + FileUpload1.PostedFile.ContentLength;

}

else

{

Label1.Text = "업로드할 파일이 존재하지 않습니다.";

}

}

 

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3> fileupload 예제</h3>

 

<asp:FileUpload ID="FileUpload1" runat="server" /> <br />

<asp:Button ID="Button1" runat="server" Text="파일첨부" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text="" ></asp:Label>

</div>

</form>

</body>

</html>

Hiddenfield:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Button1_Click(object sender, EventArgs e)

{

if (HiddenField1.Value == "")

HiddenField1.Value = "0";

 

int iNum = int.Parse(HiddenField1.Value) + 1;

HiddenField1.Value = iNum.ToString();

Label1.Text = "버튼 클릭 수: " + HiddenField1.Value;

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>hiddenfield 에제</h3>

<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /><br />

<asp:Label ID="Label1" runat="server" Text=""></asp:Label>

<asp:HiddenField ID="HiddenField1" runat="server" />

 

</div>

</form>

</body>

</html>

Multivew 와 view: 다른 서버 컨트롤 및 태그에 대한 컨테이너 역할을 하는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

{

MultiView1.ActiveViewIndex = DropDownList1.SelectedIndex;

}

 

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>multiview and view 예제</h3>

 

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged">

<asp:ListItem>view 1</asp:ListItem>

<asp:ListItem>view 2</asp:ListItem>

</asp:DropDownList>

<hr /><br />

<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0" >

<asp:View ID="View1" runat="server">view 1 <br />

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Button" />

</asp:View>

<asp:View ID="View2" runat="server">view 2 <br />

<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/microsoft.gif" />

 

</asp:View>

 

</asp:MultiView>

 

</div>

</form>

</body>

</html>

 

Wizard: 일련의 순서를 가지는 작업들을 손쉽게 처리할 수 있도록 도와주는 컨트롤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

protected void Wizard1_FinishButtonClick(object sender, WizardNavigationEventArgs e)

{

Label1.Text = "토니모리 남성 바나나 바지 3종 세트: " + TextBox1.Text + "개";

Label2.Text = "김소정 된장:" + TextBox2.Text + "병";

Label3.Text = "주소:" + TextBox3.Text;

}

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<asp:Wizard ID="Wizard1" runat="server" OnFinishButtonClick ="Wizard1_FinishButtonClick" CellPadding="5" Width="500">

<WizardSteps>

<asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">

<b>물품 주문</b>

<<p></p>

토니모리 남성 바나나 바지 3종 세트:

<asp:TextBox ID="TextBox1" runat="server" Text="1" Columns="3"></asp:TextBox>

<br />

김소정 된장:

<asp:TextBox ID="TextBox2" runat="server" Text="1" Columns="3"></asp:TextBox>

 

</asp:WizardStep>

<asp:WizardStep ID="WizardStep2" runat="server" Title="스텝 2">

<b>주소 입력</b>

<p></p>

주소: <asp:TextBox ID="TextBox3" runat="server" Width="200" ></asp:TextBox>

</asp:WizardStep>

<asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3" StepType="Complete">

<b>최종 주문 확인</b>

<p></p>

<asp:Label ID="Label1" runat="server" Text=""></asp:Label><br />

<asp:Label ID="Label2" runat="server" Text=""></asp:Label><br />

<asp:Label ID="Label3" runat="server" Text=""></asp:Label><br />

 

</asp:WizardStep>

</WizardSteps>

</asp:Wizard>

 

</div>

</form>

</body>

</html>

Xml: Xml 문서의 내용을 웹에 출력하는 역할을 하는 컨트롤이다.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server"></script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>제목 없음</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<h3>xml 예제</h3>

 

<asp:Xml ID="xml1" DocumentSource="~/person.xml" TransformSource="~/person.xsl" runat="server" />

 

</div>

</form>

</body>

</html>

 

<?xml version="1.0" encoding="utf-8" ?>

 

<persons>

    <person>

        <이름>김소정</이름>

        <직업>대학생</직업>

        <학교>인제대</학교>

        

    </person>

    <person>

        <이름>배뚱비</이름>

        <직업>빵구쟁이</직업>

        <회사>뿡뿡</회사>

    </person>

    <person>

        <이름>정창환</이름>

        <직업>바나나바지</직업>

        <회사>토미모리</회사>

    </person>

    

</persons>

 

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

 

 

<xsl:template match="/">

        <html>

            <body>

                xml 신상 정보 <br />

                <table width="400">

                    <tr bgcolor="#cccccc">

                        <td>이름</td>

                        <td>직업</td>

                        <td>회사</td>

                    </tr>

                    <xsl:for-each select="persons/person">

                        <tr>

                            <td>

                                <xsl:value-of select="이름"/>

                            </td>

                            <td>

                                <xsl:value-of select="직업"/>

                            </td>

                            <td>

                                <xsl:value-of select="회사"/>

                            </td>

                        </tr>

                        

                        

                    </xsl:for-each>

                    

                </table>

            </body>

        </html>

          

          

        

</xsl:template>

</xsl:stylesheet>

 출처: 뇌를 자극하는 asp.net 2.0