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. 14-C语言宏

    目录: 一.宏定义 二.#x,##x使用和预定义宏 三.宏的高级使用(条件编译) 回到顶部 一.宏定义 1 宏是常用的预处理功能之一,是在编译之前进行宏替换,即将宏名替换成所定义的宏体. 2 优点:可 ...

  2. .NET DataGrid 导出Excel 无分页

    #region 导出Excel // protected void BtnExcelClick(object sender, EventArgs e) { ToExcel(); } public vo ...

  3. Java基础—ClassLoader的理解（转）

    默认的三个类加载器 Java默认是有三个ClassLoader,按层次关系从上到下依次是: Bootstrap ClassLoader Ext ClassLoader System ClassLoad ...

  4. javascript的this指向

    JavaScript 是一种脚本语言,支持函数式编程.闭包.基于原型的继承等高级功能.JavaScript一开始看起来感觉会很容易入门,但是随着使用的深入,你会发现JavaScript其实很难掌握,有 ...

  5. Android UI设计

    Android UI设计--PopupWindow显示位置设置 摘要: 当点击某个按钮并弹出PopupWindow时,PopupWindow左下角默认与按钮对齐,但是如果PopupWindow是下图的 ...

  6. 四核网络机顶盒芯片局势分析（开放市场）:rk3128将会成为四核主流

    开放市场:不包含小米.乐视等大品牌闭环生态系统的市场. 今年四核网络播放器以全志的a31s独领风骚.英菲克以绝对优势率先各大白牌品牌公司.只是随着时间的推移,全志的a31s不适应市场主流.因为芯片没有 ...

  7. 【LINUX】SHELL syntax error:unexpected end of file

    解决思路: DOS下文件和Linux下文件格式差异问题导致的. DOS下的文本文件是以\r\n作为断行标志的,表示成十六进制就是0D 0A.而Unix下的文本文件是以\n作为断行标志的,表示成十六进制 ...

  8. BZOJ 1012 最大数maxnumber

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...

  9. BZOJ 1051: [HAOI2006]受欢迎的牛( tarjan )

    tarjan缩点后, 有且仅有一个出度为0的强连通分量即answer, 否则无解 ----------------------------------------------------------- ...

  10. 各种输入速度比较(cin,scanf,getchar,pascal的read)

    每个程序都是纯读入与1个输出.输入数据分别有1e2,1e3,1e4,1e5,1e6,1e7个数. C++使用getchar()读入是最快的.流输入是非常非常慢! 比赛还是用gechar比较好...