ASP.NET MVC 音乐商店 - 3. 视图与模型

上一篇中有同学提到为什么不使用视图，而使用字符串，这一篇我们就开始使用视图来处理。

我们已经可以从控制器的 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的视图模板，放置在 \Views\Home 目录中，如果没有这个目录，MVC 将会自动创建它。

Index.cshtml 所在文件夹的名称和位置是很重要的，它是根据ASP.NET MVC 的约定来指定的。目录名称 \Views\Home ，匹配的控制器就是 HomeController ，视图模板的名字 Index，匹配将要使用这个视图的 Action 方法的名字。

当使用默认的约定的时候，ASP.NET MVC 允许我们不用显式设置这些名字和位置，当我们的代码如下所示的时候，将会默认寻找 \Views\Home\Index.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 。