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. 为steghide实现字典破解功能

    steghide是一个隐写术软件,可以在图片.音频等文件里隐藏数据. 鉴于原始的steghide在解密数据时不能选择字典文件破解,于是本人就用python简单地为其实现字典破解功能. -------- ...

  2. 四轴飞行器1.2.3 STM32F407时钟配置和升级标准库文件

    原创文章,欢迎转载,转载请注明出处 这个星期进度比较慢哈,只有周末和晚上下班回来才能做,事件不连续,琐碎的事情又比较多,挺烦的,有多琐碎呢?           1.本人有点小强迫症哈,虽然RTT将文 ...

  3. android-SQLite 和 Content

    SQLite 游标(Cursor)相当于指向底层数据中结果集的指针,而不是提取和返回结果值的副本,是在结果集中对位置(行)进行控制的管理方式. moveToFirst:把游标移动到查询结果的第一行 m ...

  4. Android倒计时Button

    最近做用户绑定,需要用到倒计时的一个Button,就花点时间封装了一个,非常简单,效果图如下: 1.TimeButton 自定义倒计时Button package com.example.timebu ...

  5. VS2015如何另存解决方案文件-修改解决方案sln文件的路径

    原文:VS2005如何另存解决方案文件-修改解决方案sln文件的路径 修改解决方案sln文件的路径 方法一:工具→选项→项目和解决方案,可设置项目的默认保存位置.方法二:"解决方案资源管理器 ...

  6. php 接口示例

    php 接口示例: public function dev(){ $m=new Model('machine_info'); $ip=$_GET['ip']; echo $ip; //$arr=$m- ...

  7. uva-12657 - Boxes in a Line（双向链表）

    12657 - Boxes in a Line You have n boxes in a line on the table numbered 1 . . . n from left to righ ...

  8. [置顶] jsp中c标签的使用

    jsp中c标签的使用 核心标签库 它是JSTL中的核心库,为日常任务提供通用支持,如显示和设置变量.重复使用一组项目.测试条件和其他操作(如导入和重定向Web内容).Core标签按功能可分为4种类型: ...

  9. android项目 之 记事本（12） ----- 图片的等比例缩放及给图片加入边框

    本文是自己学习所做笔记.欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 在Android的UI开发中常常会遇到图片的缩放,就比方记事本,如今的图片都比較 ...

  10. 基于ZooKeeper的Dubbo简单抽样登记中心

    一:设备zookeeper 系统环境 Ubuntu 14.04.2 LTS x64 IP : 192.168.1.102 下载zookeeper-3.4.6.tar.gz到文件夹/opt.拉开拉链 m ...