浙林龙哥

   :: 首页 :: 新随笔 :: 联系 :: 订阅 订阅 :: 管理

公告

 

【原文地址】 Cleaner HTML Markup with ASP.NET 4 Web Forms – Client IDs (VS 2010 and .NET 4.0 Series) 【原文发表日期】 Tuesday, March 30, 2010 7:02 PM

【译注;由于工作繁忙,三月份之后一直没有时间翻译Scott Guthrie的博客。欣慰的是,新的贴子已由微软指定的专门公司做了翻译,这里我将补上其间没有翻译的一些技术贴子。 –思归】

这是我针对即将发布的VS 2010 和 .NET 4所撰写的 贴子系列的第十六篇。

今天的贴子是我将撰写的几个相关贴子的第一篇,主要讨论我们所做的一些重大改动,旨在使ASP.NET 4 的Web Forms生成整洁,与标准相兼容,CSS友好的标识。今天,我将讨论我们正在做的工作,以对由服务器控件显示到客户端的“ID”属性提供更好的控制。

除了写博客外,我现在还使用Twitter发短贴和共享链接。请通过twitter.com/scottgu跟随我。

整洁,与标准相兼容,CSS友好的标识

开发人员对ASP.NET Web Forms经常埋怨的一个东西,就是在使用服务器控件时,他们无法生成整洁的,CSS友好的输出和标识。下面是一些对早期ASP.NET版本的埋怨例子:

  • 对HTML中自动生成的ID属性难以编写JavaScript来操作和使用CSS来做样式化
  • 某些控件(特别是asp:menu控件)使用了表格(table),而不是更具语义的标识,使得样式很丑陋
  • 一些控件生成了行内的样式属性,尽管控件上没设置样式属性
  • ViewState经常是大得出奇

ASP.NET 4对建造与标准兼容的网页提供了更好的支持, ASP.NET 4 中内置的 <asp:> 服务器控件现在生成干净了许多的标识, 支持CSS样式化,来帮助解决上面提到的所有问题。

升级现有的ASP.NET Web Forms应用时的标识兼容问题

当听说ASP.NET 4即将提供整洁的标识时,大家常问的一个问题是,“太棒了,但我现有的应用怎么办?在我升级后,这些变动或改进会不会造成问题?”

为帮助确保我们不会破坏现有的ASP.NET Web Forms应用中对标识和样式所做的假设,我们在 web.config中启用了一个配置标记,controlRenderingCompatbilityVersion,让你决定你是想使用新的ASP.NET 4应用默认的新的整洁标识方式呢,还是为兼容起见,显示与所使用的早期ASP.NET版本同样的标识:

 

 

controlRenderingCompatbilityVersion属性设置为“3.5”时,你的应用和服务器控件会默认使用与VS 2008 和 .NET 3.5一样的标识生成机制来生成输出。当 controlRenderingCompatbilityVersion属性设置为“4.0” 时,你的应用和服务器控件会严格遵循XHTML 1.1规格,生成整洁的客户端ID,显示时以语义正确为宗旨,除去不相关的行内样式。

在使用ASP.NET 4建造的所有新的 ASP.NET Web Forms中,该属性的默认值是4.0。使用VS 2010升级的任何以前的应用,都会被升级向导设置controlRenderingCompatbilityVersion为3.5,以确保向后的兼容性。然后你可以选择改变这个设置(在应用级别,或在web.config文件中局限于页面或目录级别),如果你决定改动页面来使用CSS,来利用新的标识显示机制的话。

今天的整洁标识标题: 客户端ID

在生成的HTML元素上能够拥有干净的,可预料的ID属性是开发人员一直要求Web Forms提供的东西(象 “ctl00_ContentPlaceholder1_ListView1_ctrl0_Label1”这样的ID值实在是不受欢迎)。能够控制生成的ID值有助于简化针对输出编写的客户端JavaScript,简化使用CSS对元素所做的样式化,在大的网页上有助于减少所生成标识的总的大小。

控件上新的ClientIDMode属性

ASP.NET 4在Control这个基类上支持一个新的ClientIDMode属性。ClientIDMode属性表示控件在显示时,该如何生成客户端ID值。ClientIDMode 属性支持4个可能的值:

  • AutoID –生成与.NET 3.5一样的输出(为兼容起见,自动生成的ID还会含有象ctrl00这样的前缀)
  • Predictable (默认值)–除去任何“ctl00” ID 字符串,如果是列表或容器控件,则把子控件的ID串列起来 (例子:id=”ParentControl_ChildControl”)
  • Static (静态)–将ID命名控制完全交给开发人员,他们设置什么ID值,就显示什么值 (例子: id=”JustMyId”)
  • Inherit (继承)–告诉控件使用父容器控件的命名行为模式

 

ClientIDMode属性可以直接设置在单独的控件上(或在容器控件中, 内中包含的控件会默认继承该设置):

 

