《精通 ASP.NET MVC 4》----2.3 渲染Web页面-阿里云开发者社区

开发者社区> 开发与运维> 正文

《精通 ASP.NET MVC 4》----2.3 渲染Web页面

简介: 前面例子的输出并不是HTML,只是一个字符串“Hello, world”。为了产生一个对浏览器请求进行响应的HTML,需要创建一个视图(View)。

本节书摘来自异步社区《精通 ASP.NET MVC 4》一书中的第2章,第2.3节,作者: 【美】Adam Freeman ,译者: 李萍 , 徐燕萍 , 林逸 , 更多章节内容可以访问云栖社区“异步社区”公众号查看。

2.3 渲染Web页面

精通 ASP.NET MVC 4
前面例子的输出并不是HTML,只是一个字符串“Hello, world”。为了产生一个对浏览器请求进行响应的HTML,需要创建一个视图(View)。

2.3.1 创建并渲染视图

要做的第一件事是修改Index动作方法,如清单2-3所示。

清单2-3 修改控制器以渲染一个视图

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PartyInvites.Controllers {
    public class HomeController : Controller {
        public **ViewResult** Index() {
            return **View()**;
        }
    }
}

清单2-3中的改动以黑体显示。当从一个动作方法返回一个ViewResult对象时,便是在指示MVC去渲染一个视图。通过调用不带参数的View方法来创建这个ViewResult对象。这是告诉MVC——去渲染该动作的默认视图。

如果此时运行这个应用程序,就可以看到MVC框架正试图查找要使用的默认试图,并显示图2-8所示的错误消息。

这个错误消息是很有帮助的,它不仅解释了MVC未找到该动作方法的视图,而且还显示出它查找了哪些地方。这是MVC约定的另一个很好的例子:视图是通过命名约定与动作方法相关联的。这个动作方法叫作“Index”,控制器叫作“Home”。从图2-8中可以看出,MVC试图在“Views”文件夹中查找有这个名字的不同文件。

为了创建一个视图,停止调试器,右击HomeController.cs代码文件中的动作方法(在方法名上,或在方法体内),从弹出菜单选择“添加视图”,打开“添加视图”对话框,如图2-9所示。

去掉“Use a layout or master page(使用布局或母版页)”复选框。本例不使用布局,但读者将在第7章看到布局的使用。点击“Add(添加)”按钮,Visual Studio将在Views/Home文件夹中创建一个名为“Index.cshtml”的视图文件。如果回看刚才图2-8显示的错误消息,就会发现这个新文件是MVC试图寻找的文件之一。

提示:.cshtml文件扩展名表示是一个由Razor处理的C#视图。MVC的早期版本建立在ASPX视图引擎之上,其视图文件扩展名为.aspx。
Visual Studio打开Index.cshtml文件以便编辑。读者将看到该文件主要含有HTML。不同的是,会看到类似下面的部分。


e56754b58e46bfae36abd9750bd91661bccf955a
@{
    Layout = null;    
}

这是一个由Razor视图引擎来解释的代码块。这是一个相当简单的例子。它只是告诉Razor并未选用布局(此刻略去Razor,稍后再回头讨论)。现在,将清单2-4所示的黑体内容添加到Index.cshtml文件中。

清单2-4 添加到视图的HTML


eb921478af4fb32477efef1b4c7608b60016f839

这一添加显示了另一种简单消息(用HTML标记显示出来的消息,而不是前面那种由动作方法显示的字符串消息——译者注)。从“Debug(调试)”菜单选择“Start Debugging(开始调试)”来运行该应用程序,并测试此视图。读者可以看到类似于图2-10所示的内容。


6d16bd21f49a6e54bb60830ff8c765af55b80ca2

在最初创建Index动作方法时,它返回了一个字符串值。这意味着,MVC除了把这个字符串传递给浏览器之外,未做其他事情。现在,Index方法返回了一个ViewResult,这是指示MVC渲染一个视图并返回HTML。清单2-4并未告诉MVC应该使用哪个视图,其实它运用了命名约定,以自动找到一个视图。这个约定是,视图具有动作方法的名字,并位于以控制器命名的文件夹之中——~/Views/Home/Index.cshtml。

