마스터 페이지 및 사이트 탐색(VB)Master Pages and Site Navigation (VB)

Scott Mitchellby Scott Mitchell

샘플 앱 다운로드 또는 PDF 다운로드Download Sample App or Download PDF

사용자에 게 친숙 한 웹 사이트의 한 가지 일반적인 특징은 일관 된 사이트 전체 페이지 레이아웃 및 탐색 구성표를 갖는 것입니다.One common characteristic of user-friendly websites is that they have a consistent, site-wide page layout and navigation scheme. 이 자습서에서는 쉽게 업데이트할 수 있는 모든 페이지에서 일관 된 모양과 느낌을 만드는 방법을 살펴봅니다.This tutorial looks at how you can create a consistent look and feel across all pages that can easily be updated.

소개Introduction

사용자에 게 친숙 한 웹 사이트의 한 가지 일반적인 특징은 일관 된 사이트 전체 페이지 레이아웃 및 탐색 구성표를 갖는 것입니다.One common characteristic of user-friendly websites is that they have a consistent, site-wide page layout and navigation scheme. ASP.NET 2.0에는 사이트 전체 페이지 레이아웃 및 탐색 구성표 (마스터 페이지 및 사이트 탐색)를 구현 하는 작업을 크게 간소화 하는 두 가지 새로운 기능이 도입 되었습니다.ASP.NET 2.0 introduces two new features that greatly simplify implementing both a site-wide page layout and navigation scheme: master pages and site navigation. 마스터 페이지를 사용 하면 개발자가 지정 된 편집 가능한 영역으로 사이트 전체 템플릿을 만들 수 있습니다.Master pages allow for developers to create a site-wide template with designated editable regions. 그런 다음이 템플릿을 사이트의 ASP.NET 페이지에 적용할 수 있습니다.This template can then be applied to ASP.NET pages in the site. 이러한 ASP.NET 페이지는 마스터 페이지의 지정 된 편집 가능한 영역에 대 한 콘텐츠만 제공 해야 합니다. 마스터 페이지의 다른 모든 태그는 마스터 페이지를 사용 하는 모든 ASP.NET 페이지에서 동일 합니다.Such ASP.NET pages need only provide content for the master page's specified editable regions all other markup in the master page is identical across all ASP.NET pages that use the master page. 이 모델을 사용 하면 개발자가 사이트 전체 페이지 레이아웃을 정의 하 고 중앙 집중화 하 여 쉽게 업데이트할 수 있는 모든 페이지에서 일관 된 모양과 느낌을 쉽게 만들 수 있습니다.This model allows developers to define and centralize a site-wide page layout, thereby making it easier to create a consistent look and feel across all pages that can easily be updated.

사이트 탐색 시스템 은 페이지 개발자가 프로그래밍 방식으로 쿼리할 수 있도록 사이트 맵과 해당 사이트 맵에 대 한 API를 정의 하는 메커니즘을 제공 합니다.The site navigation system provides both a mechanism for page developers to define a site map and an API for that site map to be programmatically queried. 새 탐색 웹에서 메뉴, TreeView 및 SiteMapPath 컨트롤을 사용 하면 일반적인 탐색 사용자 인터페이스 요소에서 사이트 맵의 전체 또는 일부를 쉽게 렌더링할 수 있습니다.The new navigation Web controls the Menu, TreeView, and SiteMapPath make it easy to render all or part of the site map in a common navigation user interface element. 기본 사이트 탐색 공급자를 사용 합니다. 즉, 사이트 맵은 XML 형식 파일에 정의 됩니다.We'll be using the default site navigation provider, meaning that our site map will be defined in an XML-formatted file.

이러한 개념을 설명 하 고 자습서 웹 사이트를 더 사용할 수 있도록 하려면 사이트 전체 페이지 레이아웃 정의, 사이트 맵 구현 및 탐색 UI 추가 단원을 살펴보겠습니다.To illustrate these concepts and make our tutorials website more usable, let's spend this lesson defining a site-wide page layout, implementing a site map, and adding the navigation UI. 이 자습서를 마치면 자습서 웹 페이지를 빌드하기 위한 세련 된 웹 사이트 디자인이 제공 됩니다.By the end of this tutorial we'll have a polished website design for building our tutorial web pages.

이 자습서의 최종 결과 The End Result of This Tutorial

그림 1:이 자습서의 최종 결과 (전체 크기 이미지를 보려면 클릭)Figure 1: The End Result of This Tutorial (Click to view full-size image)

1 단계: 마스터 페이지 만들기Step 1: Creating the Master Page

첫 번째 단계는 사이트의 마스터 페이지를 만드는 것입니다.The first step is to create the master page for the site. 현재 웹 사이트는 형식화 된 데이터 집합 (Northwind.xsd, App_Code 폴더), BLL 클래스 (ProductsBLL.vb, CategoriesBLL.vb등), 데이터베이스 (App_Code 폴더의NORTHWND.MDF), 구성 파일 (App_Data) 및 CSS 스타일 시트 파일 (Web.config) 으로만 구성 됩니다.Styles.cssRight now our website consists of only the Typed DataSet (Northwind.xsd, in the App_Code folder), the BLL classes (ProductsBLL.vb, CategoriesBLL.vb, and so on, all in the App_Code folder), the database (NORTHWND.MDF, in the App_Data folder), the configuration file (Web.config), and a CSS stylesheet file (Styles.css). 앞의 자습서에서 이러한 예제를 더 자세히 reexamining 하기 때문에 처음 두 자습서에서 DAL 및 BLL을 사용 하는 것을 보여 주는 해당 페이지와 파일을 정리 했습니다.I cleaned out those pages and files demonstrating using the DAL and BLL from the first two tutorials since we will be reexamining those examples in greater detail in future tutorials.

프로젝트의 파일

그림 2: 프로젝트의 파일Figure 2: The Files in Our Project

마스터 페이지를 만들려면 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭 하 고 새 항목 추가를 선택 합니다.To create a master page, right-click on the project name in the Solution Explorer and choose Add New Item. 그런 다음 템플릿 목록에서 마스터 페이지 유형을 선택 하 고 Site.master이름을로 지정한 다음Then select the Master Page type from the list of templates and name it Site.master.

웹 사이트에 새 마스터 페이지를 추가 Add a New Master Page to the Website

그림 3: 웹 사이트에 새 마스터 페이지 추가 (전체 크기 이미지를 보려면 클릭)Figure 3: Add a New Master Page to the Website (Click to view full-size image)

마스터 페이지에서 사이트 전체 페이지 레이아웃을 정의 합니다.Define the site-wide page layout here in the master page. 디자인 뷰를 사용 하 여 필요한 모든 레이아웃 또는 웹 컨트롤을 추가 하거나 소스 뷰에서 직접 태그를 추가할 수 있습니다.You can use the Design view and add whatever Layout or Web controls you need, or you can manually add the markup by hand in the Source view. 내 마스터 페이지에서 css 스타일 시트 를 사용 하 여 외부 파일 Style.css에 정의 된 css 설정을 사용 하 여 위치를 지정 하 고 스타일을 지정 합니다.In my master page I use cascading style sheets for positioning and styles with the CSS settings defined in the external file Style.css. 아래에 표시 된 태그를 구분할 수는 없지만, 탐색 <div>의 내용이 왼쪽에 표시 되 고 너비가 200 픽셀이 고정 되도록 하는 것을 의미 합니다.While you cannot tell from the markup shown below, the CSS rules are defined such that the navigation <div>'s content is absolutely positioned so that it appears on the left and has a fixed width of 200 pixels.

