2014년 7월 10일 목요일

[강좌#12] 사용자 정의 컨트롤(User Control) -2[닷넷C#교육/ADO.NET강좌/ASP.NET교육잘하는곳/C#,ASP.NET교육추천/닷넷실무교육/.NET,C#/ADO.NET교육/닷넷학원/ASP.NET실무교육]

---------------------------------- 
테이블 동적 생성 사용자 정의 컨트롤 
----------------------------------- 
테이블을 동적으로 꾸며주는 사용자 정의 컨트롤을 제작 해 보자. 이 컨트롤은 내부적으로 <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@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); 



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 이라고 바꾸면 된다. 

오라클자바커뮤니티교육센터, 개발자전문교육, 개인80%환급 
www.oraclejavacommunity.com

평일주간(9:30~18:10) 개강
(7/14)[기업100%환급]C#4.0,WinForm,ADO.NET프로그래밍
(7/14)[기업100%환급]SQL기초에서 Schema Object까지
(7/14)[기업100%환급]안드로이드개발자과정
(7/21)[기업100%환급]자바기초에서 JDBC, Servlet/JSP까지 
(7/21)[기업100%환급]Spring ,MyBatis,Hibernate실무과정
(7/21)[기업100%환급]PL/SQL,ORACLE HINT,TUNING
(7/21)[채용예정교육]오라클자바개발잘하는신입뽑기프로젝트,교육전취업확정

평일야간(19:00~21:50) 개강
(7/09)닷넷(C#,Network,ADO.NET,ASP.NET)마스터과정
(7/15)SQL기초에서실무까지
(7/15)안드로이드개발자과정
(7/16)Spring3.X, MyBatis, Hibernate실무과정
(7/21)웹퍼블리싱 마스터
(7/22)자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지
(8/05)MyBatis3.X, Hibernate4.X ORM실무과정

주말(10:00~17:50) 개강
(7/12)SQL초보에서 Schema Object까지
(7/12)개발자를위한PLSQL,SQL튜닝,힌트
(7/13)C#,ASP.NET마스터
(7/19)JAVA,Network&WEB&Framework(자바기초에서웹스프링까지)
(7/19)Spring3.X, MyBatis, Hibernate실무과정
(7/19)웹퍼블리싱 마스터
(7/19)안드로이드개발자과정
(8/02)MyBatis3.X, Hibernate4.X ORM실무과정
(8/09)자바기초에서JSP,Ajax,jQuery,Spring3.2,MyBatis까지

주말저녁(18:30~22:20) 개강
(8/02)JAVA,Network&WEB&Framework
(8/09)SQL기초에서실무까지

댓글 없음:

댓글 쓰기