此教程向你提供 ASP.NET MVC 视图简介, 视图数据,和 HTML Helpers。教程最后,你应该会理解如何创建新视图,从控制器传递数据到视图,和使用 use HTML Helpers 在视图中生成内容。
理解视图
不像 ASP.NET 或者ASP, ASP.NET MVC 并不包括任何直接对应页面的东西。在 ASP.NET MVC应用程序中,硬盘上并不存在与你输入浏览器地址栏中的URL对应的页面。在ASP.NET MVC应用程序中与页面最接近的东西是称为视图的东西。
ASP.NET MVC 应用程序, 传入的浏览器请求被映射到控制器 actions。控制器 action 可能返回一个视图。然而,控制器可能执行其他类型的action,比如将你重定向到另一个控制器 action。
代码1 包含一个简单的名为 HomeController的控制器。 HomeController 暴露了2个控制器 actions 名为 Index() 和 Details()。
代码1 – HomeController.cs
你可以在浏览器地址栏中输入以下URL来调用第一个action, Index() action:
/Home/Index
你可以在浏览器地址栏输入这个来调用第二个action, Details() action:
/Home/Details
Index() action 返回一个视图。大多数你创建的action都是返回视图的。然而,一个action可以返回其他类型的 action result。例如, Details() action 返回一个 RedirectToActionResult ,它将传入的请求重定向到 Index() action。
Index() action 只有简单的一行代码:
View();
这行代码返回一个必须位于你的web服务器以下路径的视图:
/Views/Home/Index.aspx
该路径的视图由控制器名称和控制器action名称来推断。
如果你愿意,你可以显式指定视图名称。下面这行代码返回一个名为"Fred"的视图:
View(“Fred”);
当这行代码被执行时,视图从以下路径返回:
/Views/Home/Fred.aspx
如果你要为你的ASP.NET MVC程序创建单元测试那么显式指定视图名称是一个好主意。那样,你可以创建单元测试来验证预期的视图是否由一个控制器action返回。
向视图添加内容
视图是一个可以包含脚本的标准的(X)HTML文档。使用脚本来向视图添加动态内容。
例如,代码2的视图显示了当前日期与时间。
代码2 – /Views/Home/Index.aspx
注意代码2 中的HTML页面的body包含了以下脚本:
<% Response.Write(DateTime.Now);%>
使用脚本限定符 <%和 %> 来标示脚本的开始与结束。这个脚本是用C#写的。通过调用Response.Write()方法显示当前日期与时间在浏览器上。脚本限定符 <%和 %> 可以用来执行一到多个语句。
既然使用 Response.Write() 如此频繁, 微软提供一个调用Response.Write()方法的快捷方式。代码 3 中的视图使用限定符 <%=和 %> 作为调用Response.Write()的快捷方式。
代码 3 – Views/Home/Index2.aspx
你可以使用任何 .NET语言在视图中生成动态内容。通常,使用 Visual Basic .NET或者 C# 来写你的控制器和视图。
使用 HTML Helpers 来生成视图内容
要更简单地为视图添加内容,可以利用称为 HTML Helper 的东西。 HTML Helper, 通常是一个生成字符串的方法。可以使用 HTML Helper 生成标准 HTML 元素诸如输入框,超链接,下拉框和列表框。
例如,代码4中的视图利用了3个 HTML Helper -- BeginForm(), TextBox() 和Password() helper -- 来生成一个登录表单 (见图1).
代码4 -- /Views/Home/Login.aspx
所有的 HTML Helper 方法都是由视图的Html属性来调用的。例如,调用Html.TextBox()方法呈现一个TextBox。
注意当调用 Html.TextBox() 和 Html.Password() helper时要使用脚本限定符 <%= 和 %>。这些 helper 仅仅返回一个字符串。你需要调用 Response.Write() 以呈现字符串到浏览器。
使用 HTML Helper 方法是可选的。它们使你的生活更简单,因为减少了你需要写的HTML和脚本数量。代码5中的视图呈现了与代码4中一样的表单,但是没有使用 HTML Helper。
代码5 -- /Views/Home/Login.aspx
你还可以创建自己的 HTML Helper。例如,你可以创建一个 GridView() helper 方法在一个HTML 表格里自动显示一组数据库记录。我将在教程《创建自定义 HTML Helpers》中探讨这个话题。
使用视图数据向视图传送数据
使用视图数据从控制器传送数据到视图。将视图数据想象成通过邮件发送的包。所有从控制器传送到视图的数据必须使用这个包来发送。例如,代码6中的控制器向视图数据添加一个信息。
代码6 – ProductController.cs
控制器的 ViewData 属性表示一个键值对集合。在代码 6, Index() 方法向视图数据集合添加一个名为message的项,值为 “Hello World!”。当视图由Index()方法返回时,视图数据自动传送到视图中。
代码7中的视图从视图数据中取得message并将message呈现到浏览器。
代码7 -- /Views/Product/Index.aspx
注意当呈现message时,视图利用了HTML Helper方法。 Html.Encode() 将特殊字符例如 <和 > 编码为可以在网页安全显示的字符。当你要呈现用户提交到网站的内容时,应该将内容进行编码以防止 JavaScript 注入攻击。
(由于我们自己在ProductController里创建了信息,我们不必对信息进行编码。然而,在从视图数据中取得显示内容时,经常调用Html.Encode()方法是一个好的习惯。)
在代码 7中, 我们利用了视图数据来从控制器传递一个简单的字符串信息到视图。你还可以使用视图数据来传送其他类型的数据,诸如一个从控制器到视图的数据库记录集合。例如,如果你要在视图中显示Products数据库表中的内容,那么你可以在视图数据中传递这个数据库记录集合。
你还可以从控制器传递强类型的视图数据到视图。我们将在《理解强类型视图数据和视图》教程中探讨这个话题。
总结
这篇教程提供了ASP.NET MVC 视图,视图数据和 HTML Helper的简介。在第一节,你学到了如何添加一个新的视图到你的工程中。你学到了必须在正确的文件夹下添加视图以从特定控制器中调用。接下来,我们讨论了HTML Helper的话题。你学到了HTML Helper如何让你简单地生成标准HTML内容。最后,你学到了如何利用视图数据来从控制器传递数据到视图中。
分享到:
相关推荐
asp.net mvc 分部视图的基本使用,包括三种方式,ajax 参数请求,以及在页面上直接加Action的方式,还有就是Action中添加参数的方式
Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程 Asp.Net MVC案例教程
本书共分为12章,以符合初学者思维的方式系统地介绍ASP.NET MVC的应用技巧,并结合实际项目详细地介绍如何基于ASP.NET MVC构建企业项目。通过本书的学习,读者可以全面掌握ASP.NET MVC的开发,并从代码中获取软件...
ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程ASP.net MVC3 中文教程
ASP.NET MVC 5 - 视图 4. ASP.NET MVC 5 - 将数据从控制器传递给视图 5. ASP.NET MVC 5 - 添加一个模型 6. ASP.NET MVC 5 - 创建连接字符串并使用SQL Server LocalDB 7. ASP.NET MVC 5 - 从控制器访问数据模型 8. ...
用ASP.NET MVC C#语言实现WebSocket
asp.net MVC4 CMS 完整的源代码,学习和提高asp.net mvc4可以参考一下。
ASP.NET MVC作为微软官方的.NET平台下MVC解决方案,自诞生起就吸引了众多.NET平台开发人员的眼球。ASP.NET MVC从一开始的设计思路就与Struts不同,它的映射是利用路由配置而非xml,从而大大降低了开发复杂度,并且比...
The power of ASP.NET MVC 5 stems from the underlying ASP.NET platform. To make your ASP.NET MVC applications the best they can be, you need to fully understand the platform features and know how they ...
MVC专家“梦之队”对ASP.NET MVC 4的全新诠释 由Microsoft专家和极受敬重的软件开发社区负责人撰写的《ASP.NET MVC 4高级编程(第4版)》将带您学习最前沿的Web框架:ASP.NET MVC 4。本书开篇简要介绍ASP.NET MVC框架...
Pro ASP.NET MVC 5 (精通ASP.NET MVC5框架) 中文+英文+配套源代码
dwz框架 asp.net mvc3;dwz框架 asp.net mvc3;dwz框架 asp.net mvc3
ASP.NET MVC 4 in Action is a hands-on guide that shows you how to apply ASP.NET MVC effectively. After a high-speed ramp up, this thoroughly revised new edition explores each key topic with a self-...
AngularJS 开发 ASP.NET MVC.
ASP.NET MVC项目源代码设计资料
ASP.NET MVC5高级编程(第5版.NET开发经典名著)作为Microsoft备受欢迎的MVC技术的最新版本,MVC 5是一个成熟的Web应用程序框架,支持快速的、TDD友好的开发。MVC允许开发人员创建动态的、数据驱动的网站。这样的...
功能简单 IDE:VS2013 架构:ASP.NET MVC5 语言:C#
asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧asp.net mvc 弹出窗口 技巧
ASP.NET MVC 是微软官方提出的一种Web开发框架,通过M是模型(model)-V视图(view)-C控制器(controller)l来设计创建Web应用程序。截至目前最新版本是MVC5,相对于之前的版本MVC5其可扩展性、易用性等方面都不很大的...
asp.net mvc4 实现用户的登录验证