최신 웹 개발 튜토리얼
 

ASP.NET웹 페이지 - 페이지 레이아웃


웹 페이지로 일관된 레이아웃 웹 사이트를 쉽게 만들 수 있습니다.


일관성있는 모양

인터넷에서 당신은 일관된 모양과 느낌을 가진 많은 웹 사이트를 발견 할 것입니다 :

  • 모든 페이지는 동일한 헤더가
  • 모든 페이지는 동일한 바닥 글을
  • 모든 페이지는 동일한 스타일과 레이아웃을 가지고

웹 페이지로이 매우 효율적으로 수행 할 수 있습니다. 당신은 내용의 재사용 가능한 블록 수 (content blocks) 별도의 파일에 머리글과 바닥 글, 등을.

또한 레이아웃 템플릿을 사용하여 모든 페이지에 대한 일관된 레이아웃을 정의 할 수 있습니다 (layout file) .


내용 블록

많은 웹 사이트의 모든 페이지에 표시되는 내용이 (like headers and footers) .

웹 페이지 사용하면 사용할 수 있습니다 @ RenderPage() 별도의 파일에서 내용을 가져 오는 방법을.

내용 블록 (from another file) 웹 페이지에 어디 가져올 수 있습니다, 그리고 그냥 일반 웹 페이지처럼 텍스트, 마크 업 및 코드를 포함 할 수 있습니다.

예를 들어 일반적인 머리글과 바닥 글을 사용하여, 이것은 당신에게 많은 작업을 절약 할 수 있습니다. 당신은 모든 페이지에서 동일한 콘텐츠를 작성할 필요가 없습니다, 당신은 머리글이나 바닥 글 파일을 변경할 때, 내용은 모든 페이지에 업데이트됩니다.

이 코드에서의 모습입니다 :

<html>
<body>
@RenderPage("header.cshtml")
<h1>Hello Web Pages</h1>
<p>This is a paragraph</p>
@RenderPage("footer.cshtml")
</body>
</html>
»실행 예

레이아웃 페이지를 사용하여

이전 섹션에서, 당신은 많은 웹 페이지에서 동일한 콘텐츠를 포함하는 것이 쉽다는 것을 보았다.

일관성있는 모양을 만드는 또 다른 방법은 레이아웃 페이지를 사용하는 것입니다. 레이아웃 페이지는 웹 페이지의 내용, 구조를 포함하고 있지만. 웹 페이지 때 (content page) 레이아웃 페이지에 링크, 그것은 레이아웃 페이지에 따라 표시됩니다 (template) .

레이아웃 페이지는에 대한 호출에서 제외하고는 일반 웹 페이지처럼 @ RenderBody() 콘텐츠 페이지가 포함됩니다 방법.

각 콘텐츠 페이지는 레이아웃 지시어로 시작해야합니다.

이 코드에서의 모습입니다 :

레이아웃 페이지 :

<html>
<body>
<p>This is header text</p>
@RenderBody()
<p>&copy; 2014 w3ii. All rights reserved.</p>
</body>
</html>

모든 웹 페이지 :

@{Layout="Layout.cshtml";}

<h1>Welcome to w3ii</h1>

<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laborisnisi ut aliquip ex ea commodo consequat.
</p>
»실행 예

DRY - 자신을 반복하지 마십시오

두 ASP.NET 도구, 내용 블록 및 레이아웃 페이지를 사용하면 웹 응용 프로그램을 일관된 모양을 제공 할 수 있습니다.

모든 페이지에 동일한 정보를 반복 할 필요가 없기 때문에 이러한 도구는 또한 당신에게 많은 작업을 저장합니다. 마크 업, 스타일 및 코드를 중앙 집중화하는 웹 응용 프로그램은 훨씬 더 관리 및 유지 보수가 쉬워집니다.


탐색되는 파일을 방지

ASP.NET으로 밑줄로 시작하는 이름을 가진 파일을 웹에서 찾아 볼 수 없습니다.

당신이 당신의 사용자가 볼되는 콘텐츠 블록 또는 레이아웃 파일을 방지하기 위해 파일 이름을 바꾸려면 :

_header.cshtml

_footer.cshtml

_Layout.cshtml


민감한 정보를 숨기기

ASP.NET과 함께, (등 데이터베이스 암호, 이메일 암호) 민감한 정보를 숨길 수있는 일반적인 방법은라는 별도의 파일에있는 정보를 유지하는 것입니다 "_AppStart" .

_AppStart.cshtml

@{
WebMail.SmtpServer = "mailserver.example.com";
WebMail.EnableSsl = true;
WebMail.UserName = "[email protected]";
WebMail.Password = "your-password";
WebMail.From = "[email protected]";
}