Home > Developer > Web Develop
1. Ability to reuse razor templates for component building of pages
Directory of this document1. Master Board page _layout.cshtml
2. User-defined controls
3. Use of the default layout reference (_viewstart.cshtml)
1. The motherboard page _layout.cshtml is similar to the. master file in the traditional WebForm, and plays the purpose of the page's overall framework reuse.1. master Page Code Preview
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>@ViewBag. Title</title>5 <Linkhref= "@Url. Content ("~/content/site.css ")" Rel= "stylesheet"type= "Text/css" />6 <Scriptsrc= "@Url. Content ("~/scripts/jquery-1.5.1.min.js ")" Type= "Text/javascript"></Script>7 </Head>8 9 <Body>Ten @RenderBody () One </Body> A </HTML>
2. Settings for sub-page headings
Although multiple sub-pages can reference the same master page, different page titles can be set individually. @ViewBag. Title is a placeholder for the title, which assigns a value to the variable in the control or page.
1 //layoutdemo_012 Publicactionresult layoutdemo_01 ()3 {4Viewbag.title ="Layout Page One";5 returnView ();6 }7 8 //layoutdemo_029 Publicactionresult layoutdemo_02 ()Ten { OneViewbag.title ="Layout Page Two"; A returnView (); -}
1 @{2 viewbag.title = "layout Page one"; 3 }3. Settings for the main content of the child page
The main content of the page is identified by @renderbody (). The content of the child page is replaced directly with the method.
1 //first Page2 @{3Layout ="~/views/shared/_layout.cshtml";4 }5 Here's the content of LAYOUTG.6 7 8 //a second page9 @{TenLayout ="~/views/shared/_layout.cshtml"; One } AThis is the content of layout two.
4. Settings for other content on sub-pages
Because most of the content of the parent plane is not contiguous, the following code shows:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title>@ViewBag. Title</title>5 <Linkhref= "@Url. Content ("~/content/site.css ")" Rel= "stylesheet"type= "Text/css" />6 <Scriptsrc= "@Url. Content ("~/scripts/jquery-1.5.1.min.js ")" Type= "Text/javascript"></Script>7 </Head>8 <Body>9 <BR/>Ten @* main part *@ One @RenderBody () A <BR/> - <BR/> - @* Other part content *@ the @RenderSection ("Masterpart", false) - </Body> - </HTML>
At this point we use @rendersection to define the placeholder page implementation, @RenderSection method accepts two parameters: ("name", "whether it is necessary"), if necessary, then the child page must implement the method, otherwise it will be an error.
The Sub-page code is as follows:
1 @{2 Layout = "~/views/shared/_layout.cshtml"; 3 }4 Here is the content of LAYOUTG 5@section masterpart{6 This is the second part of the master page 7 }@section + space + name {content} to replace the contents of the master page.
5. Other items of attention
The name of the master page can be arbitrary, but it is recommended to start with an "_" underscore.
6. Overall operation effect
2. User-defined controlsSelect Create as a patial view when creating
After creation, fill in the following code on the page:
The following code is used:
1 @{2 Layout = "~/views/shared/_layout.cshtml"; 3 }4@Html. Partial ("~/views/shared/_usercontrol.cshtml")5 Here is the content of LAYOUTGThe results are as follows:
3. Use of the default layout reference (_viewstart.cshtml) when layout is not specified on our page, the layout of the page automatically inherits from the _viewstart.cshtml when the item is present in the global or in the same folder. Viewstart.cshtml, if there are _viewstart.cshtml at different folder levels, inherit the closest one from the page. _viewstart.cshtml is a special file.1. Using the global _viewstart.cshtml
_viewstart.cshtml the file location and content as shown in:
We create the page layoutdemo_03.cshtml in the user folder, as shown in:
Layout is not defined in layoutdemo_03.cshtml, but in fact his layout inherits _viewstart.cshtml as:
1 @{2 Layout = "~/views/shared/_layout.cshtml"; 3 }The results are as follows:
2. Use the _viewstart.cshtml in the folder
Create a new file _layoutnew.cshtml within the shared folder as shown in:
We added a different text "new layout" above and then created a new file in the user folder _viewstart.cshtml, as shown in:
We changed the contents of the _viewstart.cshtml in the user folder to Layout = "~/views/shared/_layoutnew.cshtml", and when we browsed layoutdemo_03.cshtml again, A reference to the layout of the page inherits the _viewstart.cshtml within the user folder, which works as follows:
Description: If you do not want the page to use any of the master and layout pages, you need to set layout = null as follows:
1 @{2 Layout = null; 3 }In MVC, the layout of the view uses
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
