ASP.NET MVC3书店--第三节视图与视图模型（转）

http://blog.sina.com.cn/s/blog_6ad539a90100qmnd.html

现在我们已经可以从控制器的action方法中返回字符串了。我们可以藉此来理解控制器是如何来工作的。但在真正的Web应用程序中大多数情况下返回的都不仅仅是一个字符串。我们更需要的是当用户输入URL地址请求时，能够返回给浏览器一串HTML格式的输出流，我们可以借由模板文件来更方便地定制这个HTML格式的输出流，并将其返回。在ASP.NET MVC中，将这个模板文件称之为视图。

3.1 追加一个视图模板

为了要使用视图模板，我们修改HomeController控制器中的Index方法，使其返回一个ActionResult对象，并且将return语句修改为return View(),代码如下所示。

public class HomeController : Controller

{

// GET: /Home/

public ActionResult Index()

{

return View();

}

接下来，我们在应用程序中追加一个视图模板。在Index这个action方法中点击鼠标右键，然后点击“添加视图”，如图3-1所示。

图3-1 添加视图

点击“添加视图”后，弹出一个“添加视图”对话框，如图3-2所示。

图3-2 添加视图对话框

添加视图对话框使我们可以快速地、方便地产生视图模板文件。在默认情况下，添加视图对话框将使用该视图的action方法的名字作为视图模板的名字。这里，因为我们在HomeController控制器中的Index方法中点击了“添加视图”子菜单，所以在添加视图对话框中的视图模板名字默认为 “Index”。在该对话框中，不做任何修改，直接点击添加按钮。

点击添加按钮之后，Visual Web Developer将会在Views文件夹下的Home文件夹中自动为我们创建一个名为Index.cshtml的视图模板文件，如图3-3所示。

图3-3 Index.cshtml视图模板文件已被创建

Index.cshtml文件的命名与存放位置是非常重要的，而且也遵循了ASP.NET MVC的命名约定。“Views\Home”这个文件夹与HomeController控制器互相对应。Index这个视图模板与控制器中返回该模板文件的Index方法互相对应。

当我们使用了这个默认的命名约定来返回一个视图的时候，我们可以不用显式地指定该视图模板文件的存放位置。在HomeController控制器中书写如下所示的代码，浏览器将自动渲染“Views\Home”这个文件夹中的Index.cshtml视图模板文件。

public class HomeController : Controller

{

// GET: /Home/

public ActionResult Index()

{

return View();

}

查看Index.cshtml文件，代码内容如下所示。

ViewBag.Title = "Index";

}

<h2>Index</h2>

在这段代码中，使用到了Razor视图引擎，该视图引擎使用一种比在Web Forms与在之前版本的ASP.NET MVC中更加精简的代码书写方法。在ASP.NET MVC3中，之前的WebForms仍然能够继续使用，但是很多开发者发现Razor视图引擎更加适合ASP.NET MVC的开发。

上面这三行代码中使用ViewBag.Title属性来设置在浏览器中进行显示时的浏览器窗口标题。我们将很快能够在浏览器中查看这一设置的结果，但这里首先让我们更新页面中的标题文字，将<h2>标签中的文字修改为“网站首页”，代码如下所示。

ViewBag.Title = "首页";

}

运行应用程序，浏览器中的显示结果如图3-4所示。

图3-4 浏览器中的Index视图

3.2 为公共站点元素使用统一布局

大多数网站中都有一个很多页面共同使用的公共内容：导航条，脚注，logo图片，样式表等等。Razor视图引擎使用一个公共页面来管理这些公共内容，从而使得公共内容的使用与修改变得更加容易。这个公共页面被命名为“_Layout.cshtml”，在一开始自动创建应用程序的时候，这个文件也被创建于“/Views/Shared”文件夹中，如图3-5所示。

图3-5 _Layout.cshtml文件已被创建

双击打开该文件，文件中代码如代码清单3-1所示。

代码清单3-1 _Layout.cshtml文件中内容

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

rel="stylesheet" type="text/css" />

type="text/javascript"></script>

</head>

<body>

@RenderBody()

MVC3书店这个Web网站拥有一个每个网页上都会出现的公共标题与两个公有链接，一个链接到我们的首页，另一个链接到书籍种类列举显示页面，所以我们将该文件中的代码修改如代码清单3-2所示。

代码清单3-2 添加了公共标题与公共链接的_Layout.cshtml文件

<!DOCTYPE html>

<html>

<head>

<title>@ViewBag.Title</title>

rel="stylesheet" type="text/css" />

type="text/javascript"></script>

</head>

<body>

<div )

请注意，在这种情况下，我们不需要指定控制器的名称，因为我们只是链接到了使用当前视图的控制器的另一个action方法中。

链接到书籍种类展示页面的时候还需要提供两个参数，所以我们使用Html.ActionLink（）方法的另一种重载方式，使其使用如下参数：

使用种类名称作为链接文字。
控制器中action方法的名称（Browse）。
页面参数，指定ID属性的属性名称与属性值。

最终修改代码如下所示：

<ul>

@foreach (var genre in Model)

{

<li>@Html.ActionLink(genre.Name,"Browse", new {id=genre.ID})

</li>

}

</ul>

现在我们可以重新运行我们的应用程序，访问“/Store”这个URL地址，我们可以看见一个所有书籍种类的列表展示页面，如图3-20所示。每一个种类都带有一个超链接，点击该超链接可以访问“/Store/Browse/[书籍ID]”这个URL地址。

图3-20 所有书籍种类的列表展示页面

查看这个所有书籍种类的列表展示页面的html源代码,代码如下所示。

<ul>

</ul>