MVC 프레임 워크-레이아웃

레이아웃은 MVC에서 사용되어 애플리케이션의 모든 페이지에 일관된 모양과 느낌을 제공합니다. 마스터 페이지를 정의하는 것과 동일하지만 MVC는 더 많은 기능을 제공합니다.

MVC 레이아웃 만들기

Step 1 − 인터넷 애플리케이션을 템플릿으로 사용하여 샘플 MVC 애플리케이션을 생성하고 웹 애플리케이션의 루트 디렉토리에 Content 폴더를 생성합니다.

Step 2− CONTENT 폴더 아래에 MyStyleSheet.css라는 스타일 시트 파일을 생성합니다. 이 CSS 파일에는 일관된 웹 애플리케이션 페이지 디자인에 필요한 모든 CSS 클래스가 포함됩니다.

Step 3 − View 폴더 아래에 공유 폴더를 생성합니다.

Step 4− Shared 폴더 아래에 MasterLayout.cshtml 파일을 생성합니다. MasterLayout.cshtml 파일은 애플리케이션의 각 페이지 레이아웃을 나타냅니다. 솔루션 탐색기에서 공유 폴더를 마우스 오른쪽 버튼으로 클릭 한 다음 항목 추가로 이동하여보기를 클릭합니다. 다음 레이아웃 코드를 복사하십시오.

레이아웃 코드

<!DOCTYPE html> 

<html lang = "en"> 
   <head> 
      <meta charset = "utf-8" /> 
      <title>@ViewBag.Title - Tutorial Point</title> 
      <link href = "~/favicon.ico" rel = "shortcut icon" type = "image/x-icon" />
      <link rel = "stylesheet" href = "@Url.Content("~/Content/MyStyleSheet.css")" />
   </head> 
   
   <body> 
      <header> 
         
         <div class = "content-wrapper"> 
            <div class = "float-left"> 
               <p class = "site-title"> 
                  @Html.ActionLink("Tutorial Point", "Index", "Home")
               </p> 
            </div> 
            
            <div class = "float-right">
               <nav> 
                  <ul id = "menu"> 
                     <li>@Html.ActionLink("Home", "Index", "Home")</li> 
                      <li>@Html.ActionLink("About", "About", "Home")</li>
                  </ul> 
               </nav> 
            </div> 
         </div> 
      
      </header>
      <div id = "body"> 
         @RenderSection("featured", required: false) 
         <section class = "content-wrapper main-content clear-fix"> 
            @RenderBody() 
         </section> 
      </div>
      
      <footer>
         <div class = "content-wrapper">
            <div class = "float-left"> 
               <p>© @DateTime.Now.Year - Tutorial Point</p> 
            </div> 
         </div> 
      </footer>
   
   </body>
</html>

이 레이아웃에서는 HTML 도우미 메서드와 다른 시스템 정의 메서드를 사용하고 있으므로 이러한 메서드를 하나씩 살펴 보겠습니다.

Url.Content()−이 방법은 View 코드에서 사용중인 파일의 경로를 지정합니다. 가상 경로를 입력으로 사용하고 절대 경로를 반환합니다.
Html.ActionLink()−이 방법은 일부 컨트롤러의 동작으로 연결되는 HTML 링크를 렌더링합니다. 첫 번째 매개 변수는 표시 이름, 두 번째 매개 변수는 작업 이름, 세 번째 매개 변수는 컨트롤러 이름을 지정합니다.
RenderSection() − 템플릿의 해당 위치에 표시 할 섹션의 이름을 지정합니다.
RenderBody() − 관련 뷰의 실제 본문을 렌더링합니다.

Step 5 − 마지막으로 Views 폴더에서 _ViewStart.cshtml 파일을 열고 다음 코드를 추가합니다.

@{ 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}

파일이 없으면이 이름으로 파일을 만들 수 있습니다.

Step 6 − 수정 된 홈 페이지를 보려면 지금 응용 프로그램을 실행하십시오.