10 ASP.NET 탐색 컨트롤
웹 프로그램을 만들 때 공통적으로 많이 사용되는 구성요소인 메뉴, 트리뷰 등의 탐색 기능을 제공해주는 탐색 컨트롤에 대해서 알아보겠습니다.
10.1 ASP.NET 탐색 컨트롤의 개요 10.1.1 탐색 컨트롤이란? 웹 사이트에는 상단에 로고(Logo), 로고 밑에 메뉴(Menu), 왼쪽 카테고리 영역에 트리뷰(TreeView), 매 페이지마다 이동 경로를 나타내는 사이트 맵 패스(SiteMapPath;BreadCrumb) 등이 항상 들어간다. 이런 항목들은 매 페이지마다 공통적으로 들어가므로 매번 만드는 대신 웹 사이트 하나에 한 번만 만들어 놓고 매 페이지마다 반복해서 호출하여 사용합니다. 이러한 기능을 손쉽게 구현해주는 컨트롤이 바로 탐색(Navigation) 컨트롤입니다.
10.1.2 탐색 컨트롤의 종류 ASP.NET에서 제공하는 탐색 컨트롤은 다음과 같습니다. 표 11 1 탐색 컨트롤의 종류 탐색 컨트롤 설명 SiteMapPath(사이트 맵 패스) 현재 페이지의 탐색 경로를 출력해주는 컨트롤 Menu(메뉴) 웹 페이지에 메뉴를 구현해주는 컨트롤 TreeView(트리뷰) 계층형 구조의 데이터를 표시해주는 컨트롤
10.1.3 사이트 맵(Web.sitemap) 데이터 저장소 SiteMapPath, Menu, TreeView 컨트롤에서 공통적으로 사용하는 경로에 대한 데이터는 웹 사이트 템플릿 페이지에서 추가되는 데이터 저장소인 Web.sitemap 파일을 통해서 정의할 수 있습니다. 하나의 웹 사이트 전체의 네비게이션을 이 파일에서 미리 정의해서 사용해야 각각의 컨트롤에 해당 경로가 출력됩니다. 다음 그림은 웹 프로젝트 루트에 Web.sitemap 파일을 추가하는 화면입니다. 그림 10 1 사이트맵 파일
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="" title="" description="">
<siteMapNode url="" title="" description="" />
<siteMapNode url="" title="" description="" />
</siteMapNode>
</siteMap>
사이트 맵 파일은 siteMap 루트 앨리먼트를 하나 가지고 있습니다.
<siteMapNode> 앨리먼트는 메뉴 항목 하나를 나타냅니다. 만약 <siteMapNode> 앨리먼트의 하위에 또 다른 <siteMapNode> 앨리먼트가 오면 이는 하위 메뉴 항목으로 나타냅니다.
10.2 [실습] 탐색 컨트롤을 학습할 웹 프로젝트 생성 및 사이트맵 생성 10.2.1 소개 탐색 컨트롤을 학습할 웹 프로젝트를 생성합니다.
10.2.2 따라하기 (1) Visual Studio를 실행하고 ASP.NET 웹 응용 프로그램을 다음과 같이 생성합니다. 이름 위치 ASP.NET 템플릿 선택 폴더 및 핵심 참조 추가 DevNavigationControl C:\ASP.NET ASP.NET 4.6 템플릿-Empty Web Forms
(2) 솔루션 탐색기에서 DevNavigationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음과 같이 웹 프로젝트에 사이트 맵을 추가합니다. 템플릿 이름 이름 사이트 맵 Web.sitemap
그림 10 2 사이트 맵 추가
(3) Web.sitemap 파일에 다음과 같이 입력합니다. 대소문자를 구별해서 정확히 입력해야 합니다.
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >
<siteMapNode url="FrmNavigationControl.aspx" title="홈(Home)"
description="처음으로">
<siteMapNode url="FrmSiteMapPath.aspx" title="사이트맵패스 컨트롤"
description="사이트맵패스 컨트롤"></siteMapNode>
<siteMapNode url="Introduce.aspx" title="사이트 소개(Introduce)"
description="사이트 소개(Introduct)" />
<siteMapNode url="Lecture.aspx" title="강의실(Lecture)"
description="강의실(Lecture)">
<siteMapNode url="Week.aspx" title="이번 주 강의 내용"
description="이번 주 강의 내용" />
<siteMapNode url="Report.aspx" title="과제물 및 시험 제출"
description="과제물 및 시험 제출" />
</siteMapNode>
<siteMapNode url="Blog.aspx" title="블로그(Blog)"
description="블로그(Blog)" />
<siteMapNode url="Forum.aspx" title="포럼(Forum)"
description="포럼(Forum)" />
<siteMapNode url="Board.aspx" title="게시판(Board)"
description="게시판(Board)">
<siteMapNode url="FreeBoard.aspx" title="자유게시판"
description="자유게시판" />
<siteMapNode url="GuestBook.aspx" title="방명록"
description="방명록" />
</siteMapNode>
</siteMapNode>
</siteMap>
이 코드는 웹 프로젝트에서 사용하는 여러 가지 탐색 컨트롤의 메뉴 구조를 담고 있는 XML 파일입니다. Web.sitemap 파일은 필수는 아니지만, 웹 사이트 전체 구조를 한 곳에서 관리할 때 좋다.
10.2.3 마무리 Web.sitemap 파일은 탐색 컨트롤에 적용되어 각각의 컨트롤의 모양에 맞게 텍스트 데이터가 표시되도록 하는 XML 데이터 파일입니다. 이 파일의 사용법은 다음 실습 예제에서 살펴보겠습니다.
10.3 SiteMapPath 컨트롤 10.3.1 소개 사이트 맵 패스 컨트롤은 빵조각(BreadCrumb)이라는 기능을 사용해 웹 페이지에서 현재 어느 위치에 와 있는지 해당 콘텐츠 상단에 표시합니다.
10.3.2 SiteMapPath 컨트롤의 주요 구성 요소 주요 속성 설명 ParentLevelsDisplayed 사이트 탐색 경로를 몇 단계까지 출력할지 설정. 기본값은 -1. 2로 설정하면 부모 경로를 2단계 상위까지만 표현 ShowToolTips 해당 링크에 마우스를 올렸을 때 툴팁을 보여줄지 설정 PathDirection 탐색 경로를 표현하는 순서를 결정. 부모에서 자식으로 또는 자식에서 부모로 표현 PathSeparator Home > Board > Free와 같이 각 노드 간의 구분자
10.4 [실습] SiteMapPath 컨트롤로 사이트 위치 추적하기 10.4.1 소개 웹 사이트의 현재 위치에 대한 정보를 출력해 주는 빵조각 기능을 사이트 맵 파일을 기준으로 설정해보겠습니다.
10.4.2 따라하기 (1) DevNavigationControl 프로젝트를 실행합니다. (2) 솔루션 탐색기에서 DevNavigationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 다음 FrmSiteMapPath.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmSiteMapPath.aspx
(3) FrmSiteMapPath.aspx 페이지에 다음과 같이 입력합니다. 다른 설정 없이 웹 페이지에 SiteMapPath 컨트롤만 등록해 놓은 상태입니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmSiteMapPath.aspx.cs" Inherits="DevNavigationControl.FrmSiteMapPath" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<div>
<asp:SiteMapPath ID="SiteMapPath1" runat="server"></asp:SiteMapPath>
</div>
<div>
사이트맵패스 컨트롤
</div>
</div>
</form>
</body>
</html>
(4) FrmSiteMapPath.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
(5) FrmSiteMapPath.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 10 3 FrmSiteMapPath.aspx 페이지 실행 결과
Web.sitemap 파일의 <siteMapNode> 앨리먼트 중에서 url 속성이 "FrmSiteMapPath.aspx"로 지정된 title 속성인 "사이트맵패스 컨트롤"인데, SiteMapPath 컨트롤은 이 Web.sitemap의 정보를 바탕으로 현재 실행되는 페이지가 Web.sitemap에 정의된 경로의 페이지라면 그에 맞는 앨리먼트를 찾아서 title 값을 화면에 출력시켜줍니다. 앞의 그림과 같이 홈(Home)으로 이동하는 탐색 경로와 함께 웹 폼이 실행됩니다. 사이트 맵 패스 컨트롤은 특별히 다른 속성을 지정하지 않아도 Web.sitemap에서 지정된 파일에 컨트롤이 등록되면 자동으로 Web.sitemap의 데이터를 출력시켜줍니다.
10.4.3 마무리 사이트 맵 패스 컨트롤의 장점은 Web.sitemap에 정확한 데이터만 저장해 놓는다면 해당 페이지에 사이트 맵 컨트롤이 등록되었을 때 자동으로 사이트 맵 패스를 출력한다는 점입니다.
10.5 Menu 컨트롤 10.5.1 소개 메뉴 컨트롤은 웹 사이트에서 자주 보는 메뉴를 아주 손쉽게 구축할 수 있습니다. 또한, 앞서 살펴본 Web.sitemap에서 데이터를 가져오거나, 메뉴 컨트롤 자체의 컬렉션 편집기를 사용하여 메뉴 항목을 구성하거나, SQL Server와 같은 데이터베이스의 데이터를 기준으로 메뉴 항목을 만드는 등 여러 가지 기능을 구현할 수 있습니다.
10.5.2 Menu 컨트롤의 주요 구성 요소 주요 속성 설명 Items 메뉴의 각 항목을 만드는 컬렉션 DataSourceID 메뉴의 각 항목을 컬렉션 편집기를 사용하지 않고 Web.sitemap 또는 DB로부터 가져올 때 사용할 데이터 원본 개체를 지정 StaticDisplayLevels 상위 메뉴에 마우스를 올렸을 때 몇 단계 하위 메뉴까지 출력될지 결정 Orientation 메뉴의 출력 형태를 세로 또는 가로로 설정
10.6 [실습] Menu 컨트롤을 사용한 사이트 내비게이션 구축 10.6.1 소개 웹 사이트에 공통적으로 사용되는 메뉴를 구축해보겠습니다.
10.6.2 따라하기 (1) DevNavigationControl 프로젝트를 실행합니다. (2) 솔루션 탐색기에서 DevNavigationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 FrmMenu.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmMenu.aspx
(3) FrmMenu.aspx 페이지에 다음과 같이 입력합니다. 메뉴 컨트롤은 다른 ASP.NET 컨트롤과 마찬가지로 직접 소스 레벨에서 값을 입력해줄 수 있습니다. 또는 해당 컨트롤에 커서를 두고 [Ctrl] + [.] 단축키를 사용해서 <스마트 태스크> 창을 띄우면 더욱 쉽게 메뉴 항목을 입력할 수 있습니다. 이 책에서는 태그에 직접 입력하는 방식을 사용하겠습니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmMenu.aspx.cs" Inherits="DevNavigationControl.FrmMenu" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="사이트맵패스 컨트롤" Value="SiteMapPath"
NavigateUrl="~/FrmSiteMapPath.aspx"></asp:MenuItem>
<asp:MenuItem Text="게시판" Value="게시판">
<asp:MenuItem Text="공지사항" Value="공지사항"></asp:MenuItem>
<asp:MenuItem Text="자유게시판" Value="자유게시판"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="강의실" Value="강의실"></asp:MenuItem>
</Items>
</asp:Menu>
</div>
</form>
</body>
</html>
<참고> Menu 컨트롤을 스마트 태스크 창에서 편집하기 다음 그림과 같이 Menu 컨트롤에 커서를 두고 [Ctrl] + [.] 단축키를 사용해서 스마트 태스크 창을 열면 <메뉴 항목 편집> 링크 메뉴를 클릭해서 각각의 메뉴를 편집할 수 있습니다.
다음은 Visual Studio에서 제공하는 <메뉴 항목 편집기>다.
</참고>
(4) FrmMenu.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
(5) FrmMenu.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다.
그림 10 4 FrmMenu.aspx 페이지 실행 결과
10.6.3 마무리 Menu 컨트롤을 사용해서 간단하게 웹 페이지에 메뉴를 구성하는 방법을 학습했습니다.
10.7 TreeView 컨트롤 10.7.1 소개 트리뷰 컨트롤은 계층형 구조의 데이터를 표시해주는 컨트롤입니다.
10.7.2 TreeView 컨트롤의 주요 구성 요소 주요 속성 설명 Nodes 트리뷰의 각 항목을 만드는 컬렉션 DataSourceID 트리뷰의 각 항목을 컬렉션 편집기를 사용하지 않고 Web.sitemap 또는 DB에서 가져오고자 할 때 사용할 데이터 원본 개체를 지정 ShowCheckBoxes 트리뷰 컨트롤의 각 항목 옆에 체크박스를 표시할지 설정 ShowLines 항목 간의 연결선을 표시할지 설정 ImageSet 트리뷰 컨트롤에 출력될 아이콘 이미지의 형태 결정 SelectedNodeChanged 트리뷰 컨트롤의 특정 항목을 선택할 때 발생
10.8 [실습] TreeView 컨트롤을 사용하여 사이트 탐색하기 10.8.1 소개 사이트를 탐색하는 TreeView(트리뷰) 기능을 구현해보겠습니다.
10.8.2 따라하기 (1) DevNavigationControl 프로젝트를 실행합니다. (2) 솔루션 탐색기에서 DevNavigationControl 웹 프로젝트에 마우스 오른쪽 버튼을 클릭하여 <추가 > 새 항목> 메뉴를 클릭한 후 FrmTreeView.aspx라는 이름으로 웹 프로젝트에 웹 폼을 추가합니다. 템플릿 이름 이름 웹 폼 FrmTreeView.aspx
(3) FrmTreeView.aspx 페이지에 다음과 같이 입력합니다. 트리뷰 컨트롤도 메뉴 컨트롤과 마찬가지로 직접 소스 레벨에서 값을 입력해줄 수도 있고 해당 컨트롤의 커서를 두고 [Ctrl] + [.] 단축키를 사용해서 <스마트 태스크> 창을 띄워서 노드 항목을 더욱 쉽게 입력할 수도 있습니다. 다만, 이 책에서는 태그에 직접 입력하는 방식을 사용하도록 하겠습니다.
<%@ Page Language="C#" AutoEventWireup="true"
CodeBehind="FrmTreeView.aspx.cs" Inherits="DevNavigationControl.FrmTreeView" %>
<!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>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TreeView ID="TreeView1" runat="server">
<Nodes>
<asp:TreeNode Text="Home" Value="Home">
<asp:TreeNode Text="게시판" Value="게시판"></asp:TreeNode>
<asp:TreeNode Text="강의실" Value="강의실"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
</asp:TreeView>
<hr />
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
<asp:TreeView ID="TreeView2" runat="server" ImageSet="XPFileExplorer"
DataSourceID="SiteMapDataSource1"></asp:TreeView>
</div>
</form>
</body>
</html>
첫 번째 TreeView 컨트롤은 선언적 방식으로 직접 태그를 입력해서 각각의 항목을 만들어내는 내용입니다. 두 번째 TreeView 컨트롤은 앞서 살펴본 Web.sitemap의 내용을 자동으로 읽어오는 SiteMapDataSource 컨트롤을 사용하여 TreeView 컨트롤에서 DataSourceID 속성으로 값을 지정해서 Web.sitemap 파일에 지정된 형태대로 TreeView 컨트롤이 자동 실행되도록 설정해보았습니다. 다음 그림과 같이 TreeView 컨트롤에서 <스마트 태스크> 창을 열어서 <노드 편집> 링크 메뉴를 클릭해서 각각의 메뉴를 편집할 수도 있습니다. 그림 10 5 TreeView 컨트롤의 스마트 태스크
다음은 Visual Studio에서 제공하는 <노드 편집기>다. 그림 10 6 TreeView 노드 편집기
(4) FrmTreeView.aspx.cs 파일은 따로 코드를 작성하지 않습니다.
(5) FrmTreeView.aspx에 마우스 오른쪽 버튼을 클릭하여 <시작 페이지로 설정> 메뉴를 선택하고, [Ctrl]+[F5]를 눌러 실행하면 웹 브라우저에 다음과 같이 출력됩니다. 그림 10 7 FrmTreeView.aspx 페이지 실행 결과
10.8.3 마무리 ASP.NET 1.0과 1.1 버전을 사용할 때는 메뉴 컨트롤을 따로 제공하지 않았다. 그래서 추가로 제공되는 무료 컨트롤을 검색하여 사용했습니다. 2.0 버전부터는 해당 웹 사이트에 필요한 기능을 대부분 제공하여 어떻게 웹 사이트를 구성할 것인지에 집중할 수 있었습니다. 다만, 최근 웹 프로그래밍 추세에 따르면 ASP.NET에서 기본으로 제공하는 메뉴 컨트롤 보다는 jQuery, Bootstrap과 같은 클라이언트 측 JavaScript 라이브러리에서 제공하는 메뉴 등을 더 많이 사용합니다. 이 부분은 독자들의 선택에 달려 있습니다.
10.9 ScriptManager와 UpdatePanel 컨트롤
UpdatePanel 컨트롤은 각각의 컨트롤의 ClientIDMode=”Static”일 때에는 실행되지 않습니다.
10.9.1 UpdatePanel과 ASP.NET AJAX의 포스트백시 자바스크립트 재 바인딩
<script>
$(function () {
// 툴팁과 팝오버 메뉴 설정
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
})
// ASP.NET AJAX 사용시 포스트백 후에 특정 자바스크립트 코드 재바인딩
function pageLoad(sender, args)
{
if (args.get_isPartialLoad())
{
// 툴팁과 팝오버 메뉴 설정
$('[data-toggle="tooltip"]').tooltip();
$('[data-toggle="popover"]').popover();
}
}
</script>