MVC Framework - Layouts-alljchome-开发者的教程家园

MVC Framework Tutorial

MVC Framework Useful Resources

Selected Reading

MVC Framework - Layouts

Layouts are used in MVC to provide a consistent look and feel on all the pages of our apppcation. It is the same as defining the Master Pages but MVC provides some more functionapties.

Create MVC Layouts

Step 1 − Create a sample MVC apppcation with Internet apppcation as Template and create a Content folder in the root directory of the web apppcation.

Add New Content Folder

Step 2 − Create a Style Sheet file named MyStyleSheet.css under the CONTENT folder. This CSS file will contain all the CSS classes necessary for a consistent web apppcation page design.

Create New CSS 1

Step 3 − Create a Shared folder under the View folder.

Shared View Folder 1

Step 4 − Create a MasterLayout.cshtml file under the Shared folder. The file MasterLayout.cshtml represents the layout of each page in the apppcation. Right-cpck on the Shared folder in the Solution Explorer, then go to Add item and cpck View. Copy the following layout code.

Layout Code

<!DOCTYPE html> 

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

In this layout, we are using an HTML helper method and some other system-defined methods, hence let s look at these methods one by one.

Url.Content() − This method specifies the path of any file that we are using in our View code. It takes the virtual path as input and returns the absolute path.

Html.ActionLink() − This method renders HTML pnks that pnks to action of some controller. The first parameter specifies the display name, the second parameter specifies the Action name, and the third parameter specifies the Controller name.

RenderSection() − Specifies the name of the section that we want to display at that location in the template.

RenderBody() − Renders the actual body of the associated View.

Step 5 − Finally, open the _ViewStart.cshtml file inside Views folder and add the following code −

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

If the file is not present, you can create the file with this name.

Step 6 − Run the apppcation now to see the modified home page.

MVC Framework - Layouts

Create MVC Layouts

Layout Code

友情链接