Site.masterSite.master

<%@ Master Language="VB" AutoEventWireup="true"
    CodeFile="Site.master.vb" Inherits="Site" %>

<!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>Working with Data Tutorials</title>
    <link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div id="wrapper">

        <form id="form1" runat="server">

            <div id="header">
                <span class="title">Working with Data Tutorials</span>
                <span class="breadcrumb">
                 TODO: Breadcrumb will go here...</span>
            </div>

            <div id="content">
                <asp:contentplaceholder id="MainContent"
                  runat="server">
                  <!-- Page-specific content will go here... -->
                </asp:contentplaceholder>
            </div>

            <div id="navigation">
                TODO: Menu will go here...
            </div>
        </form>
    </div>
</body>
</html>

마스터 페이지는 정적 페이지 레이아웃 및 마스터 페이지를 사용 하는 ASP.NET 페이지에서 편집할 수 있는 영역을 모두 정의 합니다.A master page defines both the static page layout and the regions that can be edited by the ASP.NET pages that use the master page. 이러한 콘텐츠 편집 가능한 영역은 ContentPlaceHolder 컨트롤에 의해 표시 됩니다 .이 컨트롤은 콘텐츠 <div>내에서 볼 수 있습니다.These content editable regions are indicated by the ContentPlaceHolder control, which can be seen within the content <div>. 마스터 페이지에는 단일 ContentPlaceHolder (MainContent)가 있지만 마스터 페이지의 ContentPlaceHolders 표시자는 여러 개 있을 수 있습니다.Our master page has a single ContentPlaceHolder (MainContent), but master page's may have multiple ContentPlaceHolders.

위에 입력 된 태그를 사용 하 여 디자인 뷰로 전환 하면 마스터 페이지의 레이아웃이 표시 됩니다.With the markup entered above, switching to the Design view shows the master page's layout. 이 마스터 페이지를 사용 하는 모든 ASP.NET 페이지는 MainContent 영역에 대 한 태그를 지정 하는 기능과 함께이 균일 한 레이아웃을 갖게 됩니다.Any ASP.NET pages that use this master page will have this uniform layout, with the ability to specify the markup for the MainContent region.

디자인 뷰를 통해 볼 때 마스터 페이지 The Master Page, When Viewed Through the Design View

그림 4: 디자인 뷰를 통해 볼 때 마스터 페이지 (전체 크기 이미지를 보려면 클릭)Figure 4: The Master Page, When Viewed Through the Design View (Click to view full-size image)

2 단계: 웹 사이트에 홈 페이지 추가Step 2: Adding a Homepage to the Website

마스터 페이지를 정의한 상태에서 웹 사이트에 대 한 ASP.NET 페이지를 추가할 준비가 되었습니다.With the master page defined, we're ready to add the ASP.NET pages for the website. 웹 사이트의 홈페이지 인 Default.aspx를 추가 하는 것부터 시작 해 보겠습니다.Let's start by adding Default.aspx, our website's homepage. 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭 하 고 새 항목 추가를 선택 합니다.Right-click on the project name in the Solution Explorer and choose Add New Item. 템플릿 목록에서 Web Form 옵션을 선택 하 고 파일 이름을 Default.aspx로 합니다.Pick the Web Form option from the template list and name the file Default.aspx. 또한 "마스터 페이지 선택" 확인란을 선택 합니다.Also, check the "Select master page" checkbox.

새 웹 폼을 추가 마스터 페이지 선택 확인란을 선택 합니다.Add a New Web Form, Checking the Select master page Checkbox

그림 5: 마스터 페이지 선택 확인란을 선택 하 여 새 웹 폼 추가 (전체 크기 이미지를 보려면 클릭)Figure 5: Add a New Web Form, Checking the Select master page Checkbox (Click to view full-size image)

확인 단추를 클릭 한 후이 새 ASP.NET 페이지에서 사용 해야 하는 마스터 페이지를 선택 하 라는 메시지가 표시 됩니다.After clicking the OK button, we're asked to choose what master page this new ASP.NET page should use. 프로젝트에 마스터 페이지를 여러 개 포함할 수 있지만 여기에는 1 개만 있습니다.While you can have multiple master pages in your project, we have only one.

이 ASP.NET 페이지에서 사용 해야 하는 마스터 페이지 선택 합니다.Choose the Master Page this ASP.NET Page Should Use

그림 6:이 ASP.NET 페이지에서 사용 해야 하는 마스터 페이지 선택 (전체 크기 이미지를 보려면 클릭)Figure 6: Choose the Master Page this ASP.NET Page Should Use (Click to view full-size image)

마스터 페이지를 선택 하면 새 ASP.NET 페이지에 다음 태그가 포함 됩니다.After picking the master page, the new ASP.NET pages will contain the following markup:

Default.aspxDefault.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    Inherits="_Default" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
  Runat="Server">
</asp:Content>

@Page 지시문에는 사용 된 마스터 페이지 파일에 대 한 참조가 있습니다 (MasterPageFile="~/Site.master"). ASP.NET 페이지의 태그에는 마스터 페이지에 정의 된 각 ContentPlaceHolder 컨트롤에 대 한 콘텐츠 컨트롤이 포함 되어 있으며, 컨트롤의 ContentPlaceHolderID는 특정 ContentPlaceHolder에 콘텐츠 컨트롤을 매핑합니다.In the @Page directive there's a reference to the master page file used (MasterPageFile="~/Site.master"), and the ASP.NET page's markup contains a Content control for each of the ContentPlaceHolder controls defined in the master page, with the control's ContentPlaceHolderID mapping the Content control to a specific ContentPlaceHolder. 콘텐츠 컨트롤은 해당 ContentPlaceHolder 표시 하려는 태그를 저장 하는 위치입니다.The Content control is where you place the markup you want to appear in the corresponding ContentPlaceHolder. @Page 지시문의 Title 특성을 홈으로 설정 하 고 콘텐츠 컨트롤에 몇 가지 환영 콘텐츠를 추가 합니다.Set the @Page directive's Title attribute to Home and add some welcoming content to the Content control:

Default.aspxDefault.aspx

<%@ Page Language="VB" MasterPageFile="~/Site.master"
    AutoEventWireup="true" CodeFile="Default.aspx.vb"
    Inherits="_Default" Title="Home" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent"
    Runat="Server">
    <h1>Welcome to the Working with Data Tutorial Site</h1>

    <p>This site is being built as part of a set of tutorials
      that illustrate some of the new data access and databinding
      features in ASP.NET 2.0 and Visual Web Developer.</p>

    <p>Over time, it will include a host of samples that
     demonstrate:</p>

    <ul>
        <li>Building a DAL (data access layer),</li>
        <li>Using strongly typed TableAdapters and DataTables</li>
        <li>Master-Detail reports</li>
        <li>Filtering</li>
        <li>Paging,</li>
        <li>Two-way databinding,</li>
        <li>Editing,</li>
        <li>Deleting,</li>
        <li>Inserting,</li>
        <li>Hierarchical data browsing,</li>
        <li>Hierarchical drill-down,</li>
        <li>Optimistic concurrency,</li>
        <li>And more!</li>
    </ul>
