Understand ASP. net mvc Programming Model Chapter 1 MVC style and layout, asp. netmvc
Add Layout
File _ Layout. cshtml indicates the Layout of each page in the application. It is located in the Shared folder in the Views folder.
For example
<!DOCTYPE html>HTML helperIn the above Code, the HTML helper is used to modify the HTML output:
@ Url. Content ()-the URL Content is inserted here.
@ Html. ActionLink ()-the HTML link is inserted here.
Razor syntaxIn the above Code, the Code marked with red is the C # marked with Razor #.
@ ViewBag. Title-insert the page Title here.
@ RenderBody ()-the page content is displayed here.
Add StyleThe style sheet of the application is Site.css. It is located in the Content folder.
Body {font: "Trebuchet MS", Verdana, sans-serif; background-color: #5c87b2; color: #696969 ;}h1 {border-bottom: 3px solid # cc9900; font: Georgia, serif; color: #996600 ;}# main {padding: 20px; background-color: # ffffff; border-radius: 0 4px 4px;} a {color: #034af3;}/* menu style ---------------------------- */ul # menu {padding: 0px; position: relative; margin: 0;} ul # menu li {display: inline ;} ul # menu li a {background-color: # e8eef4; padding: 10px 20px; text-decoration: none; line-height: 2.8em;/* CSS3 properties */border-radius: 4px 4px 0 0;} ul # menu li a: hover {background-color: # ffffff;}/* form style ------------------------------ */fieldset {padding-left: 12px ;} fieldset label {display: block; padding: 4px;} input [type = "text"], input [type = "password"] {width: 300px ;} input [type = "submit"] {padding: 4px;}/* Data style ------------------------------ */table. data {background-color: # ffffff; border: 1px solid # c3c3c3; border-collapse: collapse; width: 100%;} table. data th {background-color: # e8eef4; border: 1px solid # c3c3c3; padding: 3px;} table. data td {border: 1px solid # c3c3c3; padding: 3px ;}_ ViewStart FileThe _ ViewStart file in the Shared folder (in the Views folder) contains the following content:
@{Layout = "~/Views/Shared/_Layout.cshtml";}This code is automatically added to all views displayed by the application. If you delete this file, you need to manually add this code to all views.
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
