본문 바로가기
개발언어/ASP.NET

HOWTO: ASP.NET에서 Visual C# .NET을 사용하여 동적으로 컨트롤 만들기

by 엔돌슨 2008. 5. 5.
반응형
http://support.microsoft.com/kb/317794/ko

동적으로 TextBox를 생성할 필요가 있다 ^^

만드는 방법또 한 간단하다 ㅎㅎ



이 문서가 적용되는 제품 보기.
기술 자료 ID : 317794
마지막 검토 : 2005년 12월 1일 목요일
수정 : 4.2

요약

이 문서의 단계별 지침을 사용하여 동적으로 .aspx 페이지의 컨트롤을 만들 수 있습니다.

이 문서에서는 동적으로 .aspx 페이지의 컨트롤을 만드는 방법을 보여 줍니다. 예제 프로젝트에서는 다음과 같은 작업을 수행합니다.
• 두 개의 TextBox 컨트롤을 만듭니다.
• TextBox 내용(TextBox.text) 및 특성이 서버 게시를 통해 저장됨을 확인합니다.
• 동적으로 만든 컨트롤에서 게시하는 이벤트를 처리하는 방법을 보여 줍니다.

위로 가기

프로젝트 및 정적 컨트롤 만들기

1. Microsoft Visual Studio .NET을 시작합니다.
2. 파일 메뉴에서 새로 만들기를 가리킨 다음 프로젝트를 누릅니다.
3. 프로젝트 형식에서 Visual C# 프로젝트를 누른 다음 템플릿에서 ASP.NET 웹 응용 프로그램을 누릅니다. 프로젝트에 DynamicCreate라는 이름을 지정합니다.
4. WebForm1.aspx 파일을 연 다음 HTML 뷰로 전환합니다. <HTML> 태그와 </HTML> 태그 사이에 있는 기존 코드를 아래 코드로 바꿉니다. 
<HEAD>
    <title>WebForm1</title>
    <meta content="Microsoft Visual Studio 7.0" 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">
        <asp:Button id="Button1" style="Z-INDEX: 100; LEFT: 23px; POSITION: absolute; TOP: 108px" runat="server" Text="Submit" Height="27px" Width="100px"></asp:Button>
        <asp:Label id="Label4" style="Z-INDEX: 105; LEFT: 23px; POSITION: absolute; TOP: 197px" runat="server" Width="368px" EnableViewState="False"></asp:Label>
        <asp:Label id="Label3" style="Z-INDEX: 104; LEFT: 23px; POSITION: absolute; TOP: 163px" runat="server" Width="368px" EnableViewState="False"></asp:Label>
        <asp:Label id="Label2" style="Z-INDEX: 102; LEFT: 23px; POSITION: absolute; TOP: 60px" runat="server" Width="86px" Height="19px"> TextBox2:</asp:Label>
        <asp:Label id="Label1" style="Z-INDEX: 101; LEFT: 23px; POSITION: absolute; TOP: 28px" runat="server" Width="86" Height="19"> TextBox1:</asp:Label></form>
</body>
5. 디자인 뷰로 돌아가서 프로젝트에서 사용할 정적으로 만들어진 컨트롤을 확인합니다.

위로 가기

동적 컨트롤 만들기 및 연결

1. 솔루션 탐색기에서 모든 파일 표시를 눌러 WebForm1.aspx와 관련된 파일 목록을 표시한 다음 WebForm1.aspx.cs 파일을 엽니다.
2. .cs(코드 숨김) 파일에서 TextBox 컨트롤을 선언합니다. 또한 .aspx 파일에서 기존 폼 요소에 대한 변수를 선언합니다. WebForm1 클래스에 대한 선언 다음에 나오는 선언을 업데이트합니다. 
public class WebForm1 : System.Web.UI.Page
{
	protected System.Web.UI.WebControls.Label Label1;
	protected System.Web.UI.WebControls.Label Label2;
	protected System.Web.UI.WebControls.Label Label3;
	protected System.Web.UI.WebControls.Label Label4;
	protected System.Web.UI.WebControls.Button Button1;

	// Added by hand for access to the form.
	protected System.Web.UI.HtmlControls.HtmlForm Form1;
	
