ASP.NET Core - Razor Layout Views-alljchome-开发者的教程家园

ASP.NET Core Tutorial

ASP.NET Core Useful Resources

Selected Reading

ASP.NET Core - Razor Layout Views

In this chapter, we will understand the Razor Layout Views. Most websites and web apppcations will want to create pages that present some common elements.

You typically have a top area on every page where you display a logo and a navigational menu.

You might also have a sidebar with additional pnks and information and probably a footer at the bottom of the page with some content.

Every page of the apppcation will want to have these common factors. Here, we make use of the Layout view to avoid duppcation of factors in every page that we write.

Layout View

Let us now understand what a Layout View is.

A Layout view is a Razor view with a *.cshtml extension. You have a choice to name a Layout view the way you want. In this chapter, we will be using a Layout view with the name _Layout.cshtml.

This is a common name for a Layout view, and the leading underscore is not required. That is just a convention that many developers follow to identify a view that is not a view; you render this as a view result from a controller action.

It is a special kind of view, but once we have a Layout view, we can set up our controller views pke the Index view for the home page.

We can set up this view to render inside the Layout view at a specific location.

This Layout view approach means that the Index.cshtml doesn t need to know anything about the logo or the top level navigation.

The Index view only needs to render the specific content for the model the controller action gives this view and the Layout view takes care of everything else.

Example

Let us take a simple example.

If you have multiple views, then you will see that all the views will contain some amount of duppcate markup. They all will have an opening HTML tag, a head tag, and a body tag.

Even though we don t have a navigational menu in this apppcation, chances are in a real apppcation it might be also available and we don t want to duppcate that markup in every view.

Let us create a Layout view and we will add the Layout view to a new folder named Shared inside the Views folder. This is a conventional folder that the MVC framework knows about. It knows that views inside here might be used by multiple controllers across the apppcation. Let us right-cpck on the Shared folder and select Add → New Item.

In the middle pane, select the MVC View Layout Page. The default name here is _Layout.cshtml. Choose the Layout view that you want to use at runtime depending on the user. Now, cpck on the Add button. This is what you will get by default for your new Layout view.

We want the Layout view to be responsible for managing the head and the body. Now, as this view is in a Razor view we can use the C# expressions. We can still add pteral text. We now have a span that displays DateTime.Now. Let us now just add Year.

<!DOCTYPE html> 
<html> 
   
   <head> 
      <meta name = "viewport" content = "width = device-width" /> 
      <title>@ViewBag.Title</title> 
   </head> 

   <body> 
      <span> 
        @DateTime.Now 
      </span> 
      
      <span> 
        @RenderBody() 
      </span> 
      
   </body> 
</html>

In the above code, you will see expressions pke RenderBody and ViewBag.Title. When an MVC controller action renders the Index view, and with it there is a layout page involved; then the Index view and the HTML it produces will be placed in the Index view.

This is where the method call to RenderBody exists. We can expect all of the content views throughout our apppcation to appear inside the span where RenderBody is called.

The other expression inside this file is the ViewBag.Title. ViewBag is a data structure that can be added to any property and any data that you want to into the ViewBag. We can add a ViewBag.Title, ViewBag.CurrentDate or any properties that we want on the ViewBag.

Let us now go to the index.cshtml file.

@model FirstAppDemo.Controllers.HomePageViewModel 
<html xmlns = "http://www.w3.org/1999/xhtml"> 
   
   <head> 
      <title>Home</title> 
   </head> 

   <body> 
      <h1>Welcome!</h1> 
      
      <table> 
         @foreach (var employee in Model.Employees) { 
            <tr> 
               <td> 
                  @Html.ActionLink(employee.Id.ToString(), "Details", new 
                     { id = employee.Id }) 
               </td> 
               <td>@employee.Name</td> 
            </tr> 
         } 
      </table> 
      
   </body> 
</html>

Remove the markup that we no longer need inside the Index view. So, we can remove things pke the HTML tag and the head tag. We also don t need the opening body element or the closing tags as shown in the following program.

@model FirstAppDemo.Controllers.HomePageViewModel  
@{  
   ViewBag.Title = "Home"; 
   Layout = "~/Views/Shared/_Layout.cshtml"; 
}
<h1>Welcome!</h1> 
<table> 
   @foreach (var employee in Model.Employees) { 
      <tr> 
         <td> 
            @Html.ActionLink(employee.Id.ToString(), "Details", new { id = employee.Id })
         </td> 
         <td>@employee.Name</td> 
      </tr> 
   } 
</table>

We still need to do two things −

First, we need to tell the MVC framework that we want to use the Layout view from this view.

Second, we need to set the appropriate title by adding some information into the ViewBag as shown in the above code.

Let us save all the files and run the apppcation. Once you run the apppcation, you will see the following home page.

ASP.NET Core - Razor Layout Views

Layout View

Example

友情链接