Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图

在本节中，您需要修改HelloWorldController类，从而使用视图模板文件，干净优雅的封装生成返回到客户端浏览器HTML的过程。

您将创建一个视图模板文件，其中使用了ASP.NET MVC 3所引入的Razor视图引擎。Razor视图模板文件使用.cshtml文件扩展名，并提供了一个优雅的方式来使用C＃语言创建所要输出的HTML。用Razor编写一个视图模板文件时，将所需的字符和键盘敲击数量降到了最低，并实现了快速，流畅的编码工作流程。

当前在控制器类中的Index方法返回了一个硬编码的字符串。更改Index方法返回一个View对象，如下面的示例代码：

 public ActionResult Index()

 {

    return View();

 }

上面的Index方法使用一个视图模板来生成一个HTML返回给浏览器。控制器的方法（也被称为action method(操作方法) ），如上面的Index方法，一般返回一个ActionResult（或从ActionResult所继承的类型），而不是原始的类型，如字符串。

在该项目中，您可以使用的Index方法来添加一个视图模板。要做到这一点，在Index方法中单击鼠标右键，然后单击“ 添加视图“。

出现添加视图对话框。保留缺省值，并单击添加按钮

您可以在解决方案资源管理器中看到MvcMovie\Views\HelloWorld 文件夹和已被创建的MvcMovie\View\HelloWorld\Index.cshtml文件：

下图显示了已被创建的Index.cshtml文件：

@{

    ViewBag.Title = "Index";

}

<h2>Index</h2>

在<h2>标签后面添加以下HTML:<p>从我们的视图模板里返回!</p>

完整的MvcMovie\HelloWorld\Index.cshtml文件如下所示。

@{     ViewBag.Title = "Index";   }   <h2>Index</h2>   <p>从我们的视图模板里返回!</p>

运行程序，访问HellWorld控制器http://localhost:5279/HelloWorld/。控制器里的Index方法并没有做很多工作，仅仅是执行 return View()语句，指定使用模板文件来响应浏览器请求。因为你没有指定使用的模板文件名称，ASP.NET MVC默认使用\Views\HelloWorld目录下的Index.cshtml视图文件。

看上去很不错。然而，注意浏览器标题栏“Index- 我的 ASP.NET MVC 应用程序”，以及页面顶部一个大号的链接“将你的徽标放置在此处”。链接下方是注册和登录链接，再往下是主页、关于和联系方式的页面链接。让我们来修改这些。

修改视图页和布局页

首先，你想修改页面顶部的标题“将你的徽标放置在此处”。该文本在每个页面中通用。虽然出现在应用的每一个页面，实际上在项目中只定义了一次，。在解决方案资源管理器中定位到/Views/Shared目录下，打开 _Layout.cshtml文件。该文件称为布局页，共享为外壳，被所有其他页面使用。

布局模板使你指定特定的HTML容器来布局整个站点，在一处定义，在站点多个页面应用。找到@RenderBody()行。RenderBody是一个你创建的视图页面中的占位符，在布局页面中断行。例如，如果你选择“关于”链接，\Home\About.cshtml 视图在RenderBody方法中呈现。

在布局模板中修改站点标题行，由“将你的徽标放置在此处”改为“MVC 电影”。

<divclass="float-left"><pclass="site-title">@Html.ActionLink("MVC 电影", "Index", "Home")</p></div>

使用以下标记替换标题内容：

<title>@ViewBag.Title - 电影应用程序</title>

运行程序，并注意现在显示是“MVC 电影”。点击“关于”链接，你会发现该页面同样显示“MVC 电影”。我们在布局模板中改变一次，站点中所有页面都会变更为新的标题。

现在，让我们来修改Index视图的标题。

打开MvcMovie\Views\HelloWorld\Index.cshtml文件。里面有两处地方需要修改：首先，在浏览器标题栏显示的文本，其次是在二级标题（<H2>元素）处。你可以将两处修改稍微不同，以便能区分出哪个地方分别对应应用程序的哪个部分。

@{

    ViewBag.Title = "首页";

}

<h2>我的首页</h2>

代码通过设置ViewBag的Title属性来指明HTML标题的显示内容。如果你查看布局模板的源码，你会注意到模板在<title>元素中使用该值作为 <head>的一部分。使用ViewBag，你可以容易地在视图模板和布局文件间传递其他参数。

