MVC Template Page

Source: Internet
Author: User

http://blog.csdn.net/zx13525079024/article/details/8301943

This section demonstrates how to use the template page in MVC3, in the traditional WebForm design pattern, we use masterpage as the template page, and in the MVC3 Razor view design, we use a different approach as the template page.

Create a new MVC3 project, in solution resource management, we can see a shared folder underneath the Views folder. There is a _layout.cshtml page in the shared folder. This is the default template page in the project. Such as

1. Create a new content page

The content page is also called the View layout page in MVC3, you can right-select the View folder, add a view to add a content page, and then select the appropriate template. Here is the content page we created viewpageone.cshtml

Pages that use a template page automatically generate code in the page. To specify a template page, use layout to specify a specific template page. If there is no layout property in the content page, the default template page is used

@{    "viewpageone";     " ~/views/shared/_layout.cshtml " ;} 
View Code

If layout is specified as NULL, it means that the template page is not used

@{    "viewpageone";     NULL ;}
View Code

2. New Template page

Right-Select the shared file, then select Add New item in the menu, pop up the Add New Item dialog box, and then select the MVC3 layout page, then add the completed Layout page, below the layout page we added _layoutpageone.cshtml

3. specify a template page for a file individually

If a page does not want to use the default template page, you can specify a template page for it separately, and the following code specifies the template page for the content page as the template page you just created _layoutpageone.cshtml

@{    "viewpageone";    Layout="~/views/shared/_layoutpageone.cshtml";} 
View Code

4. Specify a template page for a view folder

If you want to use the same template file for all the views under a controller, you can create a _viewstart.cshtml file under the controller's corresponding attempt folder, and then in _ Viewstart.cshtml inside Specifies the template page to use

@{
Layout = "~/views/shared/_layoutpageone.cshtml";
}

This allows you to specify the view below a controller to use a template file

5. The page does not use the template page

If a content page does not want to use a template page, you can set _layout to null

You can also add a view page without selecting a template.

[email protected] ()

@RenderBody () Use the location in the template page to represent the content page in the template. When you create a content page with a template page, the content page appears in the template page where @renderbody () is located,

There can be only one @renderbody () in a template page.

[email protected]

@RenderSection is used to define an area in the template layout, where content pages can define something to populate this area, such as the JS file referenced in the content page, which can be populated to the section position of the template page. Individual information for each content page, which can be displayed in this area of the template page.

@RenderSection has a single parameter, the first parameter defines the name of the section, the 2nd argument is a Boolean type, and if true, indicates that the content page must define the section, or false, to indicate that the content page can define sections, or it can not define .

Template page

<! DOCTYPE html>        @RenderBody (    )</div>      <div>           Note:           @RenderSection ("Remark"false);         </div></body>
View Code

Content page

@{    " home ";}     <a href="http://asp.net/mvc " title="ASP. NET MVC website >http://asp.net/mvc</a >. </p>@section remark{    I am home    }<p> Welcome </p>
View Code

[Email protected]

@RenderPage is used to represent the content of another page that is rendered in one page. The parameter specifies the location of the page to render.

We create a new footer.cshtml file under the shared folder, then write the copyright information on it, and then open a place in the template page to render the footer page.

<! DOCTYPE html>        @RenderBody (    )</div>      <div>           Note:           @RenderSection ("Remark"false);         </div>    <footer>        @RenderPage ("~/views/shared/footer.cshtml  ")    </footer></body>
View Code

[email protected] () and html.renderpartial () [email protected]() and html.renderpartial () These two methods can be used to output a partial page, right-click Add New Item, select MVC3 Division page, You can add a partial page, which is equivalent to a user control,

At this point, you can use the two methods to output the contents of the partial page, of course, these two methods can also be directly output view page and content page.

the parameter for @Html. Partial() is the user control name, which is the partial page name, and the return value is a string type that can be output directly.

the parameter of @ html.renderpartial () is also the user control name, the return value is void, and the content is directly exported to response when called.

Use the following:

<div id="logindisplay">                @Html. Partial ("_partiallogin  ")                @{                    html.renderpartial ("_partiallogin" );                 }                            </div>
View Code

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.