</asp:Content>

@Page 지시문의 Title 특성을 사용 하면 <title> 요소가 마스터 페이지에 정의 되어 있는 경우에도 페이지의 제목을 ASP.NET 페이지에서 설정할 수 있습니다.The Title attribute in the @Page directive allows us to set the page's title from the ASP.NET page, even though the <title> element is defined in the master page. Page.Title를 사용 하 여 프로그래밍 방식으로 제목을 설정할 수도 있습니다.We can also set the title programmatically, using Page.Title. 또한 마스터 페이지의 스타일 시트 (예: Style.css)에 대 한 참조는 ASP.NET 페이지가 마스터 페이지를 기준으로 하는 디렉터리에 관계 없이 모든 ASP.NET 페이지에서 작동 하도록 자동으로 업데이트 됩니다.Also note that the master page's references to stylesheets (such as Style.css) are automatically updated so that they work in any ASP.NET page, regardless of what directory the ASP.NET page is in relative to the master page.

디자인 뷰로 전환 하면 브라우저에서 페이지가 어떻게 표시 되는지 확인할 수 있습니다.Switching to the Design view we can see how our page will look in a browser. ASP.NET 페이지에 대 한 콘텐츠 편집 가능 영역만 편집할 수 있는 경우 마스터 페이지에 정의 된 비 ContentPlaceHolder 태그는 회색으로 표시 됩니다. 디자인 뷰Note that in the Design view for the ASP.NET page that only the content editable regions are editable the non-ContentPlaceHolder markup defined in the master page is grayed out.

ASP.NET 페이지에 대 한 디자인 보기 편집 가능 하 고 편집 가능 하지 않은 영역이 모두 표시 됩니다.The Design View for the ASP.NET Page Shows Both the Editable and Non-Editable Regions

그림 7: ASP.NET 페이지의 디자인 뷰에는 편집 가능 하 고 편집 가능 하지 않은 영역이 모두 표시 됩니다 (전체 크기 이미지를 보려면 클릭).Figure 7: The Design View for the ASP.NET Page Shows Both the Editable and Non-Editable Regions (Click to view full-size image)

브라우저에서 Default.aspx 페이지를 방문 하면 ASP.NET 엔진이 페이지의 마스터 페이지 콘텐츠와 ASP를 자동으로 병합 합니다. NET의 콘텐츠를 통해 병합 된 콘텐츠를 요청 하는 브라우저로 전송 되는 최종 HTML로 렌더링 합니다.When the Default.aspx page is visited by a browser, the ASP.NET engine automatically merges the page's master page content and the ASP.NET's content, and renders the merged content into the final HTML that is sent down to the requesting browser. 마스터 페이지의 콘텐츠가 업데이트 되 면이 마스터 페이지를 사용 하는 모든 ASP.NET 페이지의 콘텐츠는 다음에 요청 될 때 새 마스터 페이지 콘텐츠와 다시 병합 됩니다.When the master page's content is updated, all ASP.NET pages that use this master page will have their content remerged with the new master page content the next time they are requested. 간단히 말해서, 마스터 페이지 모델을 사용 하면 전체 사이트에서 변경 내용이 즉시 반영 되는 단일 페이지 레이아웃 템플릿 (마스터 페이지)을 정의할 수 있습니다.In short, the master page model allows for a single page layout template to be defined (the master page) whose changes are immediately reflected across the entire site.

웹 사이트에 추가 ASP.NET 페이지 추가Adding Additional ASP.NET Pages to the Website

궁극적으로 다양 한 보고 데모를 포함 하는 사이트에 ASP.NET 페이지 스텁을 추가 해 보겠습니다.Let's take a moment to add additional ASP.NET page stubs to the site that will eventually hold the various reporting demos. 총 데모 수가 35 개를 초과 하 게 되므로 스텁 페이지를 모두 만드는 것이 아니라 처음 몇 가지를 만들어 보겠습니다.There will be more than 35 demos in total, so rather than creating all of the stub pages let's just create the first few. 데모를 보다 효율적으로 관리 하기 위해 데모의 많은 범주가 있으므로 범주에 대 한 폴더 추가도 있습니다.Since there will also be many categories of demos, to better manage the demos add a folder for the categories. 지금은 다음 세 개의 폴더를 추가 합니다.Add the following three folders for now:

  • BasicReporting
  • Filtering
  • CustomFormatting

마지막으로 그림 8의 솔루션 탐색기 같이 새 파일을 추가 합니다.Finally, add new files as shown in the Solution Explorer in Figure 8. 각 파일을 추가할 때 "마스터 페이지 선택" 확인란을 선택 해야 합니다.When adding each file, remember to check the "Select master page" checkbox.

다음 파일을 추가 합니다.

그림 8: 다음 파일 추가Figure 8: Add the Following Files

2 단계: 사이트 맵 만들기Step 2: Creating a Site Map

몇 페이지로 구성 된 웹 사이트를 관리 하는 문제 중 하나는 방문자가 사이트를 탐색 하는 간단한 방법을 제공 하는 것입니다.One of the challenges of managing a website composed of more than a handful of pages is providing a straightforward way for visitors to navigate through the site. 먼저 사이트의 탐색 구조를 정의 해야 합니다.To begin with, the site's navigational structure must be defined. 그런 다음이 구조는 메뉴 또는 이동 경로와 같은 탐색 가능한 사용자 인터페이스 요소로 변환 되어야 합니다.Next, this structure must be translated into navigable user interface elements, such as menus or breadcrumbs. 마지막으로, 사이트에 새 페이지를 추가 하 고 기존 페이지를 제거 하면 전체 프로세스를 유지 관리 하 고 업데이트 해야 합니다.Finally, this whole process needs to be maintained and updated as new pages are added to the site and existing ones removed. ASP.NET 2.0 이전에는 개발자가 사이트의 탐색 구조를 만들어 유지 관리 하 고 탐색 가능한 사용자 인터페이스 요소로 변환 하는 기능을가지고 있었습니다.Prior to ASP.NET 2.0, developers were on their own for creating the site's navigational structure, maintaining it, and translating it into navigable user interface elements. 그러나 ASP.NET 2.0를 사용 하 여 개발자는 매우 유연한 기본 제공 사이트 탐색 시스템을 활용할 수 있습니다.With ASP.NET 2.0, however, developers can utilize the very flexible built in site navigation system.

ASP.NET 2.0 사이트 탐색 시스템은 개발자가 사이트 맵을 정의한 다음 프로그래밍 방식 API를 통해이 정보에 액세스할 수 있는 방법을 제공 합니다.The ASP.NET 2.0 site navigation system provides a means for a developer to define a site map and to then access this information through a programmatic API. ASP.NET에는 사이트 맵 데이터를 특정 방식으로 형식이 지정 된 XML 파일에 저장 해야 하는 사이트 맵 공급자가 제공 됩니다.ASP.NET ships with a site map provider that expects site map data to be stored in an XML file formatted in a particular way. 그러나 사이트 탐색 시스템은 공급자 모델 을 기반으로 하기 때문에 사이트 맵 정보를 serialize 하는 다른 방법을 지원 하도록 확장할 수 있습니다.But, since the site navigation system is built on the provider model it can be extended to support alternative ways for serializing the site map information. Jeff Prosise의 문서에서 대기 중인 SQL 사이트 맵 공급자는 사이트 맵을 SQL Server 데이터베이스에 저장 하는 사이트 맵 공급자를 만드는 방법을 보여 줍니다. 또 다른 옵션은 파일 시스템 구조를 기반으로 사이트 맵 공급자를만드는 것입니다.Jeff Prosise's article, The SQL Site Map Provider You've Been Waiting For shows how to create a site map provider that stores the site map in a SQL Server database; another option is to create a site map provider based on the file system structure.

