ASP.NET MVC – 样式和布局简介
MVC 是三种 ASP.NET 编程模式中的一种。MVC 是一种使用 MVC(Model View Controller 模型-视图-控制器)设计创建 Web 应用程序的模式. |
添加布局
文件 _Layout.cshtml 表示应用程序中每个页面的布局。它位于 Views 文件夹中的 Shared 文件夹。
打开文件 _Layout.cshtml,把内容替换成:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>@ViewBag.Title</title> <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script> <script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"></script> </head> <body> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("Movies", "Index", "Movies")</li> <li>@Html.ActionLink("About", "About", "Home")</li> </ul> <section id="main"> @RenderBody() <p>Copyright RUNOOB 2012. All Rights Reserved.</p> </section> </body> </html>
HTML 帮助器
在上面的代码中,HTML 帮助器用于修改 HTML 输出:
@Url.Content() - URL 内容将在此处插入。
@Html.ActionLink() - HTML 链接将在此处插入。
在本教程后面的章节中,您将学到更多关于 HTML 帮助器的知识。
Razor 语法
在上面的代码中,红色标记的代码是使用 Razor 标记的 C#。
@ViewBag.Title - 页面标题将在此处插入。
@RenderBody() - 页面内容将在此处呈现。
您可以在我们的 Razor 教程中学习关于 C# 和 VB(Visual Basic)的 Razor 标记的知识。
添加样式
应用程序的样式表是 Site.css,位于 Content 文件夹中。
打开文件 Site.css,把内容替换成:
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 4px; } a { color: #034af3; } /* Menu Styles ------------------------------*/ 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; } /* Forms Styles ------------------------------*/ fieldset { padding-left: 12px; } fieldset label { display: block; padding: 4px; } input[type="text"], input[type="password"] { width: 300px; } input[type="submit"] { padding: 4px; } /* Data Styles ------------------------------*/ 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 文件
Shared 文件夹(位于 Views 文件夹内)中的 _ViewStart 文件包含如下内容:
@{Layout = "~/Views/Shared/_Layout.cshtml";}
这段代码被自动添加到由应用程序显示的所有视图。
如果您删除了这个文件,则必须向所有视图中添加这行代码。
在本教程后面的章节中,您将学到更多关于视图的知识。
ASP.NET MVC – 样式和布局简介相关推荐
- ASP.NET Web Pages – 页面布局简介
通过 Web Pages可以把重复使用的内容块(比如页面头部和底部)写在一个单独的文件中.还可以使用布局模板(布局文件)为站点的所有网页定义一致的布局. 一致的外观 在因特网上,您会发现很多网站都具有 ...
- ASP.NET MVC 入门1、简介
什么是MVC模式 MVC(Model-View-Controller,模型-视图-控制器模式)用于表示一种软件架构模式.它把软件系统分为三个基本部分:模型(Model),视图(View)和控制器(Co ...
- ASP.NET MVC – HTML 帮助器简介
通过 MVC,HTML 帮助器类似于传统的 ASP.NET Web Form 控件.HTML 帮助器用于修改 HTML 输出 HTML 帮助器 通过 MVC,HTML 帮助器类似于传统的 ASP.NE ...
- ASP.NET MVC 教程学习
1. Why :为什么需要ASP.NET MVC 本章主要为大家汇总了为什么学习Asp.net MVC替代WebForms,产生ASP.NET MVC 的需求是什么,只有更好的理解了为什么需要MVC, ...
- ASP.NET MVC 入门系列教程
一个居于ASP.NET MVC Beta的系列入门文章,有朋友提议说写一个示例程序来同步讲解,那样更加容易学习.所以就写选择了写一个Blog程序来作为示例程序.(原来是居于ASP.NET MVC Pr ...
- Asp.net MVC 教程汇总
自学MVC看这里--全网最全ASP.NET MVC 教程汇总 MVC架构已深得人心,微软也不甘落后,推出了Asp.net MVC.小编特意整理博客园乃至整个网络最具价值的MVC技术原创文章,为想 ...
- ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
- ASP.NET MVC应用迁移到ASP.NET Core及其异同简介
ASP.NET Core是微软新推出支持跨平台.高性能.开源的开发框架,相比起原有的ASP.NET来说,ASP.NET Core更适合开发现代应用程序,如跨平台.Dorker的支持.集成现代前端开发框 ...
- ASP.NET MVC 5 学习教程:修改视图和布局页
ASP.NET MVC 5 学习教程:修改视图和布局页 原文 ASP.NET MVC 5 学习教程:修改视图和布局页 起飞网 ASP.NET MVC 5 学习教程目录: 添加控制器 添加视图 修改视图 ...
最新文章
- 有关Run-Time Check Failure #2 - Stack around the variable 'XXX' was corrupted.错误的解决方法
- 2016设置方框的尺寸_四种模板脚手架分类、优缺点及参数设置对比
- 如何使用CocoStudio场景编辑器制作魔卡幻想
- iOS在地图上WGS84、GCJ-02、BD-09互转解决方案
- Cocos2d-x 3.x如何通过WebSocket连接服务器进行数据传输
- linux脚本制定java堆大小_Java使用比堆大小更多的内存(或正确的Docker内存限制大小)...
- 使用SetUnhandledExceptionFilter()让程序优雅的崩溃
- drool 7.x 语法和属性
- Windows(11)下JDK安装与环境变量配置
- 熟悉Linux基本操作
- pr如何跳到关键帧_PR制作短视频(二):30分钟制作一个短视频
- java StringBuilder用法
- java.lang.NoClassDefFoundError: org/jdom2/Content
- 天数最少的年份_农历辛丑年仅有354天是怎么回事 平年比闰年少几天
- 软件集合贴:学软件测试必备软件,看这里足足够了
- LaTeX 美化表格位置
- 【Java应用】使用Java实现机器学习算法:聚类、分类、预测
- 北交中外合作计算机类出国留学,北交大中外合作办学怎么样
- 【区块链实战】什么是 P2P 网络,区块链和 P2P 网络有什么关系
- 百度贴吧BDUSS获取器
热门文章
- 最新!中国大学生源质量排行榜(2019):双一流高校表现突出!
- 100年前的北京Vlog火了!大神利用AI修复古董纪录片,还原1920年的京城生活
- CPU上跑到 100 fps 的高精度PyTorch人脸特征点检测库
- 27 个为什么,帮助你更好的理解Python
- 爬虫之js2py的使用
- Failed at the node-sass@4.14.0 postinstall script. npm ERR! This is probably not a problem with npm
- kalilinux安装VMware Tools(水文)
- ACMNO.44 C语言-平均分 有N个学生,每个学生的数据包括学号、姓名、3门课的成绩,从键盘输入N个学生的数据,要求打印出3门课的总平均成绩,以及最高分的学生的数据(包括学号、姓名、3门课成绩)
- Scrapy安装错误: error: Microsoft Visual C++ 14.0 is required. Get it with Microsoft Visual C++ Build To
- 微软资深算法工程师为AI初学者量身打造的机器学习入门书上市啦!