Asp. mvc]asp.net MVC5 series--layout View

Directory

Series Articles

Overview

Layout view

Series Articles

[asp. Net MVC] Asp. MVC5 Series--first Project

[asp. Net MVC] Asp. MVC5 Series--add View

[asp. Net MVC] Asp. MVC5 Series--add Model

[asp. Net MVC] Asp. MVC5 series--accessing data from the controller in the model

[asp. Net MVC] asp. MVC5 Series--add Data

[asp. Net MVC] Asp. MVC5 series--adding Validation rules to the model

[asp. Net MVC] asp. MVC5 series--edit, Delete and detail view

[asp. Net MVC] asp. Net MVC5 Series--razor syntax

[asp. Net MVC] Asp. MVC5 series--routing Features

Overview

Because of the previous period of time, the project has been tight, MVC learning interrupted, The weekend, the heart has been thinking about this matter, very early up, to write before the article looked again, in order to find the place to start again, want to begin, Just thinking about the management side of the most recent Lync project is useful to asp. masterpage, so let's talk about the layout view in asp. Now that the project is over, individuals are rewriting Lync's group space using mvc.

Layout view

To create a new MVC5 project, you will see a shared folder in the Views directory, where the view _layout.cshtml is the layout view, similar to masterpage in Webform. As shown,

Create a new content view to apply the layout view to,

With layout pages, The following code is generated in the view, with each view specifying its layout by using the layout property:

@{    viewbag.title = "Index";    Layout = "~/views/shared/_layout.cshtml";} < H2 > Index</h2>

If you apply the same layout to each view, you create redundant code and are difficult to maintain, and you see a _viewstart.cshtml view in the first picture above, which is very simple, with just one code, specifying the default Layout:

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

The code in this file takes precedence over the execution of any view code in the same directory. This file can also be applied recursively to any view under a subdirectory.

Since this code takes precedence over the run of any view, a view can override the default value of the Layout property to re-select a different Layout. If a group of views have common settings, then the benefits of the _viewstart.cshtml file are reflected in the fact that we can have unified settings in it for common view configurations. If there is a view to override the unified settings, we only need to modify the corresponding property value Values.

If you do not want to apply the template page, specify NULL for the layout Property.

In the _layout.cshtml layout view, you can always find code similar to the Following:

   <class= "container body-content">        @RenderBody ()    </ Div >

@RenderBody () is a placeholder used to mark the location of the main content of the view that will render them using this layout, and if you yo WebForm base, you have its function similar to the ContentPlaceHolder in webform, But there is a difference with contentplaceholder, WebForm in ContentPlaceHolder depending on the ID can have a number of different, but @renderbody () have and can only have ONE.

What if we want to use the referenced resources in the content page, such as CSS or js?

In webform, we usually do This.

In MasterPage

   <ID= "head"  runat= "server">    </ Asp:contentplaceholder >

Apply the Template's WebForm content page

1<asp:contentID= "Content1"ContentPlaceHolderID= "head"runat= "server">2<Scripttype= "text/javascript"src=".. /js/ztree/jquery-1.4.4.min.js "></Script>3 4</asp:content>

This is handled in asp. NET MVC

@RenderSection

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 two parameters, 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 Undefined.

For example, writing in a layout page

< Head > @RenderSection ("script", false); </ Head >

In a view that uses this layout

1 @section script{2     <type= "text/javascript"  src= ".. /js/parameterconfigjs.js "></script>3     }

@RenderPage

alternatively, You can use the @RenderPage for layout

Used to represent the content of another page that is rendered in one page. the parameter specifies the location of the Web page to Render.

We create a new footer.cshtml file under the shared folder, then write the copyright information on it, and then use the template page to render the footer page, as Follows:

< Footer > 2              < P >@RenderPage ("~/views/shared/footer.cshtml")</p>  </ Footer >

@Html. Partial () and Html.renderpartial ()

A partial page can also achieve the purpose of Layout.

These two methods can be used to output a partial page, Right-click add New item, Select MVC5 Partial page, You can add a partial page, equivalent to the user Control page in Webform.

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.

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

For example:

1             @Html. Partial ("_partialdepttree")2             @{3                 html.renderpartial ("_partialdepttree"); 4             }

You can put the number of organizational structures in the distribution VIEW.

Asp. mvc]asp.net MVC5 series--layout View