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

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

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

2.3 渲染Web页面

前述示例的输出并不是HTML——只是一个字符串“Hello world”。为了产生一个对浏览器请求进行响应的HTML,则需要一个视图(View)。

2.3.1 创建并渲染视图

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

清单2-3 在HomeController.cs文件中修改控制器,以渲染一个视图

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-9所示的错误消息。


bb57b134bbbf209e24bbe3dddb49e04441a253fe

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

创建视图最简单的方法是要求Visual Studio来做这件事。在HomeController.cs文件的代码编辑窗口中定义Index动作方法的任意地方右击,然后从弹出的菜单中选择“Add View(添加视图)”,如图2-10所示。


5412d4b1e684a349152e2053f7b9854be04cc7a6

Visual Studio将显示“Add View(添加视图)”对话框,让你配置待创建视图文件的初始内容。将“View name(视图名)”设置为“Index”(与该视图相关联的动作方法的名称,这是另一个约定),将“Template(模板)”设置为“Empty (without model)”(空模板无模型),让“Create as a partial view(创建为分部视图)”“Use a layout page(使用布局页)”复选框处于未选状态,如图2-11所示。此时不必急着了解这些选项的含义,在后面的章节中将有详细解释。单击“Add(添加)”按钮,创建这一新的视图文件。


ef6c9f0997b3e88da8df2026350fcbd870e34021

Visual Studio将在Views\Home文件夹中创建一个名称为“Index.cshtml”的视图文件。如果未得到这一结果,请删除已创建的文件,再重试一次。这是MVC框架的另一个约定:视图被放置在Views文件夹中,文件夹的结构是与其关联的控制器名称相对应的。

提示:
.cshtml文件扩展名表明这是一个由Razor进行处理的C#视图。MVC的早期版本依托于ASPX视图引擎之上,其视图文件的扩展名为.aspx。
上述“Add View(添加视图)”对话框中所选择的值的结果是让Visual Studio创建最基本的视图,其内容如清单2-4所示。

清单2-4 Index.cshtml文件的初始内容


de35e5db6e02dcdc7edaff910babbc2dd47aa605

Visual Studio会打开这一个Index.cshtml文件,以便编辑。可以看出,该文件主要含有HTML语句。不同的是,会看到如下所示的部分。


04205e6b79065ef519af2293c5177a8924e6bde6

这是一个将由Razor视图引擎进行解释的表达式,Razor引擎处理视图内容并生成发送给浏览器的HTML。这是一个简单的Razor表达式,它告诉Razor未选用布局,布局类似于发送给浏览器的HTML模板(将在第5章中描述)。此刻打算先忽略Razor,稍后再回过头来讨论。现在对Index.cshtml文件添加一些内容,如清单2-5中的黑体所示。

清单2-5 在Index.cshtml中添加到视图的HTML


0dc63529aa8bc66107de0bbeaa0bfe30282db42e

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


cb08f8771f4ca1e663a37d70bbf7b1c18004b305

在最初编辑Index动作方法时,它返回的是一个字符串值。这意味着MVC除了把这个字符串值传递给浏览器之外,未做其他事情。现在,Index方法返回了一个ViewResult,MVC框架渲染了一个视图并返回了它所产生的HTML。清单2-4并未告诉MVC应该使用哪一个视图,因此它会运用命名约定自动寻找一个视图。该约定是,视图具有动作方法的名称,并包含在以控制器命名的文件夹之中:Views/Home/Index.cshtml。

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

2.3.2 添加动态输出

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

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

清单2-6 在HomeController.cs文件中设置一些视图数据

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属性进行赋值时,便是为视图提供数据。Greeting属性直到对其赋值的那一刻才会形成——这让作者能够以自如而流畅的方式将数据从控制器传递给视图,而不必提前定义类。在视图中再次查阅ViewBag.Greeting属性,便可获得其数据值。正如清单2-7所演示的那样,它显示了对Index.cshtml文件所做的相应更改。

清单2-7 在HomeController.cs文件中接收ViewBag的数据值


20f20d0f3f701d1f3f5304f252299ed41e46b1d6

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

对属性名称Greeting没有特别的要求,用任意属性名来代替,照样会正常工作,只要在控制器中使用的名称与视图中使用的名称相匹配即可。当然,通过对多个属性赋值,可以将多个数据值从控制器传递到视图。启动该项目,可以看到这些修改的效果,如图2-13所示。


