WebUserControl (웹 사용자 정의 컨트롤(=부분 페이지))
.NET프로그래밍/ASP.NET 3.5 SP1 2009. 10. 14. 09:39 |* WebUserControl (웹 사용자 정의 컨트롤)은 "각각의 부분 페이지"를 나타내며
"확장자명"은 "*.ascx"이다.
아래의 "Default.aspx"의 디자인에 테이블의 형태의 "웹 폼(Web Form)"틀 안에 각각의 "WebUserControl(= 웹 사용자 정의 컨트롤, 부분페이지)"를 넣을 것을 그려보았다.
==> Default.aspx 소스코드
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="1" width="100%">
<tr>
<td colspan="2">Navigator.ascx</td>
</tr>
<tr>
<td style="width:180px;height:200px;">Category.ascx</td>
<td>Catalog.ascx(=Content)</td>
</tr>
<tr>
<td colspan="2">Copyright.ascx</td>
</tr>
</table>
</div>
</form>
</body>
</html>
"웹 폼(Web Form)"인 "Default.aspx"에서 테이블의 형태의 틀 안에 각각의 "WebUserControl(= 부분페이지)"를 넣기 위해 아래그림과 같이 "Navigator.ascx"/"Category.ascx"/"Catalog.ascx"/"Copyright.ascx"라는 이름으로 "웹 사용자 정의 컨트롤"을 각각 생성한다.(아래그림에서는 4가지중 "Category.ascx"를 만드는 그림만 나타내었다.)
"Navigator.ascx"/"Category.ascx"/"Catalog.ascx"/"Copyright.ascx"라는 이름으로 "WebUserControl"을 모두 생성한 후 각각 "Default.aspx"에 "부분페이지(WebUserControl)"를
넣는 과정을 한다.(각각의 WebUserControl의 코드에 내용(코드) 추가후 "Default.aspx"의 코드도 수정하는 작업을 해야 함.)
==> Navigator.ascx 소스코드
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Navigator.ascx.cs" Inherits="Navigator" %>
<div>
<a href="Default.aspx">HOME</a> | <a href="About.aspx">About</a>
</div>
==> Category.ascx 소스코드
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Category.ascx.cs" Inherits="Category" %>
<div>
<h3>카테고리</h3>
<ul>
<li>C#</li>
<li>ASP.NET</li>
<li>Silverlight</li>
</ul>
<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>
</div>
==> Catalog.ascx 소스코드
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Catalog.ascx.cs" Inherits="Catalog" %>
<div>
<h1>여기는 메인 페이지</h1>
</div>
==> Copyright.ascx 소스코드
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Copyright.ascx.cs" Inherits="Copyright" %>
<div style="text-align:center;">
Copyright© ASP.NET All right reserved.
</div>
==> 수정한 "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>
"웹 폼"파일인 "Default.aspx"와 비교해보기위한 파일로 "About.aspx"라는 이름의 "웹 폼(Web Form)"파일을 아래그림과 같이 생성한다.(다른 웹폼페이지를 만들었을 경우 규격을 달리했을경우 "클라이언트"가 보기에 불규칙하게 보이는 것을 보여주기 위한 예제로 "About.aspx"라는 "웹폼"을 하나 더 만들어서 "Default.aspx"라는 "웹폼"과 비교해 본 것이다.)
"About.aspx"파일을 생성한 후 코드를 작성하는데, "Default.aspx"소스코드에서 일부분을 수정한 내용의 코드이다.
==> About.aspx 소스파일 및 디자인(형광펜으로 표시된 부분이 "Default.aspx"의 소스코드와 다른부분이다.(= "Default.aspx"의 소스코드에서 바꾼 부분이다.))
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="About.aspx.cs" Inherits="About" %>
<%@ Register src="Navigator.ascx" tagname="Navigator" tagprefix="uc1" %>
<%@ Register src="Category.ascx" tagname="Category" tagprefix="uc2" %>
<%@ 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:200px;height:200px;">
<uc2:Category ID="Category1" runat="server" />
</td>
<td>
<h3>여기는 소개 페이지입니다.</h3>
</td>
</tr>
<tr>
<td colspan="2">
<uc4:Copyright ID="Copyright1" runat="server" />
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
[About.aspx] 디자인
--> "Navigator.ascx 소스코드"에서 <a href="About.aspx">About</a> 로 코드를 작성하여 링크를 걸어서, 아래그림의 "Default.aspx"페이지에서 "Navigator.ascx 부분"의 링크가 걸린 "About"을 누르면, "About.aspx 웹 폼 페이지"가 열린다.
--> [Default.aspx] 디자인. 바로위의 그림인 "[About.aspx] 디자인"과 비교해보면 너비(Width)도 같지 않으며 "Catalog.ascx부분 페이지"에서의 "폰트사이즈"도 서로 달라서 보기에도 불규칙해 보이는 것을 알수 있다.
[실행결과]
--> 실행하면 바로 위의 그림인 "[Default.aspx] 디자인"그림과 "[About.aspx] 디자인"의 그림결과와 동일하다.
--> 실행 후 웹 페이지에서의 첫 화면인 "[Default.aspx] 디자인"그림.
웹페이지에서의 "About.aspx" 화면. 바로위의 그림인 "Default.aspx"페이지에서 "Navigator.ascx 부분"의 링크가 걸린 "About"을 누르면, "About.aspx 웹 페이지"가 열린다.
<참고화면>
--> "솔루션 탐색기"창에서 "Default.aspx" / "About.aspx" / "Navigator.ascx" / "Category.ascx" / "Catalog.ascx" / "Copyright.ascx"파일이 모두 생성된 화면.
'.NET프로그래밍 > ASP.NET 3.5 SP1' 카테고리의 다른 글
| 테마(Theme)와 스킨(Skin) (0) | 2009.10.14 |
|---|---|
| 마스터페이지(*.master) (0) | 2009.10.14 |
| WebUpload(자료실 게시판) (0) | 2009.10.14 |
| FrmValidationSummary - '예외(오류)메세지'를 한 곳에 모아서 따로 보여주거나 메세지박스에 출력하는 유효성 검사 컨트롤 (0) | 2009.10.13 |
| FrmCustomValidator - 아이디 글자수 체크하는 유효성 검사 컨트롤 (0) | 2009.10.13 |