닷넷, C#, ASP.NET 사용자정의컨트롤,닷넷교육,ASP.NET교육,C#교육
사용자 정의 컨트롤은 반복해서 사용하는
UI를 별도의 컨트롤 파일로 분리하기 위해 사용 하며 동작하는 방식은 ASP.NET 페이지와
동일 하지만 페이지의 일부로서 구성되는 컨트롤 이다. 결국
ASP.NET 사용자 정의 컨트롤은 ASP.NET 페이지의 일부를 컨트롤화 한 것 이라고
보면 된다.
사용자 정의 컨트롤은 유저 컨트롤(Web
User Control) 이라고 하며 웹 페이지의 일부로 <HTML> 태그 블록을
포함 하지는 않지만 스크립트와 HTML 요소를 포함 할 수 있는 것이다. 그러나 웹 페이지의 일부 이므로 독립적인 실행은 불 가능 하다. 한번
작성된 컨트롤은 여러 페이지나 여러 곳에 사용 될 수 있다.
이 컨트롤을 사용하는 대표적인 이유는 각각의 페이지에서 반복적으로 사용되는
고정적인 어떤 독립 모듈을 위해서 이다. 예를 들어 사이트 하단에 위치하는 CopyRight 문구, 사이트 상단의 고정적인 메뉴 등을 위해서
쓰일 수 있는 것이다. 대부분의 사이트에서 메뉴를 쉽게 관리 하기 위해 메뉴 페이지를 모든 웹페이지에
반복적으로 하드 코딩 하기 보다는 분리된 프레임 구조로 나누어서 처리 하곤 한다.
일관성을 위해 프레임을 이용하는 것은 나쁜 구조는 아니지만 프레임에 의존
하는 사이트는 Contents의 양이 늘어나는 경우 확장 하거나 관리가 어렵다는 단점이 있다. 특히 하나의 페이지 내에서 데이터 교환을 할 경우 발생 하지 않는 문제가 프레임으로 나눌 경우 생기게 되어
불편 함을 야기 한다. 이럴 경우 사용자 컨트롤을 이용하게 되면 유용하게 해결 할 수 있다.
ASP.NET에서 사용자 컨트롤은 자그마한 ASP.NET 페이지 이다. 작은 페이지와 같은 개념이므로 사용자
정의 컨트롤의 작성은 ASP.NET 페이지를 만드는 것과 동일 하며 차이점이 있다면 실행 될 수 없다는
것이다. 이 또한 어쨌든 컨트롤 이므로 이를 호스트 하는 웹 페이지가 반드시 존재해야 한다는 것이다.
ASP.NET은 사용자 정의 컨트롤을 위해 ‘ascx’ 라는 특별한 확장 자를 준비해 두었다. 확장자만 ‘ascx’ 일뿐
aspx 페이지와 거의 동일 하다. 심지어 기존에 제작해 둔 aspx 페이지를 ascx로 변환도 가능 하다. 즉 사용자 정의 컨트롤은 ascx 확장 자를 가진 사용자 정의 컨트롤
파일과 ascx.cs 확장자를 가진 Code Behind 파일을
가질 수 있으며, 물론 단일 파일로도
구성이 가능 하다. 사용자 정의 컨트롤은 <%@ Control
~~~ %> 지시어 부, <script> 부, <Table>등의 요소부로 구성 된다. 네임 스페이스의
등록 사용이 가능 하며 이벤트 핸들러의 사용도 가능 하다. 또한 사용자 정의 컨트롤은 웹 페이지의 일부
이므로 <HTML></HTML>은 없다. 사용자
정의 컨트롤 내에 여러 가지 서버 컨트롤을 포함 시켜 하나의 컨트롤 처럼 만들어 웹 페이지에 인스턴스를 만들어 사용 할 수 있다.
-----------------------
사용자 정의 컨트롤의 제작
-----------------------
1.
새 프로젝트를 시작 하고 C# ,
ASP.NET 웹 응용 프로그램을 선택
(프로젝트 이름은 MyControl로 하자)
2.
프로젝트에서 마우스 오른쪽 버튼을 눌러 새항목 추가 à 웹 사용자 정의 컨트롤을 선택 한다.
(파일의 이름을 “CopyRight.ascx”로 하자.)
3.
웹 폼 페이지와 비슷한 화면이 나타나는데 기존 웹 폼을 만들 때와 비슷하게
동작한다. 여러 서버 컨트롤을 올려 놓을 수도 있고, 해당
서버 컨트롤들의 이벤트 코드도 기존과 동일 한 방식으로 작성 할 수 있다. 단지 주의해야 할 점이 있다면
이 페이지는 <HTML> 이나 <BODY>,
<FORM> 태그는 가질 수 없다는 것이다. 이 페이지는 웹폼 페이지에 포함
되어 짐으로 그러하다. 현재의 VS.NET 디자이너 모드를 HTML 모드로 바꾼 후 아래의 코드가 보일 것이다.
<%@
Control Language="c#" AutoEventWireup="false"
Codebehind="CopyRight.ascx.cs" Inherits="MyControl.CopyRight"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
지시자의 시작이 @Page가 아닌 @Control로 코드가 시작 하고 있음을 확인
할 수 있다. @Control은 ASP.NET 페이지 파서
및 컴파일러에게 알려주는 사용자 정의 컨트롤(ascx) 관련 특성을 규정 하는 구역으로 ASP.NET 웹 페이지의 @Page와 동일한 기능을 수행 한다고
보면 된다.
이제 HTML을
작성해 보자(아래 처럼)
<hr
align="center" size="1" color="black"
width="95%">
<p
align="center">
©CopyRight 2004 <a
href="http://www.oraclejava.co.kr">OracleJava</a>
All Right Reserved.
</p>
간단한
HTML 문장이다. 첫 번째 예제는 간단히 만들어 보도록 하자. 이제 완료가 되었으니 컨트롤을 사용해 보도록 하자. 자체적으로는
실행 될 수 없으니 실행을 위해서는 반드시 호스트 되어 져야 한다. 이제 솔루션 탐색기에서 새로운 새
폼을 추가 하여 (기존에 있는 Webform1.aspx 를
이용해도 무방 하다.) 이름을 CopyRightTest.aspx 라고 하자.
4.
사용자 정의 컨트롤을 추가 하기 위해서 웹 폼 페이지의 상단에 아래의
코드를 추가 해야 한다.
<%@
Register TagPrefix=”UC” TabName=”CopyRight” Src=”CopyRight.ascx” %>
이 부분은 웹페이지에 사용자 정의 컨트롤을 등록하는
코드 이다. 등록이란 사용자 정의 컨트롤을 웹 페이지가 식별이 가능 하도록 접두어(prefix)를 부여 하고 소스 파일의 경로를 지정 하는 것을 말한다. 이를
위해서는 @Register 라는 지시어를 사용 해야 한다.
@Register는 3가지의 속성이 있는데 이중
TagPrefix는 사용자 정의 컨트롤을 웹페이지에 등록 할 때 사용할 접두어를 의미하고
TagName은 컨트롤의 이름을, Src에는 이 컨트롤 파일의 경로를 지정 해야 한다.
사용자 정의 컨트롤을 등록 하는 것을 알았으니
이제는 살제 컨트롤이 들어 갈 위치에 어떻게 삽입 되는지 확인해 보자.
<UC:CopyRight
id=”cr1” runat=”server”>
정리한 웹 폼의 HTML 소스 코드는 다음과 같다.
<%@
Page language="c#" codebehind="CopyRightTest.aspx.cs"
Inherits="MyControl.WebForm1"
AutoEventWireup="false" %>
<%@
Register TagPrefix="UC" TagName="CopyRight"
Src="CopyRight.ascx" %>
<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>CopyRightTest</title>
</HEAD>
<body>
<form id="Form1" method="post"
runat="server">
<UC:CopyRight
id="cr1" runat="server"></UC:CopyRight>
</form>
</body>
</HTML>
사용자 정의 컨트롤이 <form> 태그 안쪽에 오는 것을 유심히 보자. 지금과
같이 서버 컨트롤이 없는 경우엔 <form> 밖에 와도 무방 하지만 대부분의 경우 ASP.NET Server Control을 이용 하므로 <form>
태그 내부에 위치 해야 한다.
5.
이제 실행해 보도록 하자. 다음과
같은 결과가 나타날 것이다.
----------------------------------
테이블 동적 생성 사용자 정의 컨트롤
-----------------------------------
테이블을 동적으로 꾸며주는 사용자 정의 컨트롤을 제작 해 보자. 이 컨트롤은 내부적으로 <ASP:Table> 코드를 사용
했으며 외부로는 그 Table 서버 컨트롤을 제어 할 수 있는 4개의
기능을 이용하여 사용자 정의 컨트롤 내의 테이블을 원하는 대로 동적으로 꾸미게 할 것이다. 4개의 기능은
다음과 같다.
속성
BgColor : 테이블의 배경색 설정
ForeColor : 테이블의 전경색 설정
메소드
AddHeader(string[] values) : 테이블의 헤더 레코드를 삽입하는 메소드
AddRow(string[] values) : 테이블의 실제 레코드를 삽입하는 메소드
1.
새 프로젝트를 하나 만들자.(프로젝트명은 MyTable, C# , ASP.NET 웹 응용 프로그램으로 제작 하자.)
2.
솔루션 탐색기의 프로젝트에서 마우스 우측 버튼을 눌러 TableUserControl.ascx 라는 웹 사용자 정의 컨트롤을 추가 하자. 그런 다음 도구상자에서 HTML Table을 선택하여 폼으로 올리자.
Table의 속성을 아래와 같이 정의 하자.
ID : Table1
BorderColor : Black
Cellpadding : 10
CellSpacing : 0
GridLines : Both
3.
Code Behind로 이동하여 2개의 속성을 먼저 작성 하자.
public string BgColor {
set {
Table1.BackColor = Color.FromName(value);
}
}
public string ForeColor {
set {
Table1.ForeColor = Color.FromName(value);
}
}
위의 코드는 BgColor라는
속성으로 들어오는 사용자의 지정 값을 Table1 컨트롤의
BackColor 속성에 지정 함으로서 실제 출력될 테이블의 배경색을 지정 하며 ForeColor라는 속성으로 들어오는 문자열을 Table의 전경색으로 지정 한다. 이 코드에서 중요한 점은 속성값으로
들어오는 문자열을 Color 클래스의 FromName() Static
Method를 통해 실제 Color 타입으로 변환 하는 것이다. ASP.NET Table 개체의 BackColor나 ForeColor는 그 값으로 Color 타입의 데이터를 원하기 때문에
위와 같은 작업은 반드시 필요하다.
4.
속성은 위와 같이 정리 되었으므로 이번에는 2개의 메소드를 추가 해 보자. 우선 테이블에 새로운 행을 추가하는 AddRow라는 메소드부터 알아보자.
public void AddRow(string[]
values)
{
int len = values.Length;
TableRow tr = new TableRow();
TableCell td;
for(int i=0; i < len; i++)
{
td = new TableCell();
td.Text = values[i];
tr.Cells.Add(td);
}
Table1.Rows.Add(tr);
}
이 메소드는 테이블에 하나의 행을 추가하고 그 행을 인자로 들어 오는
문자열 배열의 수 만큼 열로 채우는 역할을 한다. 테이블이 몇 개의 인자를 가지게 될지는 인자로 들어오는
문자열 배열에 의해 결정 된다.
5.
이번에는 AddHeader() 라는
메소드를 추가해 보자. 이 메소드는 테이블의 헤더를 작성 하는 역할을 한다. 이 예제에서는 AddRow()를 다시 호출 하는 것으로 기능을 정리하자.
public void
AddHeader(string[] values)
{
int len = values.Length;
TableRow tr = new TableRow();
TableCell td;
for(int i=0; i < len; i++)
{
td = new
TableCell();
td.Text = values[i];
tr.Cells.Add(td);
}
tr.Cells = Color.FromName("gray");
Table1.Rows.Add(tr);
}
AddRow와 같은 기능이지만 tr의 배경색만 원하는 것으로 지정 했다.
6.
이제 사용자 정의 컨트롤의 제작은 끝이 났다. 다음으로 이를 이용하는 웹 폼을 하나 만들어 보자. 이름은 TableUserControlTest.aspc 라고 하고(기존에 있는 WebForm1.aspx의 이름을 바꾸기로 하자.) 그 폼위에
TableUserControl.ascx 사용자 정의 컨트롤을 드래그 앤 드롭 하여 올려보자.
현재 상태로도 페이지를 컴파일 하고 실행 할 수 있겠지만 결과로는 아무것도
나타나지 않을 것이다. 화면에 뭔가가 출력되길 바란다면 출력 할 데이터를 준비 한 다음 그 데이터를
가지고 TableUserControl의 기능들을 적절히 호출 해 주어야 한다. 코드 비하인드로 이동하여 보자. 분명 웹 폼위에 TableUserControl을 올려 두었음에도 그 컨트롤의 선언은 존재 하지 않고 있다. 이는 다른 웹 폼 컨트롤과 달리 사용자 정의 컨트롤은 VS.NET이 자동으로 그 개체의 선언을 코드 비하인드에 추가해 주지
않기 때문이다. 결국 수작업으로 추가해 주어야 한다.
클래스 선언 바로 밑에 다음과 같이 컨트롤을 선언 하도록 하자.주의 할 점은 사용자 정의 컨트롤의 변수 명이 HTML에 올려놓은
지정 한 사용자 정의 컨트롤의 ID와 같아야 한다는 점이다. (기본적으로
TableUserControl1 이라고 되어 있다.)
protected TableUSerControl
TableUserControl1;
그런 다음 Page_Load 이벤트에
아래의 코드를 작성 하자.
private void Page_Load(object
sender, System.EventArgs e)
{
// 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
string[] header = {"이름", "이메일", "직업", "성별"};
TableUserControl1.AddHeader(header);
string[] data = new string[4];
data[0] = "오엔제이";
data[1] = "gagil@onjprogramming.kr";
data[2] = "디자이너";
data[3] = "남자";
TableUserControl1.AddRow(data);
data[0] = "오라클자바커뮤니티";
data[1] = " oraclejava@onjprogramming.kr ";
data[2] = "프로그래머";
data[3] = "남자";
TableUserControl1.AddRow(data);
}
7.
전체 코드는 아래와 같다.
[TableUserControl.ascx의 HTML]
<%@ Control
Language="c#" AutoEventWireup="false"
Codebehind="TableUserControl.ascx.cs"
Inherits="TableUserControl.TableUserControl"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
<FONT face="굴림">
<asp:Table id="Table1" runat="server"
BorderColor="Black" CellPadding="10" CellSpacing="0"
GridLines="Both"></asp:Table></FONT>
[TableUserControl.ascx.cs]
namespace TableUserControl
{
using System;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
/// <summary>
/// TableUserControl에 대한 요약 설명입니다.
/// </summary>
public class TableUserControl : System.Web.UI.UserControl
{
protected System.Web.UI.WebControls.Table Table1;
private void Page_Load(object sender, System.EventArgs e)
{
// 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
}
public string BgColor
{
set
{
Table1.BackColor = Color.FromName(value);
}
}
public string ForeColor
{
set
{
Table1.ForeColor = Color.FromName(value);
}
}
public void AddRow(string[] values)
{
int len = values.Length;
TableRow tr = new TableRow();
TableCell td;
for(int i=0; i < len; i++)
{
td = new TableCell();
td.Text = values[i];
tr.Cells.Add(td);
}
Table1.Rows.Add(tr);
}
public void AddHeader(string[] values)
{
int len = values.Length;
TableRow tr = new TableRow();
TableCell td;
for(int i=0; i < len; i++)
{
td = new TableCell();
td.Text = values[i];
tr.Cells.Add(td);
}
tr.BackColor = Color.FromName("gray");
Table1.Rows.Add(tr);
}
#region Web Form 디자이너에서 생성한 코드
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 이 호출은 ASP.NET Web Form 디자이너에 필요합니다.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 디자이너 지원에 필요한 메서드입니다. 이 메서드의 내용을
/// 코드 편집기로 수정하지 마십시오.
/// </summary>
private void InitializeComponent()
{
this.Load += new
System.EventHandler(this.Page_Load);
}
#endregion
}
}
[TableUserControlTest.aspx의 HTML]
<%@ Register TagPrefix="uc1"
TagName="TableUserControl" Src="TableUserControl.ascx"
%>
<%@ Page
language="c#" Codebehind="TableUserControlTest.aspx.cs"
AutoEventWireup="false"
Inherits="TableUserControl.WebForm1" %>
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta content="Microsoft Visual Studio .NET
7.1" name="GENERATOR">
<meta content="C#"
name="CODE_LANGUAGE">
<meta content="JavaScript"
name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5"
name="vs_targetSchema">
</HEAD>
<body MS_POSITIONING="GridLayout">
<form id="Form1" method="post"
runat="server">
<uc1:TableUserControl
id="TableUserControl1"
runat="server"></uc1:TableUserControl></form>
</body>
</HTML>
[TableUserControlTest.aspx.cs]
using System;
using System.Collections;
using
System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using
System.Web.SessionState;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace TableUserControl
{
/// <summary>
/// WebForm1에 대한 요약 설명입니다.
/// </summary>
public class WebForm1 : System.Web.UI.Page
{
protected TableUserControl TableUserControl1;
private void Page_Load(object sender, System.EventArgs e)
{
// 여기에 사용자 코드를 배치하여 페이지를 초기화합니다.
string[] header = {"이름", "이메일",
"직업", "성별"};
TableUserControl1.AddHeader(header);
string[] data = new string[4];
data[0] = "가길동";
data[1] = "gagil@test.co.kr";
data[2] = "디자이너";
data[3] = "남자";
TableUserControl1.AddRow(data);
data[0] = "나길동";
data[1] = "nagil@test.co.kr";
data[2] = "프로그래머";
data[3] = "남자";
TableUserControl1.AddRow(data);
}
#region Web Form 디자이너에서 생성한 코드
override protected void OnInit(EventArgs e)
{
//
// CODEGEN: 이 호출은 ASP.NET Web Form 디자이너에 필요합니다.
//
InitializeComponent();
base.OnInit(e);
}
/// <summary>
/// 디자이너 지원에 필요한 메서드입니다.
/// 이 메서드의 내용을 코드 편집기로 수정하지 마십시오.
/// </summary>
private void InitializeComponent()
{
this.Load += new
System.EventHandler(this.Page_Load);
}
#endregion
}
}
[실행결과]
-------------------------------
UserControl을 aspx로 변경
-------------------------------
이번에는 앞에서 만든
CopyRight.aspx 파일을 ASP.NET 웹페이지로 변경해 보자.
1. CopyRight.ascs 파일의 확장자를 aspx로 변경 하고, 경고 창이
나타나면 “예”라고 하자.
2. 아래와 같은
HTML 소스에서
<%@ Control
Language="c#" AutoEventWireup="false"
Codebehind="CopyRight.ascx.cs"
Inherits="MyControl.CopyRight"
TargetSchema="http://schemas.microsoft.com/intellisense/ie5"%>
Control을 Page,
CopyRight.ascx.cs를 CopyRight.aspx.cs 로 바꾸자…
3. 코드 비하인드로 이동하여 아래를 확인 하자.
public class CopyRight :
System.Web.UI. UserControl
에서 UserControl을 Page로 바꾸면 끝이다.
4. 만약
ASP.NET 페이지를 사용자 정의 컨트롤로 바꾸고 싶다면 @Page 지시자를 @Control 지시자로 바꾸고 . CodeHehind 속성을 적절히
수정 한 후 사용자 정의 컨트롤은 <HTML>, <BODY>, <FORM>등을
가질 수 없으므로 그러한 부분을 삭제하고 코드 비하인드에서 System.Web.UI.UserControl 이라고
바꾸면 된다.
출처:오라클자바커뮤니티(www.oraclejavanew.kr)
오라클자바커뮤니티 추천 실전강좌 - 개인80%환급
 |
[기업특강]JAVA,JSP,AJAX,jQUERY
 |
총 |
5일 |
40시간 |
|
09-09 |
스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
 |
총 |
4일 |
32시간 |
|
09-10 |
| Spring3.X, MyBatis, Hibernate실무과정
|
총 |
5일 |
35시간 |
|
09-24 |
 |
| 스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
|
총 |
11일 |
33시간 |
|
09-09 |
| Spring3.X, MyBatis,
Hibernate실무과정 |
총 |
12일 |
36시간 |
|
09-12 |
| 자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지
|
총 |
24일 |
72시간 |
|
09-12 |
| JAVA&WEB프레임워크실무과정
|
총 |
33일 |
99시간 |
|
09-13 |
| 자바초보에서안드로이드까지 |
총 |
18일 |
54시간 |
|
09-25
|
| JAVA,JSP 초보에서 실무까지 |
총 |
18일 |
56시간 |
|
10-02 |
 |
| 자바초보에서안드로이드까지
|
총 |
8일 |
56시간 |
|
09-14 |
| Spring3.X, MyBatis,
Hibernate실무과정 |
총 |
5일 |
35시간 |
|
09-14 |
| 자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지
|
총 |
10일 |
70시간 |
|
09-14 |
| MiPlatform, XPlatform 실무강좌
|
총 |
5일 |
35시간 |
|
09-28
|
| 스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
|
총 |
4일 |
32시간 |
|
09-28
|
| JAVA&WEB프레임워크실무과정 |
총 |
14일 |
98시간 |
|
09-28
|
|
| PL/SQL,오라클힌트,SQL튜닝,사례연구
|
총 |
4일 |
32시간 |
|
09-09 |
| 스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
|
총 |
4일 |
32시간 |
|
09-10 |
| SQL초보에서실전전문가까지 |
총 |
8일 |
56시간 |
|
09-25 |
|
| 스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
|
총 |
11일 |
33시간 |
|
09-09 |
| 오라클 마스터 |
총 |
18일 |
54시간 |
|
09-12 |
| PL/SQL,오라클힌트,SQL튜닝,사례연구
|
총 |
10일 |
30시간 |
|
09-12 |
| SQL초보에서실전전문가까지
|
총 |
18일 |
54시간 |
|
09-13 |
|
| 오라클 마스터 |
총 |
8일 |
56시간 |
|
09-14 |
| SQL초보에서실전전문가까지
|
총 |
8일 |
56시간 |
|
09-14 |
| 스프링3.X게시판&오라클힌트,SQL튜닝,사례연구
|
총 |
4일 |
32시간 |
|
09-28
|
| PL/SQL,오라클힌트,SQL튜닝,사례연구 |
총 |
4일 |
32시간 |
|
09-28
|
