MVC MusicStore Tutorial v3.0 中文版 3
- 格式：doc
- 大小：748.50 KB
- 文档页数：21
第 3 部分：Views 和 ViewModels到目前为止我们已经就已经返回字符串从控制器操作。
这是个不错的办法，把想法的控制器是如何工作的但它是不会要如何构建一个实际的 web 应用程序。
我们要想更好的方法来生成 HTML 返回到浏览器访问我们的网站——一个地方我们可以使用模板文件可以更轻松地自定义 HTML 内容发送回。
这正是视图做的工作。
添加一个视图模板若要使用一个视图模板，我们就会更改 HomeController 索引方法返回的方法，并让它返回 View()，像下面：public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){return View();}}上述更改指示而不是返回一个字符串，我们反而要使用"视图"来生成结果回来。
我们现在将向我们的项目中添加适当的视图模板。
为此我们会内的索引操作方法，文本光标的位置然后右键单击并选择"添加视图"。
这将会打开添加视图对话框中："添加视图"对话框允许我们能够快速、轻松地生成视图模板文件。
默认情况下"添加视图"对话框 pre-populates 要创建，以便它匹配的操作方法，将使用它的视图模板的名称。
因为我们使用的我们 HomeController Index() 操作方法内的"添加视图"上下文菜单，上面的"添加视图"对话框有"指数"作为默认情况下预先填充的视图名称。
我们不需要更改任何此对话框上的选项，因此请单击添加按钮。
当我们单击添加按钮时，Visual Web Developer 将创建新的 Index.cshtml 视图模板为我们在 \Views\Home 目录中，创建该文件夹，如果尚不存在。
"Index.cshtml"文件的名称和文件夹位置是重要的并遵循默认 MVC 的命名约定。
目录名称、 \Views\Home、匹配的控制器-被命名为 HomeController。
该视图模板名称，索引，匹配的控制器操作方法，将会显示所需视图。
MVC 允许我们避免不必显式指定的名称或位置的视图模板，当我们使用此命名约定来返回一个视图。
它将默认呈现 \Views\Home\Index.cshtml 视图模板时我们在我们的 HomeController 内写类似下面的代码：public class HomeController : Controller{//// GET: /Home/public ActionResult Index(){return View();}}可视化 Web 开发人员创建，并在我们单击"添加视图"对话框内的"添加"按钮后打开"Index.cshtml"视图模板。
Index.cshtml 的内容如下所示。
@{ViewBag.Title = "Index";}<h2>Index</h2>此视图使用 Razor 语法，这是比 Web 窗体和以前版本的 MVC 中使用的 Web 窗体视图引擎更简洁。
Web 窗体视图引擎仍可用在 MVC 3 中，但许多开发人员会发现 Razor 视图引擎真的很适合 MVC 中发展。
前三行设置使用 ViewBag.Title 的网页标题。
我们会看一看如何这工作中更详细地很快，但第一次让我们更新文本标题文本，并查看的页面。
更新要说"这是主页"，如下所示的 <h2> 标记。
@{ViewBag.Title = "Index";}<h2>This is the Home Page</h2>运行，应用程序所示我们新的文本是可见的主页上。
使用常见的网站元素的布局大多数的网站上有多个页面之间共享的内容：导航、页脚、徽标图像、样式表的引用等。
Razor 视图引擎，这很容易地使用一个名为 _Layout.cshtml 的自动已为我们在 /Views/Shared 文件夹内创建页面管理。
双击该文件夹以查看的内容，其中如下所示。
<!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")" type="text/javascript"></script><script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")"type="text/javascript"></script></head><body>@RenderBody()</body></html>从我们个人的意见的内容将显示由 @RenderBody() 命令中，和我们想要出现在这之外的任何常见内容可以将添加到的 _Layout.cshtml 标记。
我们希望我们的MVC 音乐商店要到我们主页和存储的区域，该网站中所有页上有的链接具有共同的标头，所以我们将它添加到的模板 @RenderBody() 声明的正上方。
<!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> MVC MUSIC STORE</h1><ul id="navlist"><li class="first"><a href="/"id="current">Home</a></li><li><ahref="/Store/">Store</a></li></ul></div>@RenderBody()</body></html>更新样式表空项目模板包括一个非常精简的 CSS 文件，其中只包括用于显示验证消息的样式。
我们的设计师提供了一些额外的 CSS 和图像来定义为我们的网站的外观和感觉，所以我们会添加那些在现在。
内容的目录中，这是可在 的MvcMusicStore Assets.zip 包含了更新 CSS 文件和图像。
我们会请他们两个在Windows 资源管理器中选择和拖放到我们的解决方案在 Visual Web Developer，内容文件夹，如下所示：将要求您确认是否要改写现有的 Site.css 文件。
单击是。
您的应用程序的内容文件夹中现在将显示如下：现在让我们运行该应用程序并查看我们更改主页上的外观。
让我们回顾一下发生了哪些变化：尽管我们的代码调用了“return View()”，HomeController 的 Index 操作方法仍然发现和显示\Views\Home\Index.cshtml 视图模板，这是因为我们的视图模板遵循了标准命名约定。
∙在主页上显示一个在 \Views\Home\Index.cshtml 视图模板中定义的简单欢迎消息。
∙主页页面使用我们的 _Layout.cshtml 模板，并欢迎消息那么标准网站HTML 布局内所载。
使用模型将信息传递到我们的视图只是显示硬编码 HTML 视图模板并不能使一个非常有趣的 web 站点。
若要创建一个动态的 web 站点，我们会改为想要将信息从我们的控制器操作传递到我们的视图模板。
在模型-视图-控制器模式中，术语“模型”是指表示应用程序中数据的对象。
通常情况下，模型对象对应于您的数据库中的表，但他们没有到。
控制器操作方法所返回的方法可以将一个模型对象传递给视图。
这允许一个控制器干净地包上来来生成响应，然后将此信息传递到视图模板所需的所有信息，用来生成适当的 HTML 响应。
这是最容易理解的看到它在行动中，让我们开始吧。
首先，我们将创建一些模型类来表示在我们店内的流派和专辑。
让我们开始通过创建流派的类。
用鼠标右键单击"模型"文件夹在您的项目的范围内，选择"添加类"的选项，和名称"Genre.cs"的文件。
然后将公共字符串名称属性添加到已创建的类：public class Genre{public string Name { get; set; }}注意：在种情况下你想知道，{获取；设置；} 表示法正在使用 C# 的自动实现的属性功能。
这使我们无需我们宣布支持字段属性的好处。
下一步，按照同样的步骤，创建一个专辑类（名为 Album.cs），具有标题和体裁的属性：public class Album{public string Title { get; set; }public Genre Genre { get; set; }}现在我们可以修改 StoreController 使用视图，显示我们的模型中的动态信息。
