마스터 페이지에서 제목, 메타 태그 및 기타 HTML 헤더 지정(C#)
작성자 : Scott Mitchell
콘텐츠 페이지의 마스터 페이지에서 다양한 <헤드> 요소를 정의하기 위한 다양한 기술을 살펴봅니다.
소개
Visual Studio 2008에서 만든 새 master 페이지에는 기본적으로 두 개의 ContentPlaceHolder 컨트롤이 있습니다. 하나는 head이고, 하나는 요소에 <head> 있고, 하나는 ContentPlaceHolder1웹 양식 내에 배치됩니다. 의 목적은 ContentPlaceHolder1 페이지 단위로 사용자 지정할 수 있는 웹 양식의 영역을 정의하는 것입니다. head ContentPlaceHolder를 사용하면 페이지에서 섹션에 사용자 지정 콘텐츠를 추가할 수 <head> 있습니다. 물론 이러한 두 ContentPlaceHolder는 수정하거나 제거할 수 있으며 추가 ContentPlaceHolder를 master 페이지에 추가할 수 있습니다. master 페이지 Site.master에는 현재 4개의 ContentPlaceHolder 컨트롤이 있습니다.)
HTML <head> 요소는 문서 자체의 일부가 아닌 웹 페이지 문서에 대한 정보를 제공하는 리포지토리 역할을 합니다. 여기에는 웹 페이지의 제목, 검색 엔진 또는 내부 크롤러에서 사용하는 메타 정보, RSS 피드, JavaScript 및 CSS 파일과 같은 외부 리소스에 대한 링크와 같은 정보가 포함됩니다. 이 정보 중 일부는 웹 사이트의 모든 페이지와 관련이 있을 수 있습니다. 예를 들어 모든 ASP.NET 페이지에 대해 동일한 CSS 규칙 및 JavaScript 파일을 전역적으로 가져올 수 있습니다. 그러나 페이지별 요소의 <head> 일부가 있습니다. 페이지 제목이 대표적인 예입니다.
이 자습서에서는 master 페이지 및 해당 콘텐츠 페이지에서 전역 및 페이지별 <head> 섹션 태그를 정의하는 방법을 검토합니다.
마스터 페이지의<head>섹션 검사
Visual Studio 2008에서 만든 기본 master 페이지 파일에는 해당 섹션에 다음 태그가 <head> 포함되어 있습니다.
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
요소에는 <head> 정적 HTML이 아닌 서버 컨트롤임을 나타내는 특성이 포함되어 runat="server" 있습니다. 모든 ASP.NET 페이지는 네임스페이Page스에 있는 클래스에서 System.Web.UI 파생됩니다. 이 클래스에는 Header 페이지의 <head> 지역에 대한 액세스를 제공하는 속성이 포함되어 있습니다. Header 속성을 사용하여 ASP.NET 페이지의 제목을 설정하거나 렌더링된 <head> 섹션에 추가 태그를 추가할 수 있습니다. 그런 다음 페이지의 이벤트 처리기에 약간의 코드를 작성하여 콘텐츠 <head> 페이지의 Page_Load 요소를 사용자 지정할 수 있습니다. 1단계에서 프로그래밍 방식으로 페이지 제목을 설정하는 방법을 살펴봅합니다.
위의 요소에 <head> 표시된 태그에는 head라는 ContentPlaceHolder 컨트롤도 포함됩니다. 콘텐츠 페이지에서 프로그래밍 방식으로 요소에 사용자 지정 콘텐츠를 추가할 수 있으므로 이 ContentPlaceHolder 컨트롤은 <head> 필요하지 않습니다. 그러나 정적 태그를 프로그래밍 방식으로 추가하지 않고 해당 콘텐츠 컨트롤에 선언적으로 추가할 수 있으므로 콘텐츠 페이지가 요소에 정적 태그 <head> 를 추가해야 하는 경우에 유용합니다.
요소 및 head ContentPlaceHolder 외에도 <title> master 페이지의 요소에는 모든 페이지에 <head> 공통적인 수준 태그가 포함되어<head>야 합니다. 웹 사이트에서 모든 페이지는 파일에 정의된 Styles.css CSS 규칙을 사용합니다. 따라서 Master Pages를 사용하여 Site-Wide 레이아웃 만들기 자습서의 요소를 업데이트 <head> 하여 해당 <link> 요소를 포함했습니다. Site.master master 페이지의 현재 <head> 태그는 다음과 같습니다.
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>
1단계: 콘텐츠 페이지의 제목 설정
웹 페이지의 제목은 요소를 통해 <title> 지정됩니다. 각 페이지의 제목을 적절한 값으로 설정하는 것이 중요합니다. 페이지를 방문하면 해당 제목이 브라우저의 제목 표시줄에 표시됩니다. 또한 페이지를 책갈피로 지정할 때 브라우저는 페이지의 제목을 책갈피의 제안된 이름으로 사용합니다. 또한 검색 결과를 표시할 때 많은 검색 엔진이 페이지의 제목을 표시합니다.
참고
기본적으로 Visual Studio는 <title> master 페이지의 요소를 "제목 없는 페이지"로 설정합니다. 마찬가지로 새 ASP.NET 페이지도 <title> "제목 없는 페이지"로 설정됩니다. 페이지의 제목을 적절한 값으로 설정하는 것을 잊기 쉬울 수 있으므로 인터넷에는 "제목 없는 페이지"라는 제목이 있는 많은 페이지가 있습니다. 이 제목으로 Google에서 웹 페이지를 검색하면 약 2,460,000개 결과가 반환됩니다. Microsoft도 제목이 "제목 없는 페이지"인 웹 페이지를 게시하는 데 취약합니다. 이 글을 쓰는 당시 Google 검색은 Microsoft.com 도메인에서 236페이지의 웹 페이지를 보고했습니다.
ASP.NET 페이지는 다음 방법 중 하나로 제목을 지정할 수 있습니다.
- 요소 내에 직접 값을 배치합니다.
<title> - 지시문에서
Title<%@ Page %>특성 사용 - 또는
Page.Header.Title="title"와 같은Page.Title="title"코드를 사용하여 프로그래밍 방식으로 페이지의Title속성을 설정합니다.
콘텐츠 페이지에는 <title> master 페이지에 정의되어 있으므로 요소가 없습니다. 따라서 콘텐츠 페이지의 제목을 설정하려면 지시문의 Title 특성을 사용 <%@ Page %> 하거나 프로그래밍 방식으로 설정할 수 있습니다.
페이지의 제목을 선언적으로 설정
콘텐츠 페이지의 제목은 지시문의<%@ Page %> 특성을 통해 Title 선언적으로 설정할 수 있습니다. 이 속성은 지시문을 직접 수정 <%@ Page %> 하거나 속성 창 통해 설정할 수 있습니다. 두 접근 방식을 모두 살펴보겠습니다.
원본 보기에서 페이지의 선언적 태그 맨 위에 있는 지시문을 찾 <%@ Page %> 습니다. 에 대한 Default.aspx 지시문은 <%@ Page %> 다음과 같습니다.
<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" Title="Untitled Page" %>
지시문은 <%@ Page %> 페이지를 구문 분석하고 컴파일할 때 ASP.NET 엔진에서 사용하는 페이지별 특성을 지정합니다. 여기에는 master 페이지 파일, 코드 파일의 위치 및 제목이 포함됩니다.
기본적으로 새 콘텐츠 페이지를 만들 때 Visual Studio는 Title 특성을 제목 없는 페이지로 설정합니다. 의 Title 특성을 "제목 없는 페이지"에서 "마스터 페이지 자습서"로 변경Default.aspx한 다음 브라우저를 통해 페이지를 봅니다. 그림 1은 새 페이지 제목을 반영하는 브라우저의 제목 표시줄을 보여 줍니다.
그림 01: 이제 브라우저의 제목 표시줄에 "제목 없는 페이지" 대신 "마스터 페이지 자습서"가 표시됩니다.
페이지의 제목은 속성 창 설정할 수도 있습니다. 속성 창 드롭다운 목록에서 DOCUMENT를 선택하여 속성을 포함하는 Title 페이지 수준 속성을 로드합니다. 그림 2는 "마스터 페이지 자습서"로 설정된 후 Title 의 속성 창 보여 줍니다.
그림 02: 속성 창에서도 제목을 구성할 수 있습니다.
프로그래밍 방식으로 페이지의 제목 설정
ASP.NET 엔진에서 페이지를 렌더링하면 master 페이지의 <head runat="server"> 태그가 클래스 instance 변환됩니다.HtmlHead 클래스에는 HtmlHeadTitle 값이 렌더링된 요소에 반영되는 속성이 <title> 있습니다. 이 속성은 를 통해 Page.Header.TitleASP.NET 페이지의 코드 숨김 클래스에서 액세스할 수 있습니다. 이 동일한 속성은 를 통해 Page.Title액세스할 수도 있습니다.
페이지의 제목을 프로그래밍 방식으로 설정하는 연습을 하려면 페이지의 코드 숨김 클래스로 이동하여 About.aspx 페이지 Load 이벤트에 대한 이벤트 처리기를 만듭니다. 다음으로, 페이지의 제목을 "마스터 페이지 자습서 :: About :: date"로 설정합니다. 여기서 날짜 는 현재 날짜입니다. 이 코드를 추가한 Page_Load 후 이벤트 처리기는 다음과 유사하게 표시됩니다.
protected void Page_Load(object sender, EventArgs e)
{
Page.Title = string.Format("Master Page Tutorials :: About :: {0:d}", DateTime.Now);
}
그림 3은 페이지를 방문할 때 브라우저의 제목 표시줄을 About.aspx 보여줍니다.
그림 03: 페이지의 제목이 프로그래밍 방식으로 설정되고 현재 날짜 포함
2단계: 페이지 제목 자동 할당
1단계에서 확인한 것처럼 페이지의 제목을 선언적으로 또는 프로그래밍 방식으로 설정할 수 있습니다. 그러나 제목을 더 설명적인 것으로 명시적으로 변경하는 것을 잊어버린 경우 페이지에는 기본 제목인 "제목 없는 페이지"가 있습니다. 이상적으로는 명시적으로 해당 값을 지정하지 않는 경우 페이지의 제목이 자동으로 설정됩니다. 예를 들어 런타임에 페이지의 제목이 "제목 없는 페이지"인 경우 타이틀이 자동으로 ASP.NET 페이지의 파일 이름과 동일하게 업데이트되도록 할 수 있습니다. 좋은 소식은 약간의 선행 작업을 통해 타이틀을 자동으로 할당할 수 있다는 것입니다.
모든 ASP.NET 웹 페이지는 네임스페이스의 Page 클래스에서 System.Web.UI 파생됩니다. 클래스는 Page ASP.NET 페이지에 필요한 최소 기능을 정의하고 , , IsValidRequest및 와 Response같은 IsPostBack필수 속성을 노출합니다. 종종 웹 애플리케이션의 모든 페이지에는 추가 기능 또는 기능이 필요합니다. 이를 제공하는 일반적인 방법은 사용자 지정 기본 페이지 클래스를 만드는 것입니다. 사용자 지정 기본 페이지 클래스는 클래스에서 Page 파생되고 추가 기능을 포함하는 만드는 클래스입니다. 이 기본 클래스가 만들어지면 ASP.NET 페이지가 클래스가 아닌 Page 파생되도록 하여 확장된 기능을 ASP.NET 페이지에 제공할 수 있습니다.
이 단계에서는 타이틀이 명시적으로 설정되지 않은 경우 페이지의 제목을 ASP.NET 페이지의 파일 이름으로 자동으로 설정하는 기본 페이지를 만듭니다. 3단계에서는 사이트 맵에 따라 페이지의 제목을 설정하는 방법에 대해 설명합니다.
참고
사용자 지정 기본 페이지 클래스를 만들고 사용하는 방법에 대한 철저한 검사는 이 자습서 시리즈의 scope.
기본 페이지 클래스 만들기
첫 번째 작업은 클래스를 확장하는 클래스인 기본 페이지 클래스를 Page 만드는 것입니다. 먼저 솔루션 탐색기 프로젝트 이름을 마우스 오른쪽 단추로 클릭하고 ASP.NET 폴더 추가를 선택한 다음 을 선택하여 프로젝트에 폴더를 추가 App_Code 합니다App_Code. 그런 다음 폴더를 마우스 오른쪽 단추로 App_Code 클릭하고 라는 BasePage.cs새 클래스를 추가합니다. 그림 4에서는 폴더와 BasePage.cs 클래스가 추가된 후의 App_Code 솔루션 탐색기 보여 있습니다.
그림 04: 폴더 및 라는 클래스 추가 App_CodeBasePage
참고
Visual Studio는 웹 사이트 프로젝트 및 웹 애플리케이션 프로젝트라는 두 가지 프로젝트 관리 모드를 지원합니다. 폴더는 App_Code 웹 사이트 프로젝트 모델과 함께 사용하도록 설계되었습니다. 웹 애플리케이션 프로젝트 모델을 사용하는 경우 클래스를 BasePage.cs 이외의 폴더 App_Code(예: Classes)에 배치합니다. 이 항목에 대한 자세한 내용은 웹 사이트 프로젝트를 웹 애플리케이션 프로젝트로 마이그레이션을 참조하세요.
사용자 지정 기본 페이지는 ASP.NET 페이지의 코드 숨김 클래스에 대한 기본 클래스 역할을 하므로 클래스를 Page 확장해야 합니다.
public class BasePage : System.Web.UI.Page
{
}
ASP.NET 페이지가 요청될 때마다 일련의 단계를 진행하여 요청된 페이지가 HTML로 렌더링됩니다. 클래스의 메서드를 재정의 OnEvent 하여 스테이지를 탭할 Page 수 있습니다. 기본 페이지의 경우 스테이지에 의해 LoadComplete 명시적으로 지정되지 않은 경우 자동으로 제목을 설정해 보겠습니다(짐작할 수 있듯이 스테이지 후에 Load 발생).
이렇게 하려면 메서드를 재정의 OnLoadComplete 하고 다음 코드를 입력합니다.
protected override void OnLoadComplete(EventArgs e)
{
// Set the page's title, if necessary
if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
{
// Determine the filename for this page
string fileName = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);
Page.Title = fileName;
}
base.OnLoadComplete(e);
}
메서드는 OnLoadComplete 속성이 Title 아직 명시적으로 설정되지 않은지 확인하여 시작합니다. 속성이 Title 이거나 null빈 문자열이거나 값이 "제목 없는 페이지"인 경우 요청된 ASP.NET 페이지의 파일 이름에 할당됩니다. 요청된 ASP.NET 페이지의 실제 경로( C:\MySites\Tutorial03\Login.aspx예: )는 속성을 통해 Request.PhysicalPath 액세스할 수 있습니다. 메서드는 Path.GetFileNameWithoutExtension 파일 이름 부분만 끌어오는 데 사용되며 이 파일 이름은 속성에 Page.Title 할당됩니다.
참고
타이틀의 형식을 개선하기 위해 이 논리를 개선하도록 초대합니다. 예를 들어 페이지의 파일 이름이 Company-Products.aspx인 경우 위의 코드는 "Company-Products"라는 제목을 생성하지만 대시는 "회사 제품"과 같이 공백으로 대체되는 것이 가장 좋습니다. 또한 대/소문자 변경이 있을 때마다 공간을 추가하는 것이 좋습니다. 즉, 파일 이름을 OurBusinessHours.aspx "업무 시간"이라는 제목으로 변환하는 코드를 추가하는 것이 좋습니다.
콘텐츠 페이지가 기본 페이지 클래스를 상속하는 경우
이제 클래스 대신 Page 사용자 지정 기본 페이지(BasePage)에서 파생되도록 사이트의 ASP.NET 페이지를 업데이트해야 합니다. 이렇게 하려면 각 코드 숨김 클래스로 이동하여 클래스 선언을 다음에서 변경합니다.
public partial class ClassName : System.Web.UI.Page
대상:
public partial class ClassName : BasePage
이렇게 한 후 브라우저를 통해 사이트를 방문합니다. 또는 About.aspx와 같이 Default.aspx 제목이 명시적으로 설정된 페이지를 방문하는 경우 명시적으로 지정된 제목이 사용됩니다. 그러나 제목이 기본값("제목 없는 페이지")에서 변경되지 않은 페이지를 방문하는 경우 기본 페이지 클래스는 제목을 페이지의 파일 이름으로 설정합니다.
그림 5는 브라우저를 MultipleContentPlaceHolders.aspx 통해 볼 때의 페이지를 보여줍니다. 제목은 정확히 페이지의 파일 이름(확장명 이하), "MultipleContentPlaceHolders"입니다.
그림 05: 제목이 명시적으로 지정되지 않은 경우 페이지의 파일 이름이 자동으로 사용됩니다(전체 크기 이미지를 보려면 클릭).
3단계: 사이트 맵에 페이지 제목 표시
ASP.NET 페이지 개발자가 사이트 맵에 대한 정보(예: SiteMapPath, Menu 및 TreeView 컨트롤)를 표시하기 위한 웹 컨트롤과 함께 외부 리소스(예: XML 파일 또는 데이터베이스 테이블)에서 계층적 사이트 맵을 정의할 수 있는 강력한 사이트 맵 프레임워크를 제공합니다.
사이트 맵 구조는 ASP.NET 페이지의 코드 숨김 클래스에서 프로그래밍 방식으로 액세스할 수도 있습니다. 이러한 방식으로 페이지 제목을 사이트 맵에서 해당 노드의 제목으로 자동으로 설정할 수 있습니다. 이 기능을 제공할 수 있도록 2단계에서 만든 클래스를 개선 BasePage 해 보겠습니다. 하지만 먼저 사이트에 대한 사이트 맵을 만들어야 합니다.
참고
이 자습서에서는 판독기가 이미 ASP에 익숙하다고 가정합니다. NET의 사이트 맵 기능. 사이트 맵 사용에 대한 자세한 내용은 여러 부분으로 구성된 문서 시리즈 ASP 검사를 참조하세요. NET의 사이트 탐색.
사이트 맵 만들기
사이트 맵 시스템은 사이트 맵 정보를 메모리와 영구 저장소 간에 직렬화하는 논리에서 사이트 맵 API를 분리하는 공급자 모델 위에 빌드됩니다. .NET Framework 기본 사이트 맵 공급자인 클래스와 함께 XmlSiteMapProvider제공됩니다. 이름에서 알 수 있듯이 는 XmlSiteMapProvider XML 파일을 사이트 맵 저장소로 사용합니다. 이 공급자를 사용하여 사이트 맵을 정의해 보겠습니다.
먼저 라는 웹 사이트의 루트 폴더에 사이트 맵 파일을 만듭니다 Web.sitemap. 이렇게 하려면 솔루션 탐색기 웹 사이트 이름을 마우스 오른쪽 단추로 클릭하고 새 항목 추가를 선택한 다음 사이트 맵 템플릿을 선택합니다. 파일 이름이 지정 Web.sitemap 되었는지 확인하고 추가를 클릭합니다.
그림 06: 웹 사이트의 루트 폴더에 명명된 Web.sitemap 파일 추가(전체 크기 이미지를 보려면 클릭)
파일에 다음 XML을 Web.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">
<siteMapNode url="~/About.aspx" title="About the Author" />
<siteMapNode url="~/MultipleContentPlaceHolders.aspx" title="Using Multiple ContentPlaceHolder Controls" />
</siteMapNode>
</siteMap>
이 XML은 그림 7에 표시된 계층적 사이트 맵 구조를 정의합니다.
그림 07: 사이트 맵은 현재 3개의 사이트 맵 노드로 구성됩니다.
새 예제를 추가할 때 향후 자습서에서 사이트 맵 구조를 업데이트할 예정입니다.
탐색 웹 컨트롤을 포함하도록 마스터 페이지 업데이트
이제 사이트 맵이 정의되었으므로 탐색 웹 컨트롤을 포함하도록 master 페이지를 업데이트해 보겠습니다. 특히 사이트 맵에 정의된 각 노드에 대한 목록 항목을 사용하여 정렬되지 않은 목록을 렌더링하는 ListView 컨트롤을 Lessons 섹션의 왼쪽 열에 추가해 보겠습니다.
참고
ListView 컨트롤은 ASP.NET 버전 3.5의 새로운 기능입니다. 이전 버전의 ASP.NET 사용하는 경우 대신 반복기 컨트롤을 사용합니다.
먼저 Lessons 섹션에서 순서가 지정되지 않은 기존 목록 태그를 제거합니다. 그런 다음 도구 상자에서 ListView 컨트롤을 끌어 단원 제목 아래에 놓습니다. ListView는 다른 보기 컨트롤인 GridView, DetailsView 및 FormView와 함께 도구 상자의 데이터 섹션에 있습니다. ListView의 ID 속성을 로 LessonsList설정합니다.
데이터 원본 구성 마법사에서 ListView를 라는 LessonsDataSource새 SiteMapDataSource 컨트롤에 바인딩하도록 선택합니다. SiteMapDataSource 컨트롤은 사이트 맵 시스템에서 계층 구조를 반환합니다.
그림 08: SiteMapDataSource 컨트롤을 ListView 컨트롤에 LessonsList 바인딩(전체 크기 이미지를 보려면 클릭)
SiteMapDataSource 컨트롤을 만든 후 SiteMapDataSource 컨트롤에서 반환된 각 노드에 대한 목록 항목을 사용하여 정렬되지 않은 목록을 렌더링하도록 ListView의 템플릿을 정의해야 합니다. 이 작업은 다음 템플릿 태그를 사용하여 수행할 수 있습니다.
<asp:ListView ID="LessonsList" runat="server" DataSourceID="LessonsDataSource">
<LayoutTemplate>
<ul>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li><asp:HyperLink runat="server" ID="lnkLesson" NavigateUrl='<%# Eval("Url") %>'
Text='<%# Eval("Title") %>' /></li>
</ItemTemplate>
</asp:ListView>
는 LayoutTemplate 정렬되지 않은 목록(<ul>...</ul>)에 대한 태그를 생성하고 ItemTemplate 는 SiteMapDataSource에서 반환된 각 항목을 특정 단원에 대한 링크가 포함된 목록 항목(<li>)으로 렌더링합니다.
ListView의 템플릿을 구성한 후 웹 사이트를 방문하세요. 그림 9에서 알 수 있듯이 Lessons 섹션에는 단일 글머리 기호 항목 Home이 포함되어 있습니다. 여러 ContentPlaceHolder 컨트롤 정보 및 사용 단원은 어디에 있나요? SiteMapDataSource는 계층적 데이터 집합을 반환하도록 설계되었지만 ListView 컨트롤은 계층의 단일 수준만 표시할 수 있습니다. 따라서 SiteMapDataSource에서 반환된 사이트 맵 노드의 첫 번째 수준만 표시됩니다.
그림 09: 단원 섹션에 단일 목록 항목이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
여러 수준을 표시하려면 내에 여러 ListView를 중첩할 ItemTemplate수 있습니다. 이 기술은 데이터 작업 자습서 시리즈의마스터 페이지 및 사이트 탐색 자습서에서 검토되었습니다. 그러나 이 자습서 시리즈의 경우 사이트 맵에는 홈(최상위 수준)의 두 수준만 포함됩니다. 각 단원을 홈의 자식으로 만듭니다. 중첩된 ListView를 만드는 대신 SiteMapDataSource에 속성을ShowStartingNode 로 설정하여 시작 노드를 반환하지 않도록 지시할 false수 있습니다. 그 결과 SiteMapDataSource는 사이트 맵 노드의 두 번째 계층을 반환하여 시작됩니다.
이 변경으로 ListView는 정보 및 다중 ContentPlaceHolder 컨트롤 컨트롤 단원에 대한 글머리 기호 항목을 표시하지만 홈에 대한 글머리 기호 항목은 생략합니다. 이 문제를 해결하기 위해 에서 Home LayoutTemplate에 대한 글머리 기호 항목을 명시적으로 추가할 수 있습니다.
<LayoutTemplate>
<ul>
<li><asp:HyperLink runat="server" ID="lnkLesson"
NavigateUrl="~/Default.aspx" Text="Home" /></li>
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</ul>
</LayoutTemplate>
시작 노드를 생략하고 홈 글머리 기호 항목을 명시적으로 추가하도록 SiteMapDataSource를 구성하면 이제 Lessons 섹션에 의도한 출력이 표시됩니다.
그림 10: 단원 섹션에는 홈 및 각 자식 노드에 대한 글머리 기호 항목이 포함되어 있습니다(전체 크기 이미지를 보려면 클릭).
사이트 맵에 따라 제목 설정
사이트 맵을 사용하면 사이트 맵에 지정된 제목을 사용하도록 클래스를 업데이트 BasePage 할 수 있습니다. 2단계에서 수행한 것처럼 페이지 개발자가 페이지 제목을 명시적으로 설정하지 않은 경우에만 사이트 맵 노드의 제목을 사용하려고 합니다. 요청되는 페이지에 명시적으로 설정된 페이지 제목이 없으며 사이트 맵에서 찾을 수 없는 경우 2단계에서와 같이 요청된 페이지의 파일 이름(확장명 이하)을 사용하는 것으로 대체됩니다. 그림 11에서는 이 의사 결정 프로세스를 보여 줍니다.
그림 11: 명시적으로 설정된 페이지 제목이 없는 경우 해당 사이트 맵 노드의 제목이 사용됩니다.
BasePage 다음 코드를 포함하도록 클래스의 OnLoadComplete 메서드를 업데이트합니다.
protected override void OnLoadComplete(EventArgs e)
{
// Set the page's title, if necessary
if (string.IsNullOrEmpty(Page.Title) || Page.Title == "Untitled Page")
{
// Is this page defined in the site map?
string newTitle = null;
SiteMapNode current = SiteMap.CurrentNode;
if (current != null)
{
newTitle = current.Title;
}
else
{
// Determine the filename for this page
newTitle = System.IO.Path.GetFileNameWithoutExtension(Request.PhysicalPath);
}
Page.Title = newTitle;
}
base.OnLoadComplete(e);
}
이전과 마찬가지로 메서드는 OnLoadComplete 페이지의 제목이 명시적으로 설정되었는지 여부를 확인하여 시작합니다. 가 null이면 빈 문자열이거나 값 "제목 없는 페이지"가 할당된 경우 Page.Title 코드는 자동으로 값을 에 Page.Title할당합니다.
사용할 제목을 결정하기 위해 코드는 클래스의 CurrentNode 속성을 참조하여 SiteMap시작합니다. CurrentNode는 현재 요청된 SiteMapNode 페이지에 해당하는 사이트 맵의 instance 반환합니다. 현재 요청된 페이지가 사이트 맵 SiteMapNode내에 있다고 가정하면 의 Title 속성이 페이지 제목에 할당됩니다. 현재 요청된 페이지가 사이트 맵 CurrentNode 에 없으면 를 반환 null 하고 요청된 페이지의 파일 이름이 제목으로 사용됩니다(2단계에서 수행한 것처럼).
그림 12는 브라우저를 MultipleContentPlaceHolders.aspx 통해 볼 때 페이지를 보여줍니다. 이 페이지의 제목이 명시적으로 설정되지 않았기 때문에 해당 사이트 맵 노드의 제목이 대신 사용됩니다.
그림 12: MultipleContentPlaceHolders.aspx 페이지 제목이 사이트 맵에서 가져옵니다.
4단계: 섹션에<head>기타 Page-Specific 태그 추가
1, 2, 3단계에서는 페이지 단위로 요소를 사용자 지정하는 것을 <title> 살펴보았습니다. <title>외에도 섹션에는 <head> 요소와 <link> 요소가 포함될 <meta> 수 있습니다. 이 자습서 Site.master의 앞부분에서 설명한 것처럼 의 <head> 섹션에는 에 대한 <link> 요소가 Styles.css포함됩니다. 이 <link> 요소는 master 페이지 내에서 정의되므로 모든 콘텐츠 페이지의 섹션에 포함 <head> 됩니다. 그러나 페이지 단위로 및 <link> 요소를 추가 <meta> 하려면 어떻게 해야 할까요?
섹션에 페이지별 콘텐츠를 <head> 추가하는 가장 쉬운 방법은 master 페이지에서 ContentPlaceHolder 컨트롤을 만드는 것입니다. 이러한 ContentPlaceHolder(라는 )가 head이미 있습니다. 따라서 사용자 지정 <head> 태그를 추가하려면 페이지에 해당 콘텐츠 컨트롤을 만들고 태그를 여기에 배치합니다.
페이지에 사용자 지정 <head> 태그를 추가하는 방법을 설명하기 위해 현재 콘텐츠 페이지 집합에 설명 요소를 포함 <meta> 해 보겠습니다. <meta> description 요소는 웹 페이지에 대한 간략한 설명을 제공합니다. 대부분의 검색 엔진은 검색 결과를 표시할 때 이 정보를 어떤 형태로든 통합합니다.
<meta> description 요소의 형식은 다음과 같습니다.
<meta name="description" content="description of the web page" />
콘텐츠 페이지에 이 태그를 추가하려면 위의 텍스트를 master 페이지의 Head ContentPlaceHolder에 매핑되는 콘텐츠 컨트롤에 추가합니다. 예를 들어 에 대한 Default.aspx설명 요소를 정의 <meta> 하려면 다음 태그를 추가합니다.
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="description" content="Welcome to Scott Mitchell's Master Page Tutorials series." />
</asp:Content>
Head ContentPlaceHolder가 HTML 페이지의 본문 내에 없으므로 콘텐츠 컨트롤에 추가된 태그가 디자인 보기에 표시되지 않습니다. 설명 요소를 보려면 <meta> 브라우저를 통해 방문 Default.aspx 하세요. 페이지가 로드된 후 원본을 보고 섹션에 <head> 콘텐츠 컨트롤에 지정된 태그가 포함되어 있음을 확인합니다.
잠시 시간을 내어 , MultipleContentPlaceHolders.aspx및 Login.aspx에 About.aspx설명 요소를 추가 <meta> 합니다.
프로그래밍 방식으로 지역에 태그<head>추가
Head ContentPlaceHolder를 사용하면 master 페이지의 <head> 영역에 사용자 지정 태그를 선언적으로 추가할 수 있습니다. 사용자 지정 태그를 프로그래밍 방식으로 추가할 수도 있습니다. 클래스의 Header 속성은 Page master 페이지()에 정의된 instance 반환 HtmlHead 합니다<head runat="server">.
추가할 콘텐츠 <head> 가 동적일 때 프로그래밍 방식으로 지역에 콘텐츠를 추가할 수 있는 것이 유용합니다. 페이지를 방문하는 사용자를 기반으로 하는 것일 수 있습니다. 데이터베이스에서 끌어오고 있는 것일 수 있습니다. 이유와 관계없이 다음과 같이 컨트롤을 HtmlHead Controls 컬렉션에 추가하여 에 콘텐츠를 추가할 수 있습니다.
// Programmatically add a <meta> element to the Header
HtmlMeta keywords = new HtmlMeta();
keywords.Name = "keywords";
keywords.Content = "master page,asp.net,tutorial";
Page.Header.Controls.Add(keywords);
위의 코드는 키워드 요소를 <head> 지역에 추가 <meta> 합니다. 이 요소는 페이지를 설명하는 쉼표로 구분된 키워드 목록을 제공합니다. 태그를 <meta> 추가하려면 instance 만들고 HtmlMeta 해당 Name 및 Content 속성을 설정한 다음 의 컬렉션에 HeaderControls 추가합니다. 마찬가지로 프로그래밍 방식으로 요소를 추가 <link> 하려면 개체를 HtmlLink 만들고 속성을 설정한 다음 의 컬렉션에 HeaderControls 추가합니다.
참고
임의 태그를 LiteralControl 추가하려면 instance 만들고 속성을 Text 설정한 다음 의 컬렉션에 HeaderControls 추가합니다.
요약
이 자습서에서는 페이지 단위로 지역 태그를 추가하는 <head> 다양한 방법을 살펴보았습니다. master 페이지에 ContentPlaceHolder가 있는 HtmlHead instance(<head runat="server">)가 포함되어야 합니다. HtmlHead 이 instance 콘텐츠 페이지가 프로그래밍 방식으로 지역에 액세스 <head> 하고 페이지의 제목을 선언적이고 프로그래밍 방식으로 설정할 수 있도록 합니다. ContentPlaceHolder 컨트롤을 사용하면 콘텐츠 컨트롤을 통해 사용자 지정 태그를 섹션에 <head> 선언적으로 추가할 수 있습니다.
행복한 프로그래밍!
추가 정보
이 자습서에서 설명하는 topics 대한 자세한 내용은 다음 리소스를 참조하세요.
- ASP.NET 페이지의 제목을 동적으로 설정
- ASP 검사. NET의 사이트 탐색
- HTML 메타 태그를 사용하는 방법
- ASP.NET 마스터 페이지
- ASP.NET 3.5의 ListView 및 DataPager 컨트롤 사용
저자 정보
여러 ASP/ASP.NET 책의 저자이자 4GuysFromRolla.com 설립자인 Scott Mitchell은 1998년부터 Microsoft 웹 기술을 사용하고 있습니다. Scott은 독립 컨설턴트, 트레이너 및 작가로 일합니다. 그의 최신 책은 샘스 자신을 가르친다 ASP.NET 3.5 24 시간. Scott은 에서 mitchell@4GuysFromRolla.com 또는 에서 자신의 블로그 http://ScottOnWriting.NET를 통해 연락할 수 있습니다.
특별 감사
이 자습서 시리즈는 많은 유용한 검토자가 검토했습니다. 이 자습서의 수석 검토자는 잭 존스와 수시 배너지였습니다. 예정된 MSDN 문서를 검토하시겠습니까? 그렇다면 에 줄을 놓습니다 mitchell@4GuysFromRolla.com.
피드백
출시 예정: 2024년 내내 콘텐츠에 대한 피드백 메커니즘으로 GitHub 문제를 단계적으로 폐지하고 이를 새로운 피드백 시스템으로 바꿀 예정입니다. 자세한 내용은 다음을 참조하세요. https://aka.ms/ContentUserFeedback
다음에 대한 사용자 의견 제출 및 보기