Home > Developer > Web Develop
I. Introduction and use of the master page
The master page has an extension of ". Cshtml", also called a View layout page, which corresponds to a template for a Web page. In other pages, as long as the master page is referenced, the page content of the master page can be automatically displayed, the designer can modify the referenced master page of the reserved parts, the other parts remain unchanged, so that the style of multiple pages will be consistent, to the design of the Web page is very convenient.
1. Key points for creating a master Page view
(1), in the views of the Sub-folder shared folder inside the Add.
(2), with "_" prefix as the beginning.
(3), with "layout.cshtml" as the end.
2. The three function points in the MVC master page:
(1), renderbody-sub-page content placeholder.
(2), renderpage-reference renders a page.
(3), rendersection-content placeholder.
If you create a new MVC program, do you have a master Page view in it? To view the index view:
As can be seen from the above, index only two Div, but a basic page code needs to have HTML, head, body and other elements of the tag composition, but there is no. Also, browse the index view:
Then view the page source code:
From the above, you can see HTML, head, body and other HTML elements, as you can see, MVC has been used in the master page. The _viewstart.cshtml view inside the shared folder is used by default in MVC.
Second, Renderbody
The role of Renderbody is the sub-page content placeholder. That is, where renderbody is used in the master page, the content of the sub-page is used instead. Take the _layout view as an example:
Renderbody is used in the _layout master page, so this part of the content will be replaced by the contents of index when running.
Let's redefine a master page ourselves and define a sub-page to use this master page to see how Renderbody works.
1. Adding a master Page
Right-click on the shared folder to add, select MVC5 Layout page
2. Named _testlayout
The generated template page code is as follows:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>@ViewBag. Title</title></Head><Body> <Div>@RenderBody ()</Div></Body></HTML>
3, modify the master page, the modified master page code is as follows:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>@ViewBag. Title</title></Head><Body> <Div>I am a master page and are not allowed to change in a sub-page<!--content Page Placeholder -@RenderBody ()</Div></Body></HTML>
4. Create a child page using master page
Add a actionname to test action method inside the home controller and add the view:
The resulting test view is as follows:
Note: If layout=null, it means that master Page view is not used.
Modify the Test view also, the modified code is as follows:
@{ viewbag.title = "Test"; Layout = "~/views/shared/_testlayout.cshtml";} < H2 > Test</h2><Div> I am the Sub page-home controller's test method </div>5. Run the program and browse the test view
By running the results and viewing the Web page source code, you can see that the page consists of a master page and a child page.
Third, Renderpage
Renderpage: A reference renders a page that refers to the rendering of another page in one page, which means that another page is part of the page.
Take the page footer layout as an example to illustrate Renderpage.
1. Add a new partial page to the shared folder and name it footerpartial.
2, modify the division Also
The modified code is as follows:
< Div > I am the footer </div>
3. Use the partial page in the master page
The parameters for using the Renderpage,renderpage method under Renderbody are as follows:
As you can see, when using the Renderpage () method, you only need to know the path of the partial page, and the modified master page code is as follows:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>@ViewBag. Title</title></Head><Body> <Div>I am a master page and are not allowed to change in a sub-page<!--content Page Placeholder -@RenderBody () @RenderPage ("_footerpartial.cshtml")</Div></Body></HTML>
4. Operation result
Iv. rendersection
Let's take a look at the following example:
Add a script to the test view with the modified Test View code as follows:
This is running the program and the results are as follows:
The results show that the script executes before the view content is rendered, which is not the effect we want. We want to execute the script after the entire page has been loaded. Modify the layout page code as follows:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>@ViewBag. Title</title></Head><Body> <Div>I am a master page and are not allowed to change in a sub-page<!--content Page Placeholder -@RenderBody ()<Divstyle= "Color:blue"> <P> <!---->@RenderSection ("Sectioncontent")</P> </Div>@RenderPage ("_footerpartial.cshtml")</Div></Body></HTML>
The sub-page is modified as follows:
Operation Result:
What happens if rendersection is defined in the master page and the defined rendersection is not processed in the child page?
It can be seen that if the definition of the rendersection is not processed in the sub-page, the program runs directly when the error: Sectioncontent section is undefined. If you do not want to deal with rendersection how to modify it?
The Rendersection method is as follows:
If you do not want to process rendersection, then the required parameter is set to False, and the modified layout page code is as follows:
<!DOCTYPE HTML><HTML><Head> <Metaname= "Viewport"content= "Width=device-width" /> <title>@ViewBag. Title</title></Head><Body> <Div>I am a master page and are not allowed to change in a sub-page<!--content Page Placeholder -@RenderBody ()<Divstyle= "Color:blue"> <P> <!---->@RenderSection ("Sectioncontent", false)</P> </Div>@RenderPage ("_footerpartial.cshtml")</Div></Body></HTML>
At this point, the program will run normally.
From the above example, we can use the following method to solve the problem in the beginning example: Define the rendersection on the end tag of the BODY element, then the script will be executed after the page is fully loaded, no matter where the script is defined anywhere on the child page.
The layout page is defined as follows:
V. Summary
1, Renderbody
There is no "master page" in the Razor engine, instead a page called "Layout" (_layout.cshtml) is placed in the shared view folder. In this page, you will see a statement in the label:
@RenderBody ()
In fact, it works like a server control in a master page, when you create a view based on this layout page, the contents of the view are merged with the layout page, and the contents of the newly created view are rendered between the labels through the @renderbody () method of the layout page.
This method does not require parameters and can only occur once.
2, Renderpage
From the name can guess this method is to render a page. For example, the fixed head of the Web page can be placed in a shared view file, and then in the layout page through this method call, use the following:
@RenderPage ("_footerpartial.cshtml")
can take parameters
@RenderPage ("_footerpartial.cshtml", new {parm= "my", parm2= "You"})
Invoke page Get Parameters:
Gets the arguments passed by the Renderpage ().
@PageData ["Param"]
3, Rendersection
The layout page also has the concept of section, which means that if a section is defined in a view template, it can be rendered separately, using the following:
@RenderBody ()
@RenderPage ("_footerpartial.cshtml")
A section is added to the template.
@RenderSection ("Head")
Of course, you also define the section in the view, otherwise an exception will occur:
@secion head{
Do
}
To prevent exceptions due to a missing section, you can provide a 2nd parameter to Rendersection ():
@RenderSection ("Head", false)
Or
@if (issectiondefined ("Head"))
{
@RenderSection ("Head", false)
}
Else
{
<p>head section was not defined!</p>
}
4, @Html. Partial
The partial creates its own TextWriter instance each time and caches the content into memory, and finally sends the contents of all write outputs to a Mvcstring object.
More often we will use @{html.renderpartial ("Details");} Rather than @html.partial.
The difference between html.renderpartial () and @html.partial:
Html.renderpartial () output directly to the current HttpContext (because it is a direct output, so the performance is good).
Html.partial generates a string directly from the view content and returns (equivalent to having an escaped procedure).
The difference between renderpage () and renderpartial ()
A page called by Renderpage () can only use it to pass past data.
RenderPartial () can use data such as ViewData, model, and so on.
such as: @{html.renderpartial ("Basicchart", model);}
With this overload, you can use a strong type in a partial view, and then use the second parameter in the main master to pass through the model.
@{html.renderpartial ("Basicchart", viewdata["MyData"]);}
MVC tutorial Eight: Master page (Layout page) view
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