或在页面或用户控件层次设置(使用 <%@ Page %> 或 <%@ Control %> 指令),这样在页面或用户控件中的控件会继承这个设置(还可以选择覆盖这个设置):

 

也可以在应用的web.config文件中设置,这样应用中的所有页面都会继承这个设置(还可以选择覆盖这个设置):

 

这给予了你任意定制/覆盖命名行为的灵活性。

例子:使用ClientIDMode属性控制非列表控件的ID

让我们来看一下,如何使用新的ClientIDMode属性来控制网页中 “ID” 元素的生成。为帮助示范,我们创建了一个简单的网页,名为“SingleControlExample.aspx”,是基于名为“Site.Master”的母版页的,内含单个<asp:label> 控件,其ID为“Message” ,该控件是包含在名为 “MainContent”的 <asp:content>容器控件中的:

 

然后在后台代码中,我们加了一些象下面这样的简单的代码,在运行时动态填充Label的 Text属性:

 

如果我们是在 ASP.NET 3.5 中 运行该应用(或将ASP.NET 4应用配置使用了3.5显示方式或ClientIDMode=AutoID运行的话),那么生成发送到客户端的标识会是这样的:

 

这个ID是独特的(是好事),但因为其“ct100”前缀,又很丑陋(是坏事)。

使用ASP.NET 4以及ClientIDMode被设置为 “Predictable”时的标识显示

在ASP.NET 4中,服务器控件现在默认使用 ClientIDMode=”Predictable”来生成它们的ID。这帮助确保ID值依然是独特的,在页面上没有冲突,但同时也使得ID不那么冗长,比较可以预料。这意味着我们上面的 <asp:label> 控件生成的标识在ASP.NET 4默认的情形下,会是这样的:

 

注意“ct100”前缀现在没有了。因为 “Message” 控件是内嵌在“MainContent” 容器控件中的,在默认情形下,它的ID会被前缀,成为 “MainContent_Message”,以避免与网页上的其他控件相冲突。

使用ASP.NET 4以及ClientIDMode被设置为“Static””时的标识显示

但有时,你不想要你的ID值被分层嵌套,而只是想显示你设置的任何值。要启用这个的话,你现在可以使用ClientIDMode=Static,这样显示的ID值会跟你在服务器端在你的控件上设置的ID值完全一样。这在ASP.NET 4中会导致下述标识:

 

这个选项现在给予你完全控制控件发送到客户端的ID的能力。

例子:使用ClientIDMode属性控制数据绑定列表控件的ID

数据绑定的列表/网格在Web Form自动生成的ID方面一直以来一直是最难使用和样式化的。现在让我们来看一个场景,看如何在ASP.NET 4中对使用ListView控件生成的ID进行定制。

下面的代码片段是个ListView控件的例子,显示了一个数据绑定集合(机场)中的内容:

 

然后,我们在后台代码中编写下述代码来动态绑定一个机场列表到上面的ListView上:

 

然后在运行时,这会默认生成象下面这样的 <ul> 机场列表。注意,因为 ListView模板中的 <ul> 和 <li> 元素不是服务器控件,在标识中是不会有ID的:

 

给每个行项添加客户端ID

现在,说我们想要给输出添加客户端ID,这样我们可以通过JavaScript使用编程手法来访问每个<li>。我们想要使得这些ID是独特的,可预料的,以及可辨识的。

第一种做法是将模板中的每个 <li> 元素标记为服务器控件(给它一个runat=server属性),并且给其一个id为“airport”:

 

在默认情形下,ASP.NET 4现在会生成象下面这样整洁的ID(不生成象ctl001这样的ID):

 

使用ClientIDRowSuffix属性

我们上面的模板给每个 <li> 元素生成了独特的ID,但假如我们想要在客户端使用JavaScript通过编程手法来访问它们的话,我们也许想要使得ID包含对应的机场的Code属性,以简化引用。好消息是,我们可以轻松地达到目的,通过利用ASP.NET 4中数据绑定控件上的ClientIDRowSuffix属性来更好地控制单独行元素的ID。

要实现的话,我们将在ListView控件上设置ClientIDRowSuffix属性为“Code”。这告诉ListView在生成ID时,使用Airport类的“Code”数据绑定属性:

 

这样,行的ID后缀不再是“1”, “2”, 或 “3”,而是将Airport.Code值嵌合到ID中去了(例如:_CLE, _CAK, _PDX等等):

 

你也可以在其他数据绑定控件(象GridView)上使用 ClientIDRowSuffix。在你想要在客户端对行元素进行编程,在JavaScript代码中使用干净的/可辨识的ID来轻松地引用这些元素时,这会非常有用。

结语

ASP.NET 4允许服务器控件和你的Web Forms应用生成干净许多的HTML标识。

在今天的贴子中,我讨论了如何轻松地控

This entry was posted in 未分类. Bookmark the permalink. Post a comment or leave a trackback: Trackback URL.
posted on 2012-04-24 18:09 浙林龙哥 阅读(...) 评论(...) 编辑 收藏