MVC Learning Series 5--layout layout pages and rendersection use

Source: Internet
Author: User
Tags actionlink

When we develop Web site projects, we will encounter this problem: is the page how unified style, there is a consistent appearance, in the previous era of ASP, we have two options, one is to use the MasterPage page, one is manual, oneself in each page write CSS style, but so the code is too large. is not desirable, then to the ASP. NET MVC era, what technology can unify the page style??? Yes, that is the layout view. Let's start learning.

1. Create a new MVC Web project using the empty template first:

After the new is complete, the initialization state is:

2. Next, in the root directory "Layoutmvc here is", create a new folder "Content", add a CSS file inside, named "Site.css"

3. Under "Views" folder, create a new "shared" folder, under the shared folder, create a new layout page

Layout page:

<! DOCTYPE html>"Viewport"Content="Width=device-width"/> <title> @ViewBag .title</title> @*url.content convert virtual path to absolute path of application *@ <link href="@Url. Content ("~/content/site.css")"Rel="stylesheet"/>class="Content-wrapper"> <divclass="Float-left"> <pclass="Site-title">@Html. ActionLink ("Code Express","Index","Home")                </p> </div> <divclass="Float-right"> <nav> <ul id="Menu"> <li> @Html. ActionLink ("Home","Index","Home") </li> <li> @Html. ActionLink (" About"," About","Home") </li> </ul> </nav> </div> </div> &lt ;/header> <div id="Body">@RenderSection ("Featured", Required:false)        <sectionclass="content-wrapper main-content Clear-fix">@RenderBody ()</section> </div> <footer> <divclass="Content-wrapper"> <divclass="Float-left"> <p>&copy; @DateTime. Now.year–code express</p> </div> </div> </footer></body>&lt ;/html>in ThisLayout we areusingA HTML helper method and some other system defined methods so let's See these methods one by one.in the layout page, we use the methods of the HTML helper class, and some other system-defined methods, and we will look at these methods separately. 
url.content (): Content () method isA method of Urlhelperclass. It Converts aVirtual(relative) path to an application absolute path.
It has one parameter ofstringType that isAVirtualPath of the content.
It returns an application's absolute path.
If the specified content path (parameter of the method) does not start with the tilde (~) character then this method retur NS Contentpath unchanged.
Url.content () ensures that all links work no matter if the site is in a virtual directory or in the Web site root.

Url. The content method, a method in the Urlhelper class, converts a virtual "relative" path into an absolute path to an application that has a string parameter, which is the virtual path to the file. If the path does not start with the ~ wavy line, then this method returns a fixed path,
It ensures that all links work correctly, whether the site is in a virtual path or at the root of the Web site.

Html.ActionLink (): The easiest-to-render an Html linkinch isTo use the HTML. ActionLink () helper.
With MVC, the Html.ActionLink () does isn't link to a view.
It creates a link to a controller action. ActionLink () isAn extension method of the HtmlHelperclass.
It returns an anchor element (a element) that contains theVirtualPath of the specified action.
When you use a ActionLink () method then you need to pass threestringParameter.
The parameters is LinkText (the inner text of the anchor element), ActionName (the name of the action) and Controllername (The name of the controller).

Html. ActionLink method, which is the simplest way to do an HTML link. In MVC, Html.ActionLink is not a link to a view, but a method that links to a controller, and ActionLink is an extension method of the HtmlHelper class.
it returns a link that contains the virtual path of the specified action. Use ActionLink need to pass 3 parameters, the first is the link display text, the second is to link the Controller method, the third is the name of the controller. rendersection (): Rendersection () isA method of the Webpagebaseclass.
Scott wrote at one point, the first parameter to the"rendersection ()"Helper method Specifies the name of the section, we want to render at this locationinchThe layout template.
The second parameter isOptional, and allows us to define whether the sections we are rendering isRequired or not.
If a section is "Required", then Razor'llThrowAn error at runtime
ifThat section isNot implemented within a view template that isbased on the layout file (which can make it easier to track down content errors). It returns the HTML content to render.

Rendersection is a method in the Webpagebase class, and we can use it in a layout page as a placeholder, Like in ASP. NET, there are two parameters, one is the name, one is required,required set to True, we must add this block in the view, otherwise run, error.

Renderbody (): In layout pages, renders the portion of a content page that isNot within a named section. It returns the HTML content to render. Renderbody isRequired, since it's what renders each view.

Renderbody is the load display, not the Rendsection code fast content, Renderbody is necessary.
The _viewstart File

_viewstart file, specify the layout page to use, and if not, you need to manually add in each view
@{ Layout = "~/views/shared/_layout.cshtml";}
" _viewstart " inch  "~/views/shared/_layout.cshtml"
is This the.

4. Next, we create a new controller home, creating the corresponding index view, specifying the layout page we just created

 Public class Homecontroller:controller    {        //  get:home         Public actionresult Index ()        {            return  View ();        }    }
@{    "Index";     " ~/views/shared/_layout.cshtml " ;} 

5. Run the program:

MVC Learning Series 5--layout layout pages and rendersection use

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.