Blog Content

    티스토리 뷰

    36.C# ASP.NET - 웹 사용자 정의 컨트롤

    반응형
    유저 컨트롤 : 웹 사용자 정의 컨트롤(*.ascx)
    똑같은 페이지 모양이 여러페이지에서 사용될 때 같은 웹사이트 내에서 사용할 수 있는
    간단한 조그만 페이지를 만들어 놓음
    기능 만들어 놓고 원하는 위치에 인클루드 하는 방법
    코드를 재사용하는 게 아니라 페이지 모양을 재사용
    실제 실행하는 템플릿은 Web Form가장 많이 쓰임
    하나의 단위컨트롤 만들고 싶을 때 웹사이트 정의 컨트롤 사용
    간단한 부분 페이지 확장자는 .ascx

    예제에서 사용된 각각의 부분 페이지
    Default.aspx : 메인
        Navigator.ascx : 상위 메뉴
        Category.ascx : 하부 메뉴
        Catalog.ascx : 상품 진열
        Copylight.ascx : 회사 소개
        About.ascx : 기타 페이지

    새 웹사이트를 추가 (WebUserControl)
    해당 프로젝트 - 새 항목 추가 - 웹 사용자 정의 컨트롤 추가

    총 5개를 추가합니다.
    (
    Navigator.ascx, Category.ascx, Catalog.ascx, Copylight.ascx, About.ascx )

    [그림36-1]


    Navigator.ascx : 상위 메뉴
    Navigator.ascx

    <div>

        <a href="Default.aspx">HOME</a> | <a href="About.aspx">About</a>

    </div>


    [그림36-2]


    Category.ascx : 하부 메뉴
    Category.ascx

    <div>

        <h3>카테고리</h3>

        <ul>

            <li>C#</li>

            <li>ASP.NET</li>

            <li>Silverlight</li>

        </ul>

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

    </div>


    [그림36-3]


    Catalog.ascx : 상품 진열
    Catalog.ascx

    <div>

        <h1>여기는 메인 페이지</h1>   

    </div>


    [그림36-4]


    Copylight.ascx : 회사 소개
    Copyright.ascx

    <div style="text-align:center;">

        Copyright&copy; ASP.NET All right reserved.

    </div>


    [그림36-5]


    Default.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="Copyright.ascx" tagname="Copyright" 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 id="Head1" 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:180px;height:200px;">

                        <uc2:Category ID="Category1" runat="server" />

                    </td>

                    <td>

                        <uc3:Catalog ID="Catalog1" runat="server" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2">

                        <uc4:Copyright ID="Copyright1" runat="server" />

                    </td>

                </tr>

            </table>       

        </div>

        </form>

    </body>

    </html>


    결과화면

    [그림36-6]


    About.ascx : 기타 페이지는 Default.aspx와 같습니다. [소스 참고]


    반응형

    Comments