1. 概述
本章内容包括: 使用CSS创建和应用样式、使用HTML构架用户界面的层次 以及 根据需求实现动态页面内容。
2. 主要内容
2.1 使用CSS创建和应用样式
Razor程序的模板是_Layout.cshtml,ASPX程序的模板是Site.Master.
使用Razor视图引擎时,可将css文件引用到<head>节点中;使用ASPX试图引擎时,可使用styles.Render方法引用。
internet项目中,_Layout.cshtml文件中的Razor和HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>@ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
@Html.ActionLink("your logo here", "Index", "Home")
</p>
</div>
<div class="float-right">
<section id="login">
@Html.Partial("_LoginPartial")
</section>
<nav>
<ul id="menu">
<li>@Html.ActionLink("Home", "Index", "Home")</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
</nav>
</div>
</div>
</header>
2.2 使用HTML构架用户界面的层次
HTML定义结构,CSS描述样式。
<html><head><body>是三个必要标记:
<html>标记文档类型以便浏览器识别,<head>用于保存元数据信息(外部css、javascript等),<body>内是实际需要显示给用户的信息。
其他常用的HTML标记:
一些HTML5新加的布局元素:
2.3 根据需求实现动态页面内容
ASP.NET MVC4 使用HTML Helpers 来管理动态内容。@Html.ActionLink("About", "About")
常用的HTML Helpers:
一些常用的扩展方法:
可以实现一些验证
@Html.Label("First name ")<br />
@Html.TextBoxFor(m => m.FirstName, new { @placeholder = "First name"})
<br />
@Html.Label("Last name ")<br />
@Html.TextBoxFor(m => m.LastName, new { @placeholder = "Last name"})
<br />
3. 总结
① HTML提供了许多页面布局方式,CSS可以提供样式控制。
② 动态页面内容是使用ASP.NET MVC4的主要原因。可以根据不同的情况显示不同的内容。
③ ASP.NET MVC 使用Helpers来输出HTML信息。比如@Html.TextBox。开发人员可以方便的使用一行代码来生成一套完整的HTML节点信息。