上一篇中有同学提到为什么不使用视图，而使用字符串，这一篇我们就开始使用视图来处理。
我们已经可以从控制器的 Action 中返回一个字符串，这可以帮助我们更好地理解 Controller 是如何工作的。但是对于创建一个 Web 程序来说还是不够的。下面我们使用更好的方法来生成 HTML，主要是通过模板来生成需要的 HTML，这就是视图所要做的。
一、增加视图模板
为了使用视图模板，我们需要将HomeController 中的 Index 这个 Action 的返回类型修改为 ActionResult，然后，让它像下面一样返回一个视图。
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } }
上面的修改表示我们将使用视图来替换掉原来的字符串，以便生成返回的结果。
现在为我们的项目增加一个视图，为达到这个目的，我们将光标移到 Index 方法内，然后，点击鼠标的右键，在右键菜单中选择“添加视图(D)…”，这样将会弹出增加视图的对话框。
添加视图的对话框允许我们快速，简单地创建一个视图模板，默认情况下，视图的名称使用当前 Action 的名字。因为我们是在 Index 这个 Aciton 上添加模板，所以添加视图对话框中，视图的名字就是 Index，我们不需要修改这个名字，点击添加。
在点击添加之后，Visual Studio 将会创建一个名为 Index.cshtml的视图模板，放置在 ViewsHome 目录中，如果没有这个目录，MVC 将会自动创建它。
Index.cshtml 所在文件夹的名称和位置是很重要的，它是根据ASP.NET MVC 的约定来指定的。目录名称 ViewsHome ，匹配的控制器就是 HomeController ，视图模板的名字 Index，匹配将要使用这个视图的 Action 方法的名字。
当使用默认的约定的时候，ASP.NET MVC 允许我们不用显式设置这些名字和位置，当我们的代码如下所示的时候，将会默认寻找 ViewsHomeIndex.cshtml。
public class HomeController : Controller { // // GET: /Home/ public ActionResult Index() { return View(); } }
Visutal Studio 创建并打开了Index.cshtml 视图模板，其中的内容如下：
@{ ViewBag.Title = "Index"; } <h2>Index</h2>
视图使用了 Razor 语法，这比 Web Form 视图引擎的语法更加简单。
前三行使用 ViewBag.Title 设置了页面的标题，我们马上就可以看到这样做的效果，但是，首先，我们我们替换一下网页的内容，将 <h1> 标记中的内容修改为 This is the Home Page 。
@{ ViewBag.Title = "Index"; } <h2>This is the Home Page</h2>
现在，我们的首页应该变成下面的样子。
二、为页面的公共内容使用布局
大多数的网站在页面之间有许多共享的内容：导航，页首，页脚，公司的 Logo，样式表等等。Razor 引擎默认使用名为 _Layout.cshtml 的布局来自动化管理，它保存在 /Views/Shared 文件夹中。
打开之后，可以看到下列内容：
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
@RenderBody()
</body>
</html>
来自内容视图中的内容，将会被通过 @RenderBody() 来显示，任何出现在网页中的公共内容就加入到 _Layout.cshtml 中，我们希望我们的 MVC 音乐商店有一个公共的页首，其中含有链接到我们的首页和商店区域的链接，所以，我们将这些内容直接添加到这个布局中。
<!DOCTYPE html>
<html>
<head>
<title>@ViewBag.Title</title>
<link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css"/>
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="header">
<h1>
ASP.NET MVC MUSIC STORE</h1>
<ul id="navlist">
<li class="first"><a href="/" id="current">Home</a></li>
<li><a href="/Store/">Store</a></li>
</ul>
</div>
@RenderBody()
</body>
</html>
三、更新样式表
在创建项目使用的空项目模板中，仅仅包含很简单的用来显示验证信息的样式。我们的设计师提供了一些额外的 CSS 样式和图片来改进网站的观感，现在我们就使用它们。
首先，到网站 mvcmusicstore.codeplex.com 下载 MvcMusicStore-v3.0.zip，这里面有一个文件夹 MvcMusicStore-Assets，将这个文件夹的Content 文件夹的内容复制到项目的 Content 文件夹中。
你会被询问是否需要覆盖存在的文件，选择是。
现在，网站的 Content 文件夹中的内容如下所示：
重新运行程序，现在的页面变成了这样。
我们回顾一下，什么发生了变化：HomeController 的 Index 的 Action 方法寻找并通过 ViewsHomeIndex.cshtml 模板生成输出结果，代码中是通过 return View() 实现的，因为默认的命名约定，Index 这个 Action 方法将会默认使用 Index 视图输出。
而 Index 视图使用了我们的 _Layout.cshtml 模板，所以，欢迎信息被包含在标准的 HTML 布局中。
四、使用模型为视图传递信息
仅仅使用硬编码的 HTML 不能创建令人感兴趣的网站，创建动态网站，我们需要从控制器的 Action 传送信息给视图模板。
在 MVC 模式中，术语 Model 表示应用表现的数据，通常，模型对象用来表示数据库中保存在表中的数据，也不一定如此。
控制器的 Action 方法通过返回的 ActionResule 可以传送模型对象给视图。这就允许控制器可以将所有生成回应需要的数据打包，然会传送给视图模板，以便生成适当的 HTML 回应，在 Action 方法中可以很容易理解，让我们开始吧。
首先，我们将创建一些模型类来表示商店中的唱片类型和专辑类型，从创建类型 Genre 类开始，在项目中，右击模型 Models 文件夹，然后选择增加类选项，然后命名为 Genre.cs。