그러나이 자습서에서는 ASP.NET 2.0와 함께 제공 되는 기본 사이트 맵 공급자를 사용 하겠습니다.For this tutorial, however, let's use the default site map provider that ships with ASP.NET 2.0. 사이트 맵을 만들려면 솔루션 탐색기에서 프로젝트 이름을 마우스 오른쪽 단추로 클릭 하 고 새 항목 추가를 선택한 다음 사이트 맵 옵션을 선택 하면 됩니다.To create the site map, simply right-click on the project name in the Solution Explorer, choose Add New Item, and choose the Site Map option. 이름을 Web.sitemap로 두고 추가 단추를 클릭 합니다.Leave the name as Web.sitemap and click the Add button.

프로젝트에 사이트 맵을 추가 Add a Site Map to Your Project

그림 9: 프로젝트에 사이트 맵 추가 (전체 크기 이미지를 보려면 클릭)Figure 9: Add a Site Map to Your Project (Click to view full-size image)

사이트 맵 파일은 XML 파일입니다.The site map file is an XML file. Visual Studio는 사이트 맵 구조에 대해 IntelliSense를 제공 합니다.Note that Visual Studio provides IntelliSense for the site map structure. 사이트 맵 파일은 루트 노드로 <siteMap> 노드를 포함 해야 합니다 .이 노드는 정확히 하나의 <siteMapNode> 자식 요소를 포함 해야 합니다.The site map file must have the <siteMap> node as its root node, which must contain precisely one <siteMapNode> child element. 첫 번째 <siteMapNode> 요소에는 임의 개수의 하위 <siteMapNode> 요소가 포함 될 수 있습니다.That first <siteMapNode> element can then contain an arbitrary number of descendent <siteMapNode> elements.

파일 시스템 구조와 비슷하게 사이트 맵을 정의 합니다.Define the site map to mimic the file system structure. 즉, 3 개의 폴더 각각에 대해 <siteMapNode> 요소를 추가 하 고 다음과 같이 해당 폴더의 각 ASP.NET 페이지에 대해 자식 <siteMapNode> 요소를 추가 합니다.That is, add a <siteMapNode> element for each of the three folders, and child <siteMapNode> elements for each of the ASP.NET pages in those folders, like so:

Web.sitemapWeb.sitemap

<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >

  <siteMapNode url="~/Default.aspx" title="Home" description="Home">
      <siteMapNode title="Basic Reporting"
        url="~/BasicReporting/Default.aspx"
        description="Basic Reporting Samples">
        <siteMapNode url="~/BasicReporting/SimpleDisplay.aspx"
         title="Simple Display"
         description="Displays the complete contents
          of a database table." />
        <siteMapNode url="~/BasicReporting/DeclarativeParams.aspx"
          title="Declarative Parameters"
          description="Displays a subset of the contents
            of a database table using parameters." />
        <siteMapNode url="~/BasicReporting/ProgrammaticParams.aspx"
         title="Setting Parameter Values"
         description="Shows how to set parameter values
          programmatically." />
      </siteMapNode>

      <siteMapNode title="Filtering Reports"
       url="~/Filtering/Default.aspx"
       description="Samples of Reports that Support Filtering">
        <siteMapNode url="~/Filtering/FilterByDropDownList.aspx"
          title="Filter by Drop-Down List"
          description="Filter results using a drop-down list." />
        <siteMapNode url="~/Filtering/MasterDetailsDetails.aspx"
         title="Master-Details-Details"
         description="Filter results two levels down." />
        <siteMapNode url="~/Filtering/DetailsBySelecting.aspx"
          title="Details of Selected Row"
          description="Show detail results for a selected item in a GridView." />
      </siteMapNode>

      <siteMapNode title="Customized Formatting"
         url="~/CustomFormatting/Default.aspx"
         description="Samples of Reports Whose Formats are Customized">
        <siteMapNode url="~/CustomFormatting/CustomColors.aspx"
         title="Format Colors"
         description="Format the grid s colors based
           on the underlying data." />
        <siteMapNode
          url="~/CustomFormatting/GridViewTemplateField.aspx"
          title="Custom Content in a GridView"
          description="Shows using the TemplateField to
          customize the contents of a field in a GridView." />
        <siteMapNode
          url="~/CustomFormatting/DetailsViewTemplateField.aspx"
          title="Custom Content in a DetailsView"
          description="Shows using the TemplateField to customize
           the contents of a field in a DetailsView." />
        <siteMapNode url="~/CustomFormatting/FormView.aspx"
          title="Custom Content in a FormView"
          description="Illustrates using a FormView for a
           highly customized view." />
        <siteMapNode url="~/CustomFormatting/SummaryDataInFooter.aspx"
          title="Summary Data in Footer"
          description="Display summary data in the grids footer." />
      </siteMapNode>

  </siteMapNode>

</siteMap>

사이트 맵은 사이트의 다양 한 섹션을 설명 하는 계층 인 웹 사이트의 탐색 구조를 정의 합니다.The site map defines the website's navigational structure, which is a hierarchy that describes the various sections of the site. Web.sitemap의 각 <siteMapNode> 요소는 사이트의 탐색 구조에 있는 섹션을 나타냅니다.Each <siteMapNode> element in Web.sitemap represents a section in the site's navigational structure.

사이트 맵이 계층 구조 탐색 구조를 나타내는 The Site Map Represents a Hierarchical Navigational Structure

그림 10: 계층 구조 탐색 구조를 나타내는 사이트 맵 (전체 크기 이미지를 보려면 클릭)Figure 10: The Site Map Represents a Hierarchical Navigational Structure (Click to view full-size image)

ASP.NET는 .NET Framework의 사이트 맵 클래스를 통해 사이트 맵 구조를 노출 합니다.ASP.NET exposes the site map's structure through the .NET Framework's SiteMap class. 이 클래스에는 사용자가 현재 방문 하 고 있는 섹션에 대 한 정보를 반환 하는 CurrentNode 속성이 있습니다. RootNode 속성은 사이트 맵 (홈)의 루트를 반환 합니다.This class has a CurrentNode property, which returns information about the section the user is currently visiting; the RootNode property returns the root of the site map (Home, in our site map). CurrentNodeRootNode 속성은 모두 사이트 맵 계층 구조를 전달할 수 있는 ParentNode, ChildNodes, NextSibling, PreviousSibling등의 속성을 포함 하는 SiteMapNode 인스턴스를 반환 합니다.Both the CurrentNode and RootNode properties return SiteMapNode instances, which have properties like ParentNode, ChildNodes, NextSibling, PreviousSibling, and so on, that allow for the site map hierarchy to be walked.

3 단계: 사이트 맵 기반 메뉴 표시Step 3: Displaying a Menu Based on the Site Map