除了字符串和ViewResult对象之外,还可以从动作方法返回其他结果。例如,如果返回一个RedirectResult,可以使浏览器被重定向到另一个URL。如果返回一个HttpUnauthorizedResult,会强迫用户进行登录。这些对象统称为动作结果(Action Result),而且它们都是从ActionResult类派生而来的。动作结果系统使开发者能够封装并重用动作中的常用响应。随着本书的进展,将介绍更多内容,并演示一些复杂的运用。

2.3.2 添加动态输出

一个Web应用程序平台的全部目标是构造并显示动态输出。在MVC中,控制器的工作是构造一些数据,并将其传递给视图,而视图负责把它渲染成HTML。

注意:现在,有很多人都把“渲染”说成“呈现”,其实这种说法是不正确的。Web页面从服务器到浏览器的整个呈现过程实际上分为三步。第一步是通过视图引擎对视图文件进行解析,将视图文件中的代码转换成HTML标记,这一步叫作渲染。第二步是将渲染后的HTML标记传递给客户端浏览器,这一步是页面的传递。第三步是浏览器接收到HTML后对其进行处理并呈现为Web页面,这一步才叫作呈现。由此可见,渲染是把页面的非HTML代码(控件、页面代码等)转换成HTML标记,这一步工作是由服务器完成的。而呈现是将HTML显示成Web页面,这一步工作是由浏览器完成的。渲染和呈现是整个页面处理过程的两个不同阶段,更不能把这两步工作混谈为只有“呈现”这么一步——译者注
把数据从控制器传递给视图的一种方式是使用ViewBag(视图包)对象,它是Controller基类的一个成员。ViewBag是一种动态对象,可以给它赋任意属性,使这些属性的值在随后渲染的视图中可用。清单2-5演示了在HomeController.cs文件中以这种方式传递一些简单的动态数据。

清单2-5 设置一些视图数据

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace PartyInvites.Controllers {
    public class HomeController : Controller {
        public ViewResult Index() {
**int hour = DateTime.Now.Hour;**
**ViewBag.Greeting = hour < 12 ? "Good Morning" : "Good Afternoon";**
            return View();
        }
    }
}

将一个值赋给ViewBag.Greeting属性时,便是为视图提供数据。ViewBag是一种动态对象,Greeting属性直到给其赋值的那一刻才会存在——这让用户能够以自如而流畅的方式将数据从控制器传递给视图,而不必提前定义类。

在视图中再次查阅ViewBag.Greeting属性,便可获得其数据值,正如清单2-6所演示的那样,它显示了对Index.cshtml文件所做的修改。

清单2-6 接收ViewBag的数据值


25287a0873c68ee83b4c1e703f80e4c7f930e301

添加到清单2-6的是一个Razor表达式。当人们在控制器的Index方法中调用View方法时,MVC框架会定位Index.cshtml视图文件,并要求Razor视图引擎解析该文件的内容。Razor会寻找类似于在该清单中所添加的这种表达式,并处理它们。在此例中,处理该表达式意味着,在视图中插入在动作方法中赋给ViewBag.Greeting属性的值(这就是译者前面所提到的视图渲染过程——译者注)。

对属性名Greeting没有特别的要求,可以用任意属性名来代替它,它会一样工作。当然,通过对多个属性赋值,可以将多个数据值从控制器传递给视图。通过运行该项目,可以看到第一个动态的MVC输出,如图2-11所示(请读者体会“动态”二字:动作方法可以根据不同的情况动态地对Greeting属性赋不同的值,而视图无须做任何修改,便可以动态地显示出正确的数据——译者注)。


cb7683ea6106c7a64ace0e3ec11d3f727815ab45

本文仅用于学习和交流目的,不代表异步社区观点。非商业转载请注明作译者、出处,并保留本文的原始链接。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章