运行程序，浏览 http://localhost:xx/HelloWorld。你会发现浏览页面的标题、一级标题、二级标题已经发生改变（如果在浏览器中看不到改变，那么可能你看到的是缓存内容，使用Ctrl+F5强制浏览器从服务器加载数据到客户端）。浏览器标题由两部分组成，首先是我们在Index.cshtml视图模板里设置的ViewBag.Title，然后是在布局文件中设置的“-电影应用程序”。

同时注意Index.cshtml视图模板文件内容是如何与 _Layout.cshtml视图模板合并，形成单一的HTML响应返回给浏览器。布局模板使修改应用到你的应用程序所有页面变得容易。

上面例子中我们很少一点数据是硬编码。此MVC应用程序有视图，并且你已经创建了控制器，但是还没有模型。很快，我们将涉及如何创建数据库并从中取得模型数据。

 从控制器传递数据到视图

在我们创建数据库并谈论模型之前，让我们先谈论下从控制器传递信息到视图。控制器类被调用来响应输入网址请求。在控制器类中编写代码，处理浏览器输入请求，从数据库获取数据，并且决定什么类型的响应被发回浏览请求。来自控制器的视图模板被用于生成和格式化HTML响应给浏览器。

控制器负责提供需要的任何数据或对象给视图模板来生成响应给浏览器。最佳实践是：视图模板不应该处理业务逻辑或者直接与数据库发生交互。视图模板应该仅仅处理控制器提供给它的数据。保持关系的隔离，有助于使你的代码干净、可测试和易于维护。

目前，HelloWorldController类中的Welcome方法是用name和num参数，直接输出值到浏览器。让我们改变控制器，使用视图模板来替代控制器使用字符串响应请求。视图模板将生产一个动态响应，意味着你需要传递一个视图模板可访问的ViewBag对象。

返回到 the HelloWorldController.cs文件，修改Welcome方法，为ViewBag对象增加Message和Num值。ViewBag是一个动态对象，意味着你可以放任何你想放的东西进去；该对象在你放什么进去之前，没有定义的属性。ASP.NET MVC模型绑定机制自动将地址栏查询字符串中的命名参数映射到你的方法中的参数。完整的HelloWorldController.cs如下图所示：

        public ActionResult Welcome(string message, int num = 1)

        {

            ViewBag.Message =  message;

            ViewBag.Num = num;

            return View();

        }

现在包含数据的ViewBag对象将被自动传递到视图。

接下来，你需要一个Welcome视图模板。在生成菜单中，选择生成MVCMovie来确保该工程被编译。

然后在Welcome方法中右键单击，选择添加视图，保持默认，添加。

将Welcome.cshtml文件中的<h2>Welcome</h2>替换为以下内容

<ul>

@for (int i = 0; i < ViewBag.Num; i++)

{

    <li>@ViewBag.Message</li>

}

</ul>

运行查看效果。

现在数据通过模型绑定从地址栏传递给控制器。控制器将数据打包放进ViewBag对象，并将该对象传递给视图。视图将数据显示为HTML给用户。

在上面这个例子中，我们使用ViewBag对象从控制器传递数据到视图。稍后的学习中，我们将使用视图模型来传递数据。相对于ViewBag方式，视图模型方式传递数据更加优秀

这是一种方式的模型，但不是数据库方式。让我们来学习和创建电影的数据库。