ASP.NET 2.0에서 데이터에 액세스 하는 것은 ASP.NET 1.x와 같이 프로그래밍 방식으로 또는 새 데이터 소스 컨트롤을 통해 선언적으로 수행할 수 있습니다.Accessing data in ASP.NET 2.0 can be accomplished programmatically, like in ASP.NET 1.x, or declaratively, through the new data source controls. SqlDataSource 컨트롤과 같은 몇 가지 기본 제공 데이터 소스 컨트롤이 있습니다. 여기에는 관계형 데이터베이스 데이터 액세스, ObjectDataSource 컨트롤, 클래스의 데이터 액세스 등이 있습니다.There are several built-in data source controls such as the SqlDataSource control, for accessing relational database data, the ObjectDataSource control, for accessing data from classes, and others. 사용자 고유의 사용자 지정 데이터 소스 컨트롤을 만들 수도 있습니다.You can even create your own custom data source controls.

데이터 원본 컨트롤은 ASP.NET 페이지와 기본 데이터 간의 프록시로 사용 됩니다.The data source controls serve as a proxy between your ASP.NET page and the underlying data. 데이터 소스 컨트롤의 검색 된 데이터를 표시 하기 위해 일반적으로 페이지에 다른 웹 컨트롤을 추가 하 고 데이터 소스 컨트롤에 바인딩합니다.In order to display a data source control's retrieved data, we'll typically add another Web control to the page and bind it to the data source control. 웹 컨트롤을 데이터 소스 컨트롤에 바인딩하려면 웹 컨트롤의 DataSourceID 속성을 데이터 소스 컨트롤의 ID 속성 값으로 설정 하기만 하면 됩니다.To bind a Web control to a data source control, simply set the Web control's DataSourceID property to the value of the data source control's ID property.

사이트 맵 데이터로 작업 하는 데 도움이 되도록 ASP.NET에는 웹 사이트의 사이트 맵에 대해 웹 컨트롤을 바인딩할 수 있는 SiteMapDataSource 컨트롤이 포함 되어 있습니다.To aid in working with the site map's data, ASP.NET includes the SiteMapDataSource control, which allows us to bind a Web control against our website's site map. 두 웹 컨트롤 TreeView 및 메뉴는 일반적으로 탐색 사용자 인터페이스를 제공 하는 데 사용 됩니다.Two Web controls the TreeView and Menu are commonly used to provide a navigation user interface. 이러한 두 컨트롤 중 하나에 사이트 맵 데이터를 바인딩하려면 DataSourceID 속성이 적절 하 게 설정 된 TreeView 또는 Menu 컨트롤과 함께 SiteMapDataSource를 페이지에 추가 하기만 하면 됩니다.To bind the site map data to one of these two controls, simply add a SiteMapDataSource to the page along with a TreeView or Menu control whose DataSourceID property is set accordingly. 예를 들어 다음 태그를 사용 하 여 마스터 페이지에 메뉴 컨트롤을 추가할 수 있습니다.For example, we could add a Menu control to the master page using the following markup:

<div id="navigation">
    <asp:Menu ID="Menu1" runat="server"
      DataSourceID="SiteMapDataSource1">
    </asp:Menu>

    <asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>

내보낸 HTML을 보다 세부적으로 제어 하기 위해 다음과 같이 SiteMapDataSource 컨트롤을 Repeater 컨트롤에 바인딩할 수 있습니다.For a finer degree of control over the emitted HTML, we can bind the SiteMapDataSource control to the Repeater control, like so:

<div id="navigation">
    <ul>
        <li><asp:HyperLink runat="server" ID="lnkHome"
         NavigateUrl="~/Default.aspx">Home</asp:HyperLink></li>

        <asp:Repeater runat="server" ID="menu"
          DataSourceID="SiteMapDataSource1">
            <ItemTemplate>
                <li>
                    <asp:HyperLink runat="server"
                    NavigateUrl='<%# Eval("Url") %>'>
                    <%# Eval("Title") %></asp:HyperLink>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>

    <asp:SiteMapDataSource ID="SiteMapDataSource1"
      runat="server" ShowStartingNode="false" />
</div>

SiteMapDataSource 컨트롤은 루트 사이트 맵 노드 (홈, 사이트 맵), 다음 수준 (기본 보고, 보고서 필터링 및 사용자 지정 형식)으로 시작 하 여 한 번에 한 수준으로 사이트 맵 계층 구조를 반환 합니다.The SiteMapDataSource control returns the site map hierarchy one level at a time, starting with the root site map node (Home, in our site map), then the next level (Basic Reporting, Filtering Reports, and Customized Formatting), and so on. SiteMapDataSource를 Repeater에 바인딩하는 경우 반환 되는 첫 번째 수준을 열거 하 고 첫 번째 수준에서 각 SiteMapNode 인스턴스의 ItemTemplate을 인스턴스화합니다.When binding the SiteMapDataSource to a Repeater, it enumerates the first level returned and instantiates the ItemTemplate for each SiteMapNode instance in that first level. SiteMapNode의 특정 속성에 액세스 하기 위해 Eval(propertyName)를 사용할 수 있습니다 .이는 각 SiteMapNodeUrl 및 하이퍼링크 컨트롤에 대 한 Title 속성을 가져오는 방법입니다.To access a particular property of the SiteMapNode, we can use Eval(propertyName), which is how we get each SiteMapNode's Url and Title properties for the HyperLink control.

위의 Repeater 예제는 다음과 같은 태그를 렌더링 합니다.The Repeater example above will render the following markup:

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
      Customized Formatting</a>
</li>

이러한 사이트 맵 노드 (기본 보고, 보고서 필터링 및 사용자 지정 형식)는 첫 번째가 아닌 렌더링 되는 사이트 맵의 두 번째 수준으로 구성 됩니다.These site map nodes (Basic Reporting, Filtering Reports, and Customized Formatting) comprise the second level of the site map being rendered, not the first. 이는 SiteMapDataSource의 ShowStartingNode 속성이 False로 설정 되어 SiteMapDataSource가 루트 사이트 맵 노드를 무시 하 고 대신 사이트 맵 계층 구조에서 두 번째 수준을 반환 하는 것 이기 때문입니다.This is because the SiteMapDataSource's ShowStartingNode property is set to False, causing the SiteMapDataSource to bypass the root site map node and instead begin by returning the second level in the site map hierarchy.

기본 보고에 대 한 자식을 표시 하 고, 보고서를 필터링 하며, 사용자 지정 된 서식 SiteMapNode s를 표시 하려면 초기 Repeater의 ItemTemplate에 다른 리피터를 추가할 수 있습니다.To display the children for the Basic Reporting, Filtering Reports, and Customized Formatting SiteMapNode s, we can add another Repeater to the initial Repeater's ItemTemplate. 이 두 번째 Repeater는 다음과 같이 SiteMapNode 인스턴스의 ChildNodes 속성에 바인딩됩니다.This second Repeater will be bound to the SiteMapNode instance's ChildNodes property, like so:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1">
    <ItemTemplate>
        <li>
            <asp:HyperLink runat="server"
             NavigateUrl='<%# Eval("Url") %>'>
             <%# Eval("Title") %></asp:HyperLink>

            <asp:Repeater runat="server"
             DataSource="<%# CType(Container.DataItem,
             SiteMapNode).ChildNodes %>">
                <HeaderTemplate>
                    <ul>
                </HeaderTemplate>

                <ItemTemplate>
                    <li>
                        <asp:HyperLink runat="server"
                         NavigateUrl='<%# Eval("Url") %>'>
                         <%# Eval("Title") %></asp:HyperLink>
                    </li>
                </ItemTemplate>

                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </li>
    </ItemTemplate>
