9. FrmUserControl.aspx 페이지 영역 네 군데에 앞서 작업한 웹 폼 사용자 정의 컨트롤 네 개를 등록한다. 솔루션 탐색기에서 마우스로 선택한 후 마우스 끌어 놓기로 웹 폼의 적절한 위치에 등록할 수 있다.
내비게이터를 예로 들면 ‘내비게이터 들어오는 곳’ 텍스트를 지우고, 솔루션 탐색기에서 NavigatorUserControl.ascx 파일을 드래그해 텍스트 있던 곳에 떨어뜨려 놓는다. 다음 코드 전체를 직접 타이핑해도 되지만, ASCX 파일을 드래그해서 특정 소스 영역에 드롭하면 페이지 상단에 Register 지시문이 자동으로 추가되며 해당 영역에서 부분 페이지가 실행된다.
다음 코드는 웹 폼에 웹 폼 사용자 정의 컨트롤 네 개가 등록된 후의 모습을 보여준다. 테두리를 빨간색으로 강조하는 스타일시트 코드를 추가했다. 각각의 웹 폼 사용자 정의 컨트롤 포함 시 Src 속성의 경로는 현재는 프로젝트 루트 경로를 사용하였지만, 만약 같은 경로에 있는 파일을 포함하려면 ~/ 대신에 ./를 사용하면 된다.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="FrmUserControl.aspx.cs" Inherits="DevUserControl.FrmUserControl" %> <%@ Register Src="~/NavigatorUserControl.ascx" TagPrefix="uc1" TagName="NavigatorUserControl" %> <%@ Register Src="~/CategoryUserControl.ascx" TagPrefix="uc1" TagName="CategoryUserControl" %> <%@ Register Src="~/CatalogUserControl.ascx" TagPrefix="uc1" TagName="CatalogUserControl" %> <%@ Register Src="~/CopyrightUserControl.ascx" TagPrefix="uc1" TagName="CopyrightUserControl" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>웹 사이트 뼈대 만들기</title> <link href="Content/bootstrap.css" rel="stylesheet" /> <style> div { border: 1px solid red; padding: 10px; } </style> </head> <body> <form id="form1" runat="server"> <div class="container"> <div class="row"> <div class="col-md-12"> <uc1:NavigatorUserControl runat="server" ID="NavigatorUserControl" /> </div> </div> <div class="row" style="height: 200px;"> <div class="col-md-3"> <uc1:CategoryUserControl runat="server" ID="CategoryUserControl" /> </div> <div class="col-md-9"> <uc1:CatalogUserControl runat="server" ID="CatalogUserControl" /> </div> </div> <div class="row"> <div class="col-md-12"> <uc1:CopyrightUserControl runat="server" ID="CopyrightUserControl" /> </div> </div> </div> </form> </body> </html>
웹 폼에 웹 폼 사용자 정의 컨트롤 등록 시 Register 지시문은 자동으로 생성된다. 위 소스 내용 그대로 경로를 잘 맞춰 입력해도 결과는 같다.