一起谈.NET技术,ASP.NET4灵活显标记:数据Web控件改进

简介:   长期以来,使用Web控件的开发者都欣赏这些控件所具有的高生产力,但在控制它们生成的标记方面却付出了一定的代价。例如,许多ASP.NET控件会自动地使用元素来包装它们的内容,原因是为了方便布局或样式控制。

  长期以来,使用Web控件的开发者都欣赏这些控件所具有的高生产力,但在控制它们生成的标记方面却付出了一定的代价。例如,许多ASP.NET控件会自动地使用元素来包装它们的内容,原因是为了方便布局或样式控制。然而,这种行为却与过去几年中不断发展的网络标准相违背;这些标准支持使用更清洁和更简洁的HTML标记,而建议节约使用标记;同时,它们提倡应当尽可能使用层叠样式表(CSS)来实现网页的布局和造型。此外,元素和其他自动添加的内容使得使用CSS来修饰Web控件和从客户端使用这些控件更加困难。

  ASP.NET 4.0版本的目的之一就是让Web窗体开发人员更好地控制由Web控件呈现的标记。为此,ASP.NET 4.0中的许多Web控件都包括了一些特定属性,允许页面开发人员指示控件不生成无关的标记或者不仅仅使用元素作为外层包装标记。

  本文将着重探讨ASP.NET 4.0在数据Web控件方面的一系列改进特征。正如你将看到,这些增强功能能够使开发人员能够更好地控制在客户端浏览器上最终呈现的标记。

  1、禁止模板控件生成外层表格元素

  在ASP.NET 3.5中,有若干使用(或可能使用)模板的Web控件会自动使用一个元素封装呈现的模板内容。具有此行为的一个这样的控件便是FormView控件。下面,我们看一下FormView控件如何使用一个元素封装输出内容的例子。

  首先,让我们构造一个FormView控件,我们想使用它来显示Northwind数据库中的Categories表格中的一个特定类别的产品名称及描述信息。为此,这个FormView控件需要提供一个包括CategoryName和Description字段的ItemTemplate模板元素。下面的声明标记正是创建了这样的一个FormView:

 
 
< asp:FormView runat = " server " ... >
< ItemTemplate >
< b ><% # Eval( " CategoryName " ) %></ b >< br />
<% # Eval( " Description " ) %> '
</ ItemTemplate >
</ asp:FormView >

  此外,我们不妨设想这个FormView控件绑定到一个返回有关饮料类信息的数据源控件。通过浏览器浏览时,FormView控件将生成下列HTML代码内容:

 
 
< table cellspacing ="0" id ="ContentPlaceHolder1" style ="border-collapse:collapse;" >
< tr >
< td colspan ="2" >
< b > Beverages </ b >< br />
Soft drinks, coffees, teas, beers, and ales'
</ td >
</ tr >
</ table >

  上面的标记显示了元素被自动添加到模板中定义的标记中。简言之,FormView控件把其模板内容包装在一个具有一行和一列的表格内,而不管我们喜欢与否。

  FormView生成上述外层元素以表达样式信息。此外,上面的FormView控件还使用了一个RowStyle属性,其中包含了多种子样式(背景色,字体,BorderColor,等等)。例如,如果RowStyle的BackColor和Font-Size属性分别被设置为Red和Larger,那么FormView将呈现以下标记:

 
 
< table cellspacing ="0" id ="ContentPlaceHolder1" style ="border-collapse:collapse;" >
< tr style ="background-color:red;font-size:Large;" >
< td colspan ="2" >
< b > Beverages </ b >< br />
Soft drinks, coffees, teas, beers, and ales'
</ td >
</ tr >
</ table >

  请注意上面的标记中是如何在元素(具体地说,是通过元素)中指定由FormView的RowStyle属性定义的样式的。因此,当使用RowStyle属性时这个外层

  元素是非常有用的,但如果没有使用RowStyle属性或者样式信息是直接在模板的标记(理想情况下,应当使用CSS类)中指定的,那么再生成上述外层元素就显得多余了。

  ASP.NET 4.0在FormView中增加了一个新的命名为RenderOuterTable的布尔属性。当把此属性设置为True(默认)时,将生成一个外层的元素,就像在ASP.NET 3.5及早期版本中所实现的一样。但是,如果把此属性设置为False,那么将忽略生成外部的那个元素。

  以我们以前的FormView控件为例,让我们看看如果把RenderOuterTable设置为False会发生什么。

 
 