</asp:Repeater>

이러한 두 반복기는 다음과 같은 태그를 생성 합니다. 일부 태그는 간단히 나타내기 위해 제거 되었습니다.These two Repeaters result in the following markup (some markup has been removed for brevity):

<li>
    <a href="/Code/BasicReporting/Default.aspx">Basic Reporting</a>
    <ul>
       <li>
          <a href="/Code/BasicReporting/SimpleDisplay.aspx">
           Simple Display</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/DeclarativeParams.aspx">
           Declarative Parameters</a>
       </li>
       <li>
          <a href="/Code/BasicReporting/ProgrammaticParams.aspx">
           Setting Parameter Values</a>
       </li>
    </ul>
</li>

<li>
    <a href="/Code/Filtering/Default.aspx">Filtering Reports</a>
    ...
</li>

<li>
    <a href="/Code/CustomFormatting/Default.aspx">
        Customized Formatting</a>
    ...
</li>

Rachel Andrew의 책에서 선택한 css 스타일을 사용 하 여 css Anthology: 101 필수 팁, 트릭, & 해킹, <ul><li> 요소는 태그가 다음과 같은 시각적 출력을 생성 하도록 스타일이 지정 됩니다.Using CSS styles chosen from Rachel Andrew's book The CSS Anthology: 101 Essential Tips, Tricks, & Hacks, the <ul> and <li> elements are styled such that the markup produces the following visual output:

두 반복기 및 CSS에서 구성 된 메뉴

그림 11: 두 반복기 및 일부 CSS에서 구성 된 메뉴Figure 11: A Menu Composed from Two Repeaters and Some CSS

이 메뉴는 마스터 페이지에 있고 Web.sitemap에 정의 된 사이트 맵에 바인딩되어 있습니다. 즉, 사이트 맵에 대 한 모든 변경 내용이 Site.master 마스터 페이지를 사용 하는 모든 페이지에 즉시 반영 됩니다.This menu is in the master page and bound to the site map defined in Web.sitemap, meaning that any change to the site map will be immediately reflected on all pages that use the Site.master master page.

ViewState 사용 안 함Disabling ViewState

모든 ASP.NET 컨트롤은 렌더링 된 HTML에서 숨겨진 양식 필드로 serialize 된 뷰 상태에 필요에 따라 상태를 유지할 수 있습니다.All ASP.NET controls can optionally persist their state to the view state, which is serialized as a hidden form field in the rendered HTML. 뷰 상태는 데이터 웹 컨트롤에 바인딩된 데이터와 같이 포스트백 간에 프로그래밍 방식으로 변경 된 상태를 기억할 수 있도록 컨트롤에서 사용 됩니다.View state is used by controls to remember their programmatically-changed state across postbacks, such as the data bound to a data Web control. 뷰 상태는 포스트백을 통해 정보를 기억할 수 있도록 허용 하지만, 클라이언트에 보내야 하는 태그의 크기를 늘려 면밀 하 게 모니터링 하지 않는 경우 심각한 페이지 크기를 초래 합니다.While view state permits information to be remembered across postbacks, it increases the size of the markup that must be sent to the client and can lead to severe page bloat if not closely monitored. 데이터 웹 컨트롤 특히 GridView는 페이지에 수십 개의 추가 kb 태그를 추가 하는 데 특히 심각한 문제.Data Web controls especially the GridView are particularly notorious for adding dozens of extra kilobytes of markup to a page. 이러한 증가는 광대역 또는 인트라넷 사용자의 경우 무시할 수 있지만, 보기 상태는 전화 접속 사용자에 대 한 왕복에 몇 초 정도 추가할 수 있습니다.While such an increase may be negligible for broadband or intranet users, view state can add several seconds to the round trip for dial-up users.

보기 상태의 영향을 확인 하려면 브라우저의 페이지를 방문 하 여 웹 페이지에서 보낸 소스를 확인 합니다 (Internet Explorer에서 보기 메뉴로 이동 하 여 원본 옵션 선택).To see the impact of view state, visit a page in a browser and then view the source sent by the web page (in Internet Explorer, go to the View menu and choose the Source option). 페이지 추적 을 설정 하 여 페이지의 각 컨트롤에서 사용 하는 뷰 상태 할당을 확인할 수도 있습니다.You can also turn on page tracing to see the view state allocation used by each of the controls on the page. 뷰 상태 정보는 __VIEWSTATE이라는 숨겨진 양식 필드에서 serialize 되며 <div> 요소에서 여는 <form> 태그 바로 뒤에 있습니다.The view state information is serialized in a hidden form field named __VIEWSTATE, located in a <div> element immediately after the opening <form> tag. 뷰 상태는 사용 중인 Web Form이 있는 경우에만 지속 됩니다. ASP.NET 페이지의 선언적 구문에 <form runat="server"> 포함 되어 있지 않으면 렌더링 된 태그에 __VIEWSTATE 숨겨진 폼 필드가 없습니다.View state is only persisted when there is a Web Form being used; if your ASP.NET page does not include a <form runat="server"> in its declarative syntax there won't be a __VIEWSTATE hidden form field in the rendered markup.

마스터 페이지에 의해 생성 된 __VIEWSTATE 양식 필드는 페이지의 생성 된 태그에 약 1800 바이트를 추가 합니다.The __VIEWSTATE form field generated by the master page adds roughly 1,800 bytes to the page's generated markup. SiteMapDataSource 컨트롤의 내용이 보기 상태로 유지 되기 때문에 이러한 추가 팽창은 주로 Repeater 컨트롤에 의해 발생 합니다.This extra bloat is due primarily to the Repeater control, as the contents of the SiteMapDataSource control are persisted to view state. 추가 1800 바이트는 많은 필드와 레코드가 포함 된 GridView를 사용 하는 경우에는 상당한 영향을 받지 않을 수 있지만 뷰 상태를 10 개 이상으로 쉽게 swell 수 있습니다.While an extra 1,800 bytes may not seem like much to get excited about, when using a GridView with many fields and records, the view state can easily swell by a factor of 10 or more.

뷰 상태는 EnableViewState 속성을 False로 설정 하 여 렌더링 된 태그의 크기를 줄여 페이지나 컨트롤 수준에서 사용 하지 않도록 설정할 수 있습니다.View state can be disabled at the page or control level by setting the EnableViewState property to False, thereby reducing the size of the rendered markup. 데이터 웹 컨트롤에 대 한 뷰 상태는 데이터를 다시 게시 하는 동안 데이터 웹 컨트롤에 바인딩된 데이터를 유지 하므로 데이터 웹 컨트롤에 대 한 뷰 상태를 사용 하지 않도록 설정 하는 경우 데이터는 각 및 포스트백 마다 바인딩되어야 합니다.Since the view state for a data Web control persists the data bound to the data Web control across postbacks, when disabling the view state for a data Web control the data must be bound on each and every postback. ASP.NET 버전 1. x에서는이 책임이 페이지 개발자의 접근에 있습니다. 그러나 ASP.NET 2.0를 사용 하는 경우, 필요한 경우 데이터 웹 컨트롤이 다시 게시 될 때마다 데이터 소스 컨트롤에 다시 바인딩됩니다.In ASP.NET version 1.x this responsibility fell on the shoulders of the page developer; with ASP.NET 2.0, however, the data Web controls will rebind to their data source control on each postback if needed.

