No nonsense MVC getting started tutorial 4 [use layout in the View]

Objectives

1. The Razor template can be reused to build page componentization

Contents

1. Dashboard page _ layout. cshtml

2. Custom Controls

3. Default layout reference (_ viewstart. cshtml)

1. The master page _ layout. cshtml is similar to the. master file in the traditional webform and serves as the target for reuse of the overall page framework.

1. motherboard pageCodePreview

 1   <!  Doctype html  >  2   <  Html  >  3   <  Head >  4       <  Title  > @ Viewbag. Title </  Title  >  5       <  Link  Href  = "@ URL. Content ("  ~ /Content/site.css ")" rel  = "Stylesheet"  Type = "Text/CSS"   />  6       <  Script  SRC  = "@ URL. Content ("  ~ /Scripts/jquery-1.5.1.min.js ")" Type  = "Text/JavaScript"  > </  Script  >  7   </  Head  > 8   9   <  Body  >  10   @ Renderbody ()  11   </  Body  >  12   </  Html  > 

2. subpage title settings

Although multiple child pages can reference the same parent page, different page titles can be set separately. @ Viewbag. title is a placeholder for a title. assign a value to the variable of the title in control or on the page.

1           //  Layoutdemo_01  2           Public  Actionresult layoutdemo_01 ()  3   {  4 Viewbag. Title = "  Layout page 1  "  ;  5               Return  View (); 6   }  7   8           //  Layoutdemo_02  9           Public  Actionresult layoutdemo_02 ()  10   {  11 Viewbag. Title = "  Layout page 2  "  ; 12               Return  View ();  13 }

 
1 @{2 Viewbag. Title = "layout page 1 ";3}
 

3. Configure the main content of the subpage
The main content of the page is identified by @ renderbody. The content of the sub-page is directly replaced with this method.

 1   //  First page  2   @{  3 Layout = " ~ /Views/shared/_ layout. cshtml  "  ;  4   }  5   Here is the content of layoutg 1.  6   7   8   //  Second page  9   @{  10 Layout = "  ~ /Views/shared/_ layout. cshtml "  ;  11   }  12 Here is the content of layout 2.

4. settings of other content on the subpage

The following code shows that most of the content on the motherboard is not continuous:

 1   <!  Doctype html  >  2   <  Html  >  3   <  Head >  4       <  Title  > @ Viewbag. Title </  Title  >  5       <  Link  Href  = "@ URL. Content ("  ~ /Content/site.css ")" rel  = "Stylesheet"  Type = "Text/CSS"   />  6       <  Script  SRC  = "@ URL. Content ("  ~ /Scripts/jquery-1.5.1.min.js ")" Type  = "Text/JavaScript"  > </  Script  >  7   </  Head  > 8   <  Body  >  9       <  BR  />  10   @ * Main part *@  11   @ Renderbody ()  12       <  BR  />  13      <  BR  />  14   @ * Other content *@  15   @ Rendersection ("masterpart", false)  16   </  Body  >  17   </  Html  > 

At this point, we use @ rendersection to define the placeholder sub-page implementation. The @ rendersection method accepts two parameters: ("name", "whether it is required "), if required, the sub-page must implement this method; otherwise, an error is returned.
The subpage code is as follows:

1 @{2 Layout = "~ /Views/shared/_ layout. cshtml ";3 }4 Here is the content of layoutg 1.5 @ Section masterpart {6 This is the second part of the motherboard page.7}
 

@ Section + space + name {content} to replace the content on the dashboard page.
5. Other considerations

The name of the dashboard page is optional, but it is recommended to start.

6. Overall Running Effect

 

2. Custom Controls

Create as a patial View

After creation, enter the following code in the page:

The time code is as follows:

1 @{2 Layout = "~ /Views/shared/_ layout. cshtml ";3 }4 @ Html. Partial ("~ /Views/shared/_ usercontrol. cshtml ")5Here is the content of layoutg 1.
 

The running effect is as follows:

3. default layout reference (_ viewstart. cshtml) When layout is not specified for our page, if _ viewstart exists globally or in the same folder for the project. when cshtml is used, layout of the page automatically inherits from _ viewstart. cshtml, if different folder levels have _ viewstart. cshtml inherits the one closest to the page. _ Viewstart. cshtml is a special object.

1. Use global _ viewstart. cshtml

_ Viewstart. cshtml file location and content, as shown in:

In the user folder, create the page layoutdemo_03.cshtml, as shown in:

Layout is not defined in layoutdemo_03.cshtml, but in fact its layout inherits _ viewstart. cshtml:

 
1 @{2 Layout = "~ /Views/shared/_ layout. cshtml ";3}
 

The running effect is as follows:

2. Use _ viewstart. cshtml in the folder

Create the file _ layoutnew. cshtml in the shared folder, as shown in:

We added the different text "new layout" above, and then created the file _ viewstart. cshtml in the user folder, as shown in:

Modify the content of _ viewstart. cshtml in the user folder to layout = "~ /Views/shared/_ layoutnew. cshtml "; when we browse layoutdemo_03.cshtml again, the reference of the layout of the page inherits the _ viewstart in the user folder. cshtml:

Note: If you do not want the page to use any motherboard page or layout page, you need to set layout = NULL, as shown below:

1 @{2 Layout = NULL;3}
 

Copyright: http://www.cnblogs.com/iamlilinfeng