< asp:FormView runat = " server " ... RenderOuterTable = " false " >
< ItemTemplate >
< b ><% # Eval( " CategoryName " ) %></ b >< br />
<% # Eval( " Description " ) %> '
</ ItemTemplate >
</ asp:FormView >

  经过上面轻微的修改,为FormView控件呈现的标记中不再包括外部表格。相反,FormView控件只是生成它的模板中的内容,如下面的HTML片段所示:

 
 
< b > Beverages </ b >< br />
Soft drinks, coffees, teas, beers, and ales'

  当RenderOuterTable设置为False时,任何通过外部表格表达的样式将不再呈现。简言之,当呈现上面的FormView控件时,对RowStyle属性的任何样式设置都将被忽略。

  除了FormView控件外,RenderOuterTable属性还被添加到下面的ASP.NET 4.0Web控件中:

  Login

  PasswordRecovery

  ChangePassword

  Wizard

  CreateUserWizard

  注意:本文提供的示例中提供了在FormView和Login控件中使用RenderOuterTable属性的情况举例。

  2、ListView控件的增强支持

  ListView控件能够使用模板显示一组数据记录。像GridView一样,ListView控件也支持分页、排序、编辑和删除数据。它也可以用来插入数据。开发人员在使用ASP.NET 3.5版本的ListView控件时必须至少需要提供如下两个模板:

  ItemTemplate—指定绑定到ListView中的每一项要提供的标记

  LayoutTemplate—指定ListView的外层标记,并包含一个Web控件以指出应当提供ItemTemplate中的标记

  在大多数情况下,LayoutTemplate只是包含一个Web控件来指定ItemTemplate中的标记应出现的位置,结果将产生一个使用以下标记的ListView控件: 

 
 
< asp:ListView runat = " server " ... >
< LayoutTemplate >
< asp:PlaceHolder runat = " server " ID = " itemPlaceHolder " />
</ LayoutTemplate >
< ItemTemplate >
...
</ ItemTemplate >
</ asp:ListView >

  在上面的例子中,LayoutTemplate模板的作用仅在于声明“ItemTemplate中的标记应该放到这里”。然而,无论如何,只要你使用ASP.NET 3.5,那么你还是不得不显式地在ListView的标记内定义这个LayoutTemplate模板。

  好消息是,在ASP.NET 4.0版本中,您可以省略LayoutTemplate模板—ItemTemplate现在是唯一在ListView内必须出现的模板。下面的声明标记片断显示了这一新的缩写语法:

 
 
< asp:ListView runat = " server " ... >
< ItemTemplate >
...
</ ItemTemplate >
</ asp:ListView >

  3、针对CheckBoxList和RadioButtonList控件的新选项RepeatLayout

  欲了解有关ListView控件的更多信息,请参考有关的网络文章,在此省略讨论。

  下面,我们来讨论ASP.NET 4.0在CheckBoxList和RadioButtonList控件中提供的一个新的RepeatLayout选项。

  CheckBoxList和RadioButtonList控件能够显示对应于一些给定数据的一组复选框或单选按钮;因此,对于基于数据库查询生成一组复选框或单选按钮是非常有用的。这两个控件都具有一个RepeatLayout属性,用于确定这一组复选框或单选按钮是如何布局的。在ASP.NET 3.5中此属性有两个可能的设置:

  Table(默认)—使用元素布局数据项。默认情况下,每一个复选框或单选按钮被布置在它自己的表格行中。使用RepeatColumns属性将会使每一行中都显示一组固定数目的复选框或单选按钮。

  Flow—使用元素布局每个复选框或单选按钮,且默认情况下,每个元素后面要插入一个人工换行符。如果设置了RepeatColumns属性,则表示在一定数目的复选框或单选按钮后面要插入一个人工换行符。

  ASP.NET 4.0中,又把如下两个额外的设置添加到RepeatLayout属性:

  OrderedList—使用

  元素布局其中的项。你不能把RepeatColumns属性与此设置一起使用。这样做将导致访问网页时抛出一个异常。

  UnorderedList—使用

  元素布局其中的项。你也不能把RepeatColumns属性与此设置一起使用。这样做也将导致访问网页时抛出一个异常。

  请考虑下面的CheckBoxList控件代码,它的RepeatLayout属性被设置为UnorderedList。

 
 