페이지의 뷰 상태를 줄이려면 Repeater 컨트롤의 EnableViewState 속성을 False로 설정 합니다.To reduce the page's view state let's set the Repeater control's EnableViewState property to False. 이 작업은 디자이너의 속성 창 또는 소스 뷰에서 선언적으로 수행할 수 있습니다.This can be done through the Properties window in the Designer or declaratively in the Source view. 이러한 변경을 수행한 후에는 Repeater의 선언적 태그가 다음과 같이 표시 됩니다.After making this change the Repeater's declarative markup should look like:

<asp:Repeater runat="server" ID="menu" DataSourceID="SiteMapDataSource1"
    EnableViewState="False">
    <ItemTemplate>
        ... <i>ItemTemplate contents omitted for brevity</i> ...
    </ItemTemplate>
</asp:Repeater>

이렇게 변경한 후에는 페이지의 렌더링 된 뷰 상태 크기가 52 바이트로 축소 되 고 97%가 보기 상태 크기로 절감 됩니다.After this change, the page's rendered view state size has shrunk to a mere 52 bytes, a 97% savings in view state size! 이 시리즈 전체의 자습서에서는 렌더링 된 태그의 크기를 줄이기 위해 기본적으로 데이터 웹 컨트롤의 뷰 상태를 사용 하지 않도록 설정 합니다.In the tutorials throughout this series we'll disable the view state of the data Web controls by default in order to reduce the size of the rendered markup. 대부분의 예제에서 EnableViewState 속성은 False으로 설정 되 고, 여기서는 언급 하지 않고 수행 됩니다.In the majority of the examples the EnableViewState property will be set to False and done so without mention. 데이터 웹 컨트롤에서 예상 된 기능을 제공 하기 위해 사용 하도록 설정 해야 하는 시나리오에서는 유일한 시간 보기 상태를 설명 합니다.The only time view state will be discussed is in scenarios where it must be enabled in order for the data Web control to provide its expected functionality.

4 단계: 이동 경로 탐색 추가Step 4: Adding Breadcrumb Navigation

마스터 페이지를 완료 하려면 각 페이지에 breadcrumb 탐색 UI 요소를 추가 해 보겠습니다.To complete the master page, let's add a breadcrumb navigation UI element to each page. 이동 경로는 사이트 계층 구조 내에서 사용자의 현재 위치를 빠르게 보여줍니다.The breadcrumb quickly shows users their current position within the site hierarchy. ASP.NET 2.0에서 breadcrumb을 추가 하는 것은 페이지에 SiteMapPath 컨트롤을 추가 하는 것이 쉽습니다. 코드가 필요 하지 않습니다.Adding a breadcrumb in ASP.NET 2.0 is easy just add a SiteMapPath control to the page; no code is needed.

사이트의 경우 헤더 <div>에이 컨트롤을 추가 합니다.For our site, add this control to the header <div>:

<span class="breadcrumb">
    <asp:SiteMapPath ID="SiteMapPath1" runat="server">
    </asp:SiteMapPath>
</span>

이동 경로에는 사용자가 사이트 맵 계층 구조에서 방문 하는 현재 페이지 뿐만 아니라 사이트 맵 노드의 "상위 항목"은 루트 (홈, 사이트 맵)까지 모두 표시 됩니다.The breadcrumb shows the current page the user is visiting in the site map hierarchy as well as that site map node's "ancestors," all the way up to the root (Home, in our site map).

이동 경로는 현재 페이지와 사이트 맵 계층 구조에 있는 상위 항목을 표시 합니다.

그림 12: Breadcrumb은 사이트 맵 계층 구조에서 현재 페이지 및 상위 항목을 표시 합니다.Figure 12: The Breadcrumb Displays the Current Page and its Ancestors in the Site Map Hierarchy

5 단계: 각 섹션에 대 한 기본 페이지 추가Step 5: Adding the Default Page for Each Section

이 사이트의 자습서는 각 범주에 대 한 폴더와 해당 자습서를 해당 폴더 내 ASP.NET 페이지로 분류 하는 기본 보고, 필터링, 사용자 지정 서식 등의 다양 한 범주로 분류 됩니다.The tutorials in our site are broken down into different categories Basic Reporting, Filtering, Custom Formatting, and so on with a folder for each category and the corresponding tutorials as ASP.NET pages within that folder. 또한 각 폴더에는 Default.aspx 페이지가 포함 되어 있습니다.Additionally, each folder contains a Default.aspx page. 이 기본 페이지에는 현재 섹션에 대 한 모든 자습서를 표시 해 보겠습니다.For this default page, let's display all of the tutorials for the current section. 즉, BasicReporting 폴더의 Default.aspx에 대해 SimpleDisplay.aspx, DeclarativeParams.aspxProgrammaticParams.aspx에 대 한 링크가 있습니다.That is, for the Default.aspx in the BasicReporting folder we'd have links to SimpleDisplay.aspx, DeclarativeParams.aspx, and ProgrammaticParams.aspx. 여기서는 SiteMap 클래스 및 데이터 웹 컨트롤을 사용 하 여 Web.sitemap에 정의 된 사이트 맵을 기반으로이 정보를 표시할 수 있습니다.Here, again, we can use the SiteMap class and a data Web control to display this information based upon the site map defined in Web.sitemap.

반복을 사용 하 여 순서가 지정 되지 않은 목록을 다시 표시 하지만 이번에는 자습서의 제목 및 설명을 표시 합니다.Let's display an unordered list using a Repeater again, but this time we'll display the title and description of the tutorials. 이를 수행 하기 위한 태그와 코드는 각 Default.aspx 페이지에 대해 반복 해야 하므로 사용자 정의 컨트롤에서이 UI 논리를 캡슐화 할 수 있습니다.Since the markup and code to accomplish this will need to be repeated for each Default.aspx page, we can encapsulate this UI logic in a User Control. 웹 사이트에서 UserControls 이라는 폴더를 만들고 SectionLevelTutorialListing.ascx라는 웹 사용자 정의 컨트롤 형식의 새 항목에 추가 하 고 다음 태그를 추가 합니다.Create a folder in the website called UserControls and add to that a new item of type Web User Control named SectionLevelTutorialListing.ascx, and add the following markup:

Usercontrol 폴더에 새 웹 사용자 정의 컨트롤을 추가 Add a New Web User Control to the UserControls Folder

그림 13: UserControls 폴더에 새 웹 사용자 정의 컨트롤 추가 (전체 크기 이미지를 보려면 클릭)Figure 13: Add a New Web User Control to the UserControls Folder (Click to view full-size image)

SectionLevelTutorialListing.ascxSectionLevelTutorialListing.ascx

<%@ Control Language="VB" AutoEventWireup="true"
    CodeFile="SectionLevelTutorialListing.ascx.vb"
    Inherits="UserControls_SectionLevelTutorialListing" %>
