技术开发 频道

ASP.NET4灵活显标记:数据Web控件改进

  【IT168专稿】长期以来,使用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属性的情况举例。

0
相关文章