< asp:CheckBoxList ... runat = " server " DataTextField = " CategoryName "
DataValueField
= " CategoryID " RepeatLayout = " UnorderedList " >
</ asp:CheckBoxList >

  当绑定到Northwind数据库的产品类别时,上述控件将呈现以下标记:

 
 
< ul id ="..." >
< li >< input id ="..." type ="checkbox" name ="..." value ="1" />
<
label for ="..." > Beverages </ label ></ li >
< li >< input id ="..." type ="checkbox" name ="..." value ="1" />
<
label for ="..." > Condiments </ label ></ li >
< li >< input id ="..." type ="checkbox" name ="..." value ="1" />
<
label for ="..." > Confections </ label ></ li >
...
</ ul >

  请注意,上面的CheckBoxList控件是如何生成一个无序列表(<ul>)的,以及每个复选框标记是如何呈现在一个列表标记(<li>)内部的。

  ASP.NET 4.0提供OrderedList和UnorderedList这两个选项的想法是,复选框或单选按钮更易于使用CSS进行布局。目前,已有很多的网页讨论了如何使用CSS来布局有序和无序列表元素的问题;因此,在此我们亦省略相关讨论。

  4、小结

  总体来看,ASP.NET 4.0提供给Web窗体开发人员更大的灵活性以控制最终呈现的标记。许多模板控件原先都添加了元素以实现样式控制。现在,这些标签可以被选择性通过一个新的属性RenderOuterTable加以抑制。同样,CheckBoxList和RadioButtonList控件的RepeatLayout属性也被扩展,包括两个新的设置—OrderedList和UnorderedList,这给开发者提供可选择的方式来影响这些控件生成的标记。

  此外,ListView控件也被进一步瘦身—LayoutTemplate模板成为可选的。

  5、DEMO展示

  CheckBoxRadioButtonLists

  default

  DisableOuterTable

 ListView

目录
相关文章
|
18天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
1月前
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
mvc.net分页查询案例——DLL数据访问层(HouseDLL.cs)
9 0
|
1月前
|
前端开发 数据库 UED
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用的关键技术,包括前端优化、后端优化、数据库优化等方面。通过深入讨论各项技术的原理和实践方法,帮助开发者们提升Web应用的响应速度和用户体验。
|
1天前
|
前端开发 JavaScript UED
Web前端开发:探索技术与艺术的交融
Web前端开发:探索技术与艺术的交融
8 1
|
2天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
1月前
|
SQL 数据库
使用ADO.NET查询和操作数据
使用ADO.NET查询和操作数据
10 0
|
1月前
|
开发框架 Dart 前端开发
构建响应式Web界面:Flutter的跨界前端技术
【2月更文挑战第23天】随着移动互联网的飞速发展,响应式Web设计成为现代前端开发的重要趋势。在众多框架中,Google推出的Flutter以其高效的渲染性能、跨平台能力及丰富的组件生态,为前端开发者带来了新的选择。本文将深入探讨如何利用Flutter进行高效、美观的响应式界面构建,同时剖析其与传统前端技术的差异和优势。
|
3月前
|
开发框架 前端开发 .NET
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
ASP.NET CORE 3.1 MVC“指定的网络名不再可用\企图在不存在的网络连接上进行操作”的问题解决过程
42 0
|
1月前
|
开发框架 前端开发 .NET
C# .NET面试系列六:ASP.NET MVC
<h2>ASP.NET MVC #### 1. MVC 中的 TempData\ViewBag\ViewData 区别? 在ASP.NET MVC中,TempData、ViewBag 和 ViewData 都是用于在控制器和视图之间传递数据的机制,但它们有一些区别。 <b>TempData:</b> 1、生命周期 ```c# TempData 的生命周期是短暂的,数据只在当前请求和下一次请求之间有效。一旦数据被读取,它就会被标记为已读,下一次请求时就会被清除。 ``` 2、用途 ```c# 主要用于在两个动作之间传递数据,例如在一个动作中设置 TempData,然后在重定向到另
100 5
|
8月前
|
存储 开发框架 前端开发
[回馈]ASP.NET Core MVC开发实战之商城系统(五)
经过一段时间的准备,新的一期【ASP.NET Core MVC开发实战之商城系统】已经开始,在之前的文章中,讲解了商城系统的整体功能设计,页面布局设计,环境搭建,系统配置,及首页【商品类型,banner条,友情链接,降价促销,新品爆款】,商品列表页面,商品详情等功能的开发,今天继续讲解购物车功能开发,仅供学习分享使用,如有不足之处,还请指正。
117 0