1ac5c9f864aabd30ae2e7643f7ce81b9bf363831
相关文章
|
3月前
|
开发框架 JavaScript 前端开发
揭秘:如何让你的asp.net页面变身交互魔术师——先施展JavaScript咒语,再引发服务器端魔法!
【8月更文挑战第16天】在ASP.NET开发中,处理客户端与服务器交互时,常需先执行客户端验证再提交数据。传统上使用ASP.NET Button控件直接触发服务器事件,但难以插入客户端逻辑。本文对比此法与改进方案:利用HTML按钮及JavaScript手动控制表单提交。后者通过`onclick`事件调用JavaScript函数`SubmitForm()`来检查输入并决定是否提交,增强了灵活性和用户体验,同时确保了服务器端逻辑的执行。
48 5
|
30天前
|
编解码 数据安全/隐私保护
.Net PdfiumViewer 打印时无法渲染电子签名问题的解决方法
【10月更文挑战第14天】这段内容介绍了使用 PdfiumViewer 库处理 PDF 文件时遇到电子签名无法打印的问题及其解决方法。首先分析了 PdfiumViewer 默认设置或对电子签名支持不足可能导致此问题,建议更新库版本并通过 NuGet 包管理器进行升级。接着检查打印机设置和驱动程序,确保设置正确且驱动为最新版本。然后优化自定义打印代码,提高渲染分辨率,确保电子签名正确加载。最后,验证 PDF 文件格式和兼容性,必要时联系技术支持或求助技术社区。
|
2月前
|
开发框架 监控 前端开发
在 ASP.NET Core Web API 中使用操作筛选器统一处理通用操作
【9月更文挑战第27天】操作筛选器是ASP.NET Core MVC和Web API中的一种过滤器,可在操作方法执行前后运行代码,适用于日志记录、性能监控和验证等场景。通过实现`IActionFilter`接口的`OnActionExecuting`和`OnActionExecuted`方法,可以统一处理日志、验证及异常。创建并注册自定义筛选器类,能提升代码的可维护性和复用性。
|
2月前
|
开发框架 .NET 中间件
ASP.NET Core Web 开发浅谈
本文介绍ASP.NET Core,一个轻量级、开源的跨平台框架,专为构建高性能Web应用设计。通过简单步骤,你将学会创建首个Web应用。文章还深入探讨了路由配置、依赖注入及安全性配置等常见问题,并提供了实用示例代码以助于理解与避免错误,帮助开发者更好地掌握ASP.NET Core的核心概念。
89 3
|
2月前
|
开发框架 前端开发 .NET
VB.NET中如何利用ASP.NET进行Web开发
在VB.NET中利用ASP.NET进行Web开发是一个常见的做法,特别是在需要构建动态、交互式Web应用程序时。ASP.NET是一个由微软开发的开源Web应用程序框架,它允许开发者使用多种编程语言(包括VB.NET)来创建Web应用程序。
55 5
|
2月前
|
前端开发 安全 Java
技术进阶:使用Spring MVC构建适应未来的响应式Web应用
【9月更文挑战第2天】随着移动设备的普及,响应式设计至关重要。Spring MVC作为强大的Java Web框架,助力开发者创建适应多屏的应用。本文推荐使用Thymeleaf整合视图,通过简洁的HTML代码提高前端灵活性;采用`@ResponseBody`与`Callable`实现异步处理,优化应用响应速度;运用`@ControllerAdvice`统一异常管理,保持代码整洁;借助Jackson简化JSON处理;利用Spring Security增强安全性;并强调测试的重要性。遵循这些实践,将大幅提升开发效率和应用质量。
63 7
|
2月前
|
前端开发 测试技术 开发者
MVC模式在现代Web开发中有哪些优势和局限性?
MVC模式在现代Web开发中有哪些优势和局限性?
|
3月前
|
开发者 前端开发 Java
架构模式的诗与远方:如何在MVC的田野上,用Struts 2编织Web开发的新篇章
【8月更文挑战第31天】架构模式是软件开发的核心概念,MVC(Model-View-Controller)通过清晰的分层和职责分离,成为广泛采用的模式。随着业务需求的复杂化,Struts 2框架应运而生,继承MVC优点并引入更多功能。本文探讨从MVC到Struts 2的演进,强调架构模式的重要性。MVC将应用程序分为模型、视图和控制器三部分,提高模块化和可维护性。
47 0
|
3月前
|
Java 开发者 前端开发
Struts 2、Spring MVC、Play Framework 上演巅峰之战,Web 开发的未来何去何从?
【8月更文挑战第31天】在Web应用开发中,Struts 2框架因强大功能和灵活配置备受青睐,但开发者常遇配置错误、类型转换失败、标签属性设置不当及异常处理等问题。本文通过实例解析常见难题与解决方案,如配置文件中遗漏`result`元素致页面跳转失败、日期格式不匹配需自定义转换器、`&lt;s:checkbox&gt;`标签缺少`label`属性致显示不全及Action中未捕获异常影响用户体验等,助您有效应对挑战。
84 0
|
3月前
|
Java 前端开发 Apache
Apache Wicket与Spring MVC等Java Web框架大PK,究竟谁才是你的最佳拍档?点击揭秘!
【8月更文挑战第31天】在Java Web开发领域,众多框架各具特色。Apache Wicket以组件化开发和易用性脱颖而出,提高了代码的可维护性和可读性。相比之下,Spring MVC拥有强大的生态系统,但学习曲线较陡;JSF与Java EE紧密集成,但在性能和灵活性上略逊一筹;Struts2虽成熟,但在RESTful API支持上不足。选择框架时还需考虑社区支持和文档完善程度。希望本文能帮助开发者找到最适合自己的框架。
44 0