<asp:Repeater ID="TutorialList" runat="server" EnableViewState="False">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:HyperLink runat="server"
         NavigateUrl='<%# Eval("Url") %>'
         Text='<%# Eval("Title") %>'></asp:HyperLink>
                - <%# Eval("Description") %></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>

SectionLevelTutorialListing.ascx.vbSectionLevelTutorialListing.ascx.vb

Partial Class UserControls_SectionLevelTutorialListing 
    Inherits UserControl

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
        If SiteMap.CurrentNode IsNot Nothing Then
            TutorialList.DataSource = SiteMap.CurrentNode.ChildNodes
            TutorialList.DataBind()
        End If
    End Sub
End Class

이전 Repeater 예제에서는 SiteMap 데이터를 반복기에 선언적으로 바인딩 했습니다. 그러나 SectionLevelTutorialListing 사용자 정의 컨트롤은 프로그래밍 방식으로 수행 됩니다.In the previous Repeater example we bound the SiteMap data to the Repeater declaratively; the SectionLevelTutorialListing User Control, however, does so programmatically. Page_Load 이벤트 처리기에서이 페이지의 URL이 사이트 맵의 노드에 매핑되는지 확인 합니다.In the Page_Load event handler, a check is made to ensure that this page s URL maps to a node in the site map. 이 사용자 정의 컨트롤을 해당 하는 <siteMapNode> 항목이 없는 페이지에서 사용 하는 경우 SiteMap.CurrentNodeNothing을 반환 하 고 데이터는 Repeater에 바인딩되지 않습니다.If this User Control is used in a page that does not have a corresponding <siteMapNode> entry, SiteMap.CurrentNode will return Nothing and no data will be bound to the Repeater. CurrentNode있다고 가정 하 고 ChildNodes 컬렉션을 Repeater에 바인딩합니다.Assuming we have a CurrentNode, we bind its ChildNodes collection to the Repeater. 사이트 맵은 각 섹션의 Default.aspx 페이지가 해당 섹션에 있는 모든 자습서의 부모 노드인 것으로 설정 되었으므로이 코드는 아래 스크린샷에 표시 된 것 처럼 섹션의 모든 자습서에 대 한 링크 및 설명을 표시 합니다.Since our site map is set up such that the Default.aspx page in each section is the parent node of all of the tutorials within that section, this code will display links to and descriptions of all of the section's tutorials, as shown in the screen shot below.

이 반복기를 만든 후에는 각 폴더의 Default.aspx 페이지를 열고 디자인 뷰으로 이동한 다음, 솔루션 탐색기에서 사용자 정의 컨트롤을 자습서 목록이 표시 될 디자인 화면으로 끌어다 놓기만 하면 됩니다.Once this Repeater has been created, open the Default.aspx pages in each of the folders, go to the Design view, and simply drag the User Control from the Solution Explorer onto the Design surface where you want the tutorial list to appear.

사용자 정의 컨트롤이 default.aspx에 추가 된 The User Control has Been Added to Default.aspx

그림 14: Default.aspx에 추가 된 사용자 정의 컨트롤 (전체 크기 이미지를 보려면 클릭)Figure 14: The User Control has Been Added to Default.aspx (Click to view full-size image)

기본 보고 자습서가 나열 됩니다.The Basic Reporting Tutorials are Listed

그림 15: 기본 보고 자습서 나열 (전체 크기 이미지를 보려면 클릭)Figure 15: The Basic Reporting Tutorials are Listed (Click to view full-size image)

요약Summary

사이트 맵이 정의 되 고 마스터 페이지가 완료 되 면 데이터 관련 자습서에 대해 일관 된 페이지 레이아웃 및 탐색 구성표가 제공 됩니다.With the site map defined and the master page complete, we now have a consistent page layout and navigation scheme for our data-related tutorials. 사이트에 추가 하는 페이지 수에 관계 없이이 정보를 중앙 집중화 하기 때문에 사이트 전체 페이지 레이아웃 또는 사이트 탐색 정보를 업데이트 하는 작업은 빠르고 간단 합니다.Regardless of how many pages we add to our site, updating the site-wide page layout or site navigation information is a quick and simple process due to this information being centralized. 특히 페이지 레이아웃 정보는 마스터 페이지 Site.masterWeb.sitemap의 사이트 맵에 정의 됩니다.Specifically, the page layout information is defined in the master page Site.master and the site map in Web.sitemap. 이 사이트 전체 페이지 레이아웃 및 탐색 메커니즘을 구현 하기 위해 코드를 작성 하지 않아도 되며, Visual Studio에서 전체 WYSIWYG 디자이너 지원을 유지 합니다.We didn't need to write any code to achieve this site-wide page layout and navigation mechanism, and we retain full WYSIWYG designer support in Visual Studio.

데이터 액세스 계층 및 비즈니스 논리 계층을 완료 하 고 일관 된 페이지 레이아웃 및 사이트 탐색이 정의 되어 있으면 일반적인 보고 패턴을 살펴볼 준비가 되었습니다.Having completed the Data Access Layer and Business Logic Layer and having a consistent page layout and site navigation defined, we're ready to begin exploring common reporting patterns. 다음 세 가지 자습서에서는 GridView, DetailsView 및 FormView 컨트롤의 BLL에서 검색 된 데이터를 표시 하는 기본 보고 작업에 대해 살펴보겠습니다.In the next three tutorials we'll look at basic reporting tasks displaying data retrieved from the BLL in the GridView, DetailsView, and FormView controls.

행복 한 프로그래밍Happy Programming!

추가 참고 자료Further Reading

이 자습서에서 설명 하는 항목에 대 한 자세한 내용은 다음 리소스를 참조 하세요.For more information on the topics discussed in this tutorial, refer to the following resources:

저자 정보About the Author

Scott Mitchell(7 개의 ASP/ASP. NET books 및 4GuysFromRolla.com창립자)은 1998부터 Microsoft 웹 기술을 사용 하 여 작업 했습니다.Scott Mitchell, author of seven ASP/ASP.NET books and founder of 4GuysFromRolla.com, has been working with Microsoft Web technologies since 1998. Scott은 독립 컨설턴트, 강사 및 기록기로 작동 합니다.Scott works as an independent consultant, trainer, and writer. 최신 책은 24 시간 이내에 ASP.NET 2.0을 sams teach yourself것입니다.His latest book is Sams Teach Yourself ASP.NET 2.0 in 24 Hours. mitchell@4GuysFromRolla.com에 도달할 수 있습니다 .He can be reached at mitchell@4GuysFromRolla.com. 또는 블로그를 통해 http://ScottOnWriting.NET에서 찾을 수 있습니다.or via his blog, which can be found at http://ScottOnWriting.NET.

특별히 감사 합니다.Special Thanks To

이 자습서 시리즈는 많은 유용한 검토자가 검토 했습니다.This tutorial series was reviewed by many helpful reviewers. 이 자습서에 대 한 잠재 고객 검토자는 Liz Shulok, Dennis Patterson이 및 Hilton Gid Esenow 였습니다.Lead reviewers for this tutorial were Liz Shulok, Dennis Patterson, and Hilton Giesenow. 예정 된 MSDN 문서를 검토 하는 데 관심이 있나요?Interested in reviewing my upcoming MSDN articles? 그렇다면mitchell@4GuysFromRolla.com에서 줄을 삭제 합니다.If so, drop me a line at mitchell@4GuysFromRolla.com.