	// Added by hand; will create instance in OnInit.
	protected System.Web.UI.WebControls.TextBox TextBox1;
	protected System.Web.UI.WebControls.TextBox TextBox2;
TextBox 선언은 TextBox를 도구 상자에서 ASPX 페이지로 끌어올 때와 마찬가지로 수동으로 입력합니다. 그러나 이 경우에는 컨트롤을 동적으로 만듭니다.
3. 동적으로 TextBox 컨트롤을 만드는 코드를 추가합니다. 그러면 페이지가 실행될 때마다 컨트롤이 만들어집니다. 이 작업은 WebForm1 클래스가 제공하는 OnInit 함수에서 수행하는 것이 가장 좋습니다.

OnInit 함수를 찾은 다음 "Web Form 디자이너에서 생성한 코드"라는 주석이 표시된 코드를 확장하고 OnInit 함수를 다음 코드와 같이 수정합니다. 
override protected void OnInit(EventArgs e)
{
    // Create dynamic controls here.
    // Use "using System.Web.UI.WebControls;"
    TextBox1 = new TextBox();
    TextBox1.ID = "TextBox1";
    TextBox1.Style["Position"] = "Absolute";
    TextBox1.Style["Top"] = "25px";
    TextBox1.Style["Left"] = "100px";
    Form1.Controls.Add(TextBox1);

    TextBox2 = new TextBox();
    TextBox2.ID = "TextBox2";
    TextBox2.Style["Position"] = "Absolute";
    TextBox2.Style["Top"] = "60px";
    TextBox2.Style["Left"] = "100px";
    Form1.Controls.Add(TextBox2);

    this.TextBox1.TextChanged += new System.EventHandler(this.TextBox_TextChanged);
    this.TextBox2.TextChanged += new System.EventHandler(this.TextBox_TextChanged);

    // 
    // CODEGEN: This call is required by the ASP.NET Web Form Designer.
    // 
    InitializeComponent();
    base.OnInit(e);
}
이 코드에서는 동적으로 TextBox 컨트롤을 두 개 만들고 ID와 위치를 설정한 다음 폼 컨트롤 컬렉션에 바인딩합니다. 또한 이 코드에서는 텍스트 상자의 TextChanged 이벤트를 처리기(TextBox_TextChanged)에 연결합니다.

TextBox 위치를 프로그래밍 방식으로 설정하고 폼 컨트롤 컬렉션에 바인딩하는 대신 .aspx 페이지에 Web Forms Panel 컨트롤을 추가하고 OnInit 함수에서 다음과 같이 이 컨트롤에 텍스트 상자를 바인딩할 수도 있습니다. 
TextBox1 = new TextBox();    TextBox1.ID = "TextBox1";
//Form1.Controls.Add(TextBox1);
    Panel1.Controls.Add(TextBox1);
참고 Web Form에 동적 컨트롤을 만들 때는 컨트롤을 만든 후 OnInit 또는 Page_Load 이벤트에서 이 컨트롤을 컨트롤 컬렉션에 추가해야 합니다. 그렇지 않으면 컨트롤이 제대로 작동하지 않습니다.
4. 텍스트 상자의 Text 속성과 스타일을 초기화합니다. 기존 Page_Load 함수를 다음과 같이 수정합니다. 
private void Page_Load(object sender, System.EventArgs e)
{
    if(!IsPostBack)
    {
        // Set the initial properties for the text boxes.
        TextBox1.Text = "TextBox1";
        TextBox2.Text = "TextBox2";
    }
}
텍스트 상자의 초기 값(if(!IsPostBack))은 한 번만 설정됩니다. 이 정보는 텍스트 상자의 IPostBackDataHandler 인터페이스에 유지되므로 이후에 게시할 때 값을 다시 설정할 필요가 없습니다.
5. TextBox 컨트롤의 TextChanged 이벤트에 대한 처리기를 제공합니다. Page_Load 함수 본문 뒤에 다음 코드를 추가합니다. 
private void TextBox_TextChanged(object sender, System.EventArgs e)
{
    TextBox txtBoxSender = (TextBox)sender;
    string strTextBoxID = txtBoxSender.ID;

    switch(strTextBoxID)
    {
        case "TextBox1":
            Label3.Text = "TextBox1 text was changed";
            break;
        case "TextBox2":
            Label4.Text = "TextBox2 text was changed";
            break;
    }
}
이 코드에서는 이벤트를 발생시킨 컨트롤을 확인한 다음 적절한 Label 컨트롤을 사용하여 사용자에게 이를 보고합니다. 이 함수에서는 동적으로 만들어진 TextBox 컨트롤 두 개 모두의 TextChanged 이벤트를 처리합니다. 기본적으로 TextBox 컨트롤의 AutoPostBack은 false입니다. 따라서 이 컨트롤의 텍스트를 변경해도 서버에 대한 PostBack 동작이 발생하지 않습니다. 그러나 전송 단추를 눌러 폼을 서버에 게시하면 TextBox 컨트롤의 TextChanged 이벤트가 발생하고 이 함수가 호출됩니다.

위로 가기

예제 저장, 빌드 및 실행

예제를 저장하고 빌드합니다. Visual Studio .NET에서 예제를 실행하려면 .aspx 파일을 마우스 오른쪽 단추로 누른 다음 브라우저에서 보기를 누릅니다.





Microsoft 제품 관련 기술 전문가들과 온라인으로 정보를 교환하시려면 Microsoft 뉴스 그룹 (http://support.microsoft.com/newsgroups/default.aspx)에 참여하시기 바랍니다.

위로 가기

관련글

티스토리툴바