Asp.Net MVC4.0 官方教程 入门指南之三--添加一个视图的更多相关文章

  1. Asp.Net MVC4.0 官方教程 入门指南之四--添加一个模型

    Asp.Net MVC4.0 官方教程 入门指南之四--添加一个模型 在这一节中,你将添加用于管理数据库中电影的类.这些类是ASP.NET MVC应用程序的模型部分. 你将使用.NET Framewo ...

  2. Asp.Net MVC4.0 官方教程 入门指南之五--控制器访问模型数据

    Asp.Net MVC4.0 官方教程 入门指南之五--控制器访问模型数据 在这一节中,你将新创建一个新的 MoviesController类,并编写代码,实现获取影片数据和使用视图模板在浏览器中展现 ...

  3. Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器

    Asp.Net MVC4.0 官方教程 入门指南之二--添加一个控制器 MVC概念 MVC的含义是 “模型-视图-控制器”.MVC是一个架构良好并且易于测试和易于维护的开发模式.基于MVC模式的应用程 ...

  4. 【翻译转载】【官方教程】Asp.Net MVC4入门指南（3）：添加一个视图

    3. 添加一个视图 · 原文地址:http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/adding-a-vi ...

  5. Asp.Net MVC4入门指南（3）：添加一个视图

    在本节中,您需要修改HelloWorldController类,从而使用视图模板文件,干净优雅的封装生成返回到客户端浏览器HTML的过程. 您将创建一个视图模板文件,其中使用了ASP.NET MVC ...

  6. 【译】ASP.NET MVC 5 官方教程 - 目录

    ASP.NET MVC 5 官方教程 - 目录 [译]ASP.NET MVC 5 教程 - 1:入门 [译]ASP.NET MVC 5 教程 - 2:添加控制器 [译]ASP.NET MVC 5 教程 ...

  7. 建筑材料系统 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发

    框架介绍: 1.基于 ASP.NET MVC4.0 + WebAPI + EasyUI + Knockout 的架构设计开发 2.采用MVC的框架模式,具有耦合性低.重用性高.生命周期成本低.可维护性 ...

  8. 利用CSS预处理技术实现项目换肤功能(less css + asp.net mvc4.0 bundle)

    一.背景 在越来越重视用户体验的今天,换肤功能也慢慢被重视起来.一个web系统用户可以选择一个自己喜欢的系统主题,在用户眼里还是会多少加点分的.我们很开心的是easyui v1.3.4有自带defau ...

  9. 主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP

    原文:主攻ASP.NET MVC4.0之重生:ASP.NET MVC使用JSONP 原文地址 http://www.codeguru.com/csharp/.net/net_asp/using-jso ...

随机推荐

  1. ADODB 数据库Access连接

    <?php $filepath=__FILE__;//echo __FILE__;$newarray=explode("\\",$filepath);$num=count($ ...

  2. PL/SQL database character set(AL32UTF8) and Client character set(ZHS16GBK) are different

    启动PL/SQL Developer 报字符编码不一致错误 Database character set (AL32UTF8) and Client character set (ZHS16GBK) ...

  3. 【C/C++多线程编程之九】pthread读写锁

    多线程编程之读写锁      Pthread是 POSIX threads 的简称,是POSIX的线程标准.         pthread读写锁把对共享资源的訪问者分为读者和写者,读者仅仅对共享资源 ...

  4. TCP/IP笔记 四.应用层(2)——FTP

    1. FTP(File Transfer Protocol) 文件传送协议 FTP 只提供文件传送的一些基本的服务,它使用 TCP 可靠的运输服务. FTP 的主要功能是减少或消除在不同操作系统下处理 ...

  5. WebSite 文件上传Demo

    知识点: 1 <!--上传文件时:        1.必须使用Post方式来提交数据        2.必须设置表单的enctype属性        3.必须在表单中包含文件域.input t ...

  6. 使用 system.io.filesysteminfo 来查找文件。

    如何快速搜索你想找到文件呢.大家知道Windows系统自带了搜索,很方便,下面介绍自己编写的也可以达到同样的效果.注意.有些文件的访问需要更高的权限.这里暂且去掉那些文件目录的搜索.不然会出现erro ...

  7. 笔记-Nodejs中的核心API之Events

    最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态.比如Node中的模块,平时练习就接触到那么几个,其他的 ...

  8. SSIS: 使用Lookup 和 Cache transformation 进行数据匹配简单介绍

    本文将讲解Cache transformation的使用方式,并且用Lookup transformation进行匹配. 背景 如下图,我们的产品目标表中有些有尺寸信息有些没有.我们需要用Cache组 ...

  9. POJ 3167 Cow Patterns（模式串浮动匹配）

    题目链接:http://poj.org/problem?id=3167 题意:模式串可以浮动的模式匹配问题给出模式串的相对大小,需要找出模式串匹配次数和位置. 思路:统计比当前数小,和于当前数相等的, ...

  10. struts的由来

    当学习或工作时,有些同学会谈到熟悉struts.hibernate.spring等等框架,貌似熟悉这些框架是精通java的表现,但是我们应该首先弄明白为什么要学框架?是为了学习而学习?还是为了工作而学 ...