마스터 페이지의 URL(VB)
작성자 : Scott Mitchell
master 페이지 파일이 콘텐츠 페이지와 다른 상대 디렉터리에 있으므로 master 페이지의 URL이 중단되는 방식을 다룹니다. 선언적 구문에서 ~를 통해 URL을 다시 지정하고 ResolveUrl 및 ResolveClientUrl을 프로그래밍 방식으로 사용하는 방법을 살펴봅니다. (또한 살펴보기
소개
지금까지 본 모든 예제에서 master 및 콘텐츠 페이지는 동일한 폴더(웹 사이트의 루트 폴더)에 있습니다. 그러나 master 및 콘텐츠 페이지가 동일한 폴더에 있어야 하는 이유는 없습니다. 하위 폴더에서 콘텐츠 페이지를 확실히 만들 수 있습니다. 마찬가지로 사이트의 master 페이지를 배치하는 폴더를 만들 ~/MasterPages/ 수 있습니다.
다른 폴더에 master 및 콘텐츠 페이지를 배치할 때 발생할 수 있는 한 가지 잠재적인 문제는 손상된 URL과 관련이 있습니다. master 페이지에 하이퍼링크, 이미지 또는 기타 요소의 상대 URL이 포함되어 있으면 다른 폴더에 있는 콘텐츠 페이지에 대해 링크가 유효하지 않습니다. 이 자습서에서는 이 문제의 원인을 살펴보고 해결 방법을 살펴봅니다.
상대 URL 문제
가리키는 리소스의 위치가 웹 사이트의 폴더 구조에 있는 웹 페이지의 위치를 기준으로 하는 경우 웹 페이지의 URL은 상대 URL 이라고 합니다. 선행 슬래시() 또는 프로토콜(/예: )로 http://시작하지 않는 URL은 URL이 포함된 웹 페이지의 위치에 따라 브라우저에서 확인되므로 상대 URL입니다.
예를 들어 웹 사이트에는 단일 이미지 파일인 ~/Images/ 가 있는 폴더가 PoweredByASPNET.gif있습니다. master 페이지 파일에 Site.master 는 <img> 다음 태그가 있는 영역의 footerContent 요소가 있습니다.
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
요소의 <img> 특성 값은 src 또는 http://로 시작 / 되지 않으므로 상대 URL입니다. 즉, 특성 값은 src 브라우저에 라는 PoweredByASPNET.gif파일의 Images 하위 폴더를 확인하도록 지시합니다.
콘텐츠 페이지를 방문하면 위의 태그가 브라우저로 직접 전송됩니다. 잠시 방문하여 브라우저로 About.aspx 전송된 HTML 원본을 봅니다. master 페이지에서 정확히 동일한 태그가 브라우저로 전송된 것을 확인할 수 있습니다.
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
콘텐츠 페이지가 루트 폴더에 있는 경우(있는 About.aspx것처럼) 루트 폴더에 상대적인 Images 하위 폴더가 있기 때문에 모든 것이 예상대로 작동합니다. 그러나 콘텐츠 페이지가 master 페이지와 다른 폴더에 있으면 상황이 세분화됩니다. 이를 설명하려면 라는 Admin하위 폴더를 만듭니다. 다음으로 폴더에 Admin 이라는 Default.aspx 콘텐츠 페이지를 추가하여 새 페이지를 master 페이지에 바인딩해야 합니다 Site.master .
참고
마스터 페이지의 제목, 메타 태그 및 기타 HTML 헤더 지정 자습서에서 콘텐츠 페이지의 제목을 자동으로 설정하는 사용자 BasePage 지정 기본 페이지 클래스를 만들었습니다(명시적으로 할당되지 않은 경우). 이 기능을 활용할 수 있도록 새로 만든 페이지의 코드 숨김 클래스가 에서 파생 BasePage 되도록 하는 것을 잊지 마세요.
이 콘텐츠 페이지를 만든 후에는 솔루션 탐색기 그림 1과 유사하게 표시됩니다.
그림 01: 새 폴더 및 ASP.NET 페이지가 프로젝트에 추가되었습니다.
다음으로, 이 단원의 Web.sitemap 새 <siteMapNode> 항목을 포함하도록 파일을 업데이트합니다. 다음 XML은 이제 세 번째 <siteMapNode> 요소의 추가를 포함하는 전체 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 url="~/Admin/Default.aspx" title="Rebasing URLs" />
</siteMapNode>
</siteMap>
새로 만든 Default.aspx 페이지에는 의 4개 ContentPlaceHolders Site.master에 해당하는 4개의 콘텐츠 컨트롤이 있어야 합니다. ContentPlaceHolder를 참조하는 콘텐츠 컨트롤에 MainContent 텍스트를 추가한 다음 브라우저를 통해 페이지를 방문합니다. 그림 2와 같이 브라우저에서 이미지 파일을 찾을 PoweredByASPNET.gif 수 없습니다. 무슨 일이 일어나고 있는 건가요?
~/Admin/Default.aspx 콘텐츠 페이지는 페이지와 동일한 지역에 대해 footerContent 동일한 HTML로 About.aspx 전송됩니다.
<div id="footerContent">
<img src="Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
<img> 요소의 src 특성은 상대 URL이므로 브라우저는 웹 페이지의 폴더 위치를 기준으로 폴더를 찾으 Images 려고 시도합니다. 즉, 브라우저에서 이미지 파일을 Admin/Images/PoweredByASPNET.gif찾고 있습니다.
그림 02: PoweredByASPNET.gif 이미지 파일을 찾을 수 없음(전체 크기 이미지를 보려면 클릭)
상대 URL을 절대 URL로 바꾸기
상대 URL의 반대는 절대 URL로, 슬래시(/) 또는 프로토콜(예: )로 http://시작하는 URL입니다. 절대 URL은 알려진 고정 지점에서 리소스의 위치를 지정하기 때문에 웹 사이트의 폴더 구조에 있는 웹 페이지의 위치에 관계없이 모든 웹 페이지에서 동일한 절대 URL이 유효합니다.
그림 2에 표시된 손상된 이미지를 해결하려면 상대 URL 대신 절대 URL을 사용하도록 요소의 src 특성을 업데이트 <img> 해야 합니다. 올바른 절대 URL을 확인하려면 웹 사이트의 웹 페이지 중 하나를 방문하여 주소 표시줄을 검사합니다. 그림 2의 주소 표시줄에 표시된 것처럼 웹 애플리케이션에 대한 정규화된 경로는 입니다 http://localhost:3908/ASPNET_MasterPages_Tutorial_04_VB/. 따라서 요소의 src 특성을 다음 두 개의 절대 URL 중 하나로 업데이트 <img> 할 수 있습니다.
/ASPNET_MasterPages_Tutorial_04_VB/Images/PoweredByASPNET.gifhttp://localhost:3908/ASPNET_MasterPages_Tutorial_04_VB/Images/PoweredByASPNET.gif
잠시 시간을 내어 위에 표시된 양식 중 하나를 사용하여 요소의 src 특성을 절대 URL로 업데이트 <img> 한 다음 브라우저를 ~/Admin/Default.aspx 통해 페이지를 방문합니다. 이번에는 브라우저가 이미지 파일을 올바르게 찾고 표시 PoweredByASPNET.gif 합니다(그림 3 참조).
그림 03: PoweredByASPNET.gif 이미지가 표시됨(전체 크기 이미지를 보려면 클릭)
절대 URL에서 하드 코딩이 작동하지만 HTML을 웹 사이트의 서버 및 폴더 위치에 밀접하게 연결하여 변경 될 수 있습니다. Visual Studio의 기본 제공 ASP.NET 개발 웹 서버가 시작될 때마다 localhost 앞의 포트 번호가 자동으로 선택되므로 양식 http://localhost:3908/... 의 절대 URL을 사용하는 것이 쉽습니다. 마찬가지로 파트는 로컬로 http://localhost 테스트할 때만 유효합니다. 코드가 프로덕션 서버에 배포되면 URL 기반이 와 같은 http://www.yourserver.com다른 항목으로 변경됩니다. 이 애플리케이션 경로가 개발 서버와 프로덕션 서버 간에 서로 다른 경우가 많기 때문에 양식 /ASPNET_MasterPages_Tutorial_04_VB/... 의 절대 URL도 동일한 취약성을 겪습니다.
좋은 소식은 ASP.NET 런타임에 유효한 상대 URL을 생성하는 방법을 제공한다는 것입니다.
및 사용~ResolveClientUrl
절대 URL을 하드 코드하는 대신 ASP.NET 페이지 개발자가 타일(~)을 사용하여 웹 애플리케이션의 루트를 나타낼 수 있습니다. 예를 들어 이 자습서의 앞부분에서 텍스트의 표기법을 ~/Admin/Default.aspx 사용하여 폴더의 Default.aspx 페이지를 참조했습니다 Admin . 는 ~ 폴더가 Admin 웹 애플리케이션 루트의 하위 폴더임을 나타냅니다.
클래스의 ResolveClientUrl 메서드는 Control URL을 가져와서 컨트롤이 있는 웹 페이지에 적합한 상대 URL로 수정합니다. 예를 들어 에서 를 호출 ResolveClientUrl("~/Images/PoweredByASPNET.gif") 하면 가 About.aspx 반환됩니다 Images/PoweredByASPNET.gif. 그러나 에서 ~/Admin/Default.aspx호출하면 가 반환됩니다 ../Images/PoweredByASPNET.gif.
참고
모든 ASP.NET 서버 컨트롤은 클래스에서 Control 파생되므로 모든 서버 컨트롤은 메서드에 ResolveClientUrl 액세스할 수 있습니다. 클래스도 Page 클래스에서 Control 파생되므로 ASP.NET 페이지의 코드 숨김 클래스에서 직접 이 메서드를 사용할 수 있습니다.
선언적 태그에서 사용~
여러 ASP.NET 웹 컨트롤에는 URL 관련 속성이 포함됩니다. HyperLink 컨트롤에는 NavigateUrl 속성이 있고 Image 컨트롤에는 ImageUrl 속성이 있습니다. 렌더링될 때 이러한 컨트롤은 URL 관련 속성 값을 에 ResolveClientUrl전달합니다. 따라서 이러한 속성에 웹 애플리케이션의 루트를 나타내는 가 포함된 ~ 경우 URL은 유효한 상대 URL로 수정됩니다.
ASP.NET 서버 컨트롤만 URL 관련 속성에서 을 변환 ~ 합니다. 와 ~ 같은 <img src="~/Images/PoweredByASPNET.gif" />정적 HTML 태그에 가 나타나면 ASP.NET 엔진은 HTML 콘텐츠의 나머지 부분과 함께 을 브라우저로 보냅니 ~ 다. 브라우저는 가 ~ URL의 일부라고 가정합니다. 예를 들어 브라우저가 태그 <img src="~/Images/PoweredByASPNET.gif" /> 를 수신하는 경우 이미지 파일이 PoweredByASPNET.gif포함된 하위 폴더가 있는 라는 ~ 하위 폴더 Images 가 있다고 가정합니다.
에서 Site.master이미지 태그를 수정하려면 기존 <img> 요소를 ASP.NET Image Web 컨트롤로 바꿉 있습니다. Image Web 컨트롤의 ID 을 PoweredByImage로 설정하고 해당 ImageUrl 속성을 ~/Images/PoweredByASPNET.gif로 설정하고 해당 AlternateText 속성을 "powered by ASP.NET!"로 설정합니다.
<div id="footerContent">
<asp:Image ID="PoweredByImage" runat="server" ImageUrl="~/Images/PoweredByASPNET.gif"
AlternateText="Powered by ASP.NET!" />
</div>
master 페이지를 변경한 후 페이지를 다시 방문 ~/Admin/Default.aspx 합니다. 이번에는 PoweredByASPNET.gif 이미지 파일이 페이지에 표시됩니다(그림 3 참조). Image Web 컨트롤이 렌더링되면 메서드를 ResolveClientUrl 사용하여 해당 ImageUrl 속성 값을 resolve. HTML 원본의 ImageUrl 다음 코드 조각과 같이 에서 ~/Admin/Default.aspx 는 적절한 상대 URL로 변환됩니다.
<div id="footerContent">
<img id="ctl00_PoweredByImage" src="../Images/PoweredByASPNET.gif" alt="Powered by ASP.NET!" />
</div>
참고
URL 기반 웹 컨트롤 속성 ~ 에 사용되는 것 외에도 및 Server.MapPath 메서드를 호출 Response.Redirect 할 때 를 사용할 수도 있습니다. 또한 메서드는 ResolveClientUrl ASP.NET 또는 master 페이지의 선언적 태그에서 직접 호출될 수 있습니다.
마스터 페이지의 나머지 상대 URL 수정
방금 수정한 <img>footerContent 의 요소 외에도 master 페이지에는 주의가 필요한 상대 URL이 하나 더 포함되어 있습니다. 이 지역에는 topContent 를 가리키는 Default.aspx"마스터 페이지 자습서" 링크가 포함됩니다.
<div id="topContent">
<a href="Default.aspx">Master Pages Tutorials</a>
</div>
이 URL은 상대 URL이므로 방문하는 콘텐츠 페이지의 폴더에 있는 페이지로 사용자를 Default.aspx 보냅니다. 이 링크가 항상 루트 폴더를 가리키 Default.aspx 도록 하려면 표기법을 사용할 수 있도록 요소를 HyperLink 웹 컨트롤로 ~ 바꿔 <a> 야 합니다.
요소 태그를 <a> 제거하고 해당 위치에 HyperLink 컨트롤을 추가합니다. HyperLink의 ID 를 lnkHome, 해당 NavigateUrl 속성을 ~/Default.aspx로 설정하고 해당 Text 속성을 "마스터 페이지 자습서"로 설정합니다.
<div id="topContent">
<asp:HyperLink ID="lnkHome" runat="server" NavigateUrl="~/Default.aspx"
Text="Master Pages Tutorials" />
</div>
이것으로 끝입니다. 이 시점에서 master 페이지의 모든 URL은 master 페이지 및 콘텐츠 페이지가 있는 폴더에 관계없이 콘텐츠 페이지에서 렌더링할 때 올바르게 기반됩니다.
섹션의<head>자동 URL 확인
마스터 페이지를 사용하여 Site-Wide 레이아웃 만들기 자습서에서는 해당 지역의 파일에 를 추가 <link>Styles.css 했습니다<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>
<link> 요소의 href 특성은 상대적이지만 런타임에 자동으로 적절한 경로로 변환됩니다. 마스터 페이지의 제목, 메타 태그 및 기타 HTML 헤더 지정 자습서에서 설명한 것처럼 이 <head> 지역은 실제로 서버 쪽 컨트롤이므로 렌더링될 때 내부 컨트롤의 내용을 수정할 수 있습니다.
이를 확인하려면 페이지를 다시 ~/Admin/Default.aspx 방문하고 브라우저로 전송된 HTML 원본을 확인합니다. 아래 코드 조각에서 알 수 <link> 있듯이 요소의 href 특성은 적절한 상대 URL ../Styles.css로 자동으로 수정되었습니다.
<head>
<title>
Default
</title>
<link href="../Styles.css" rel="stylesheet" type="text/css" />
</head>
요약
마스터 페이지에는 URL을 통해 지정해야 하는 링크, 이미지 및 기타 외부 리소스가 자주 포함됩니다. master 페이지와 콘텐츠 페이지가 동일한 폴더에 없을 수 있으므로 상대 URL 사용을 삼가는 것이 중요합니다. 하드 코딩된 절대 URL을 사용할 수 있지만, 이렇게 하면 절대 URL이 웹 애플리케이션에 밀접하게 결합됩니다. 웹 애플리케이션을 이동하거나 배포할 때와 마찬가지로 절대 URL이 변경되는 경우 다시 돌아가서 절대 URL을 업데이트해야 합니다.
이상적인 방법은 타일(~)을 사용하여 애플리케이션 루트를 나타내는 것입니다. URL 관련 속성을 포함하는 ASP.NET 웹 컨트롤은 ~ 런타임 시 애플리케이션 루트에 을 매핑합니다. 내부적으로 웹 컨트롤은 클래스의 ResolveClientUrl 메서드를 Control 사용하여 유효한 상대 URL을 생성합니다. 이 메서드는 공용이며 모든 서버 컨트롤(클래스 포함 Page )에서 사용할 수 있으므로 필요한 경우 코드 숨김 클래스에서 프로그래밍 방식으로 사용할 수 있습니다.
행복한 프로그래밍!
추가 정보
이 자습서에서 설명하는 topics 대한 자세한 내용은 다음 리소스를 참조하세요.
저자 정보
여러 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
다음에 대한 사용자 의견 제출 및 보기