代码改变世界

体验ASP.NET4之ClientID

2009-10-26 23:17  Jun1st  阅读(2363)  评论(14编辑  收藏

在ASP.NET中,我们赋给一个服务器端控件的ID值,并非真正这个控件在浏览器中展现时的Html的ID值,Framework会默认把父控件的ID值用”_”区分附加到自己的ID前面,因此我们在Html中看到的ID值通常是这个样子的:”ctl0_UserControl1_ctl01_Textbox1“。

这一ID的生成方式对于后台代码来说,并没有什么影响,但是却给客户端的操作带来了很多的不便。比如,我们不能直接在javascript和css代码中直接使用”Textbox1”这一ID。在JS代码中,我们需要使用ClientID这一属性。而对于CSS,则需要使用控件的CssClass属性来work around这一问题。

好了,现在ASP.NET 4给我们带来了ClientIDMode这一属性,通过设置这个Mode,我们可以控制”ClientID”的生成方式

四种Model

  1. Legacy: ClientIDMode的default值,这时的ClientID值就是经典的“ctl0_UserControl1_ctl01_Textbox1”
  2. Inherit:这个是每一个控件的默认的行为,它会继承它的父控件的mode属性
  3. Static :顾名思义,控件的ID值就是最终的ClientID值。因此,如果在一个repeating的控件中使用这一个属性,就得负责保证ClientID的唯一性
  4. Predictable:相对来说这个属性比较复杂。在Predictable模式下,生成的ClientID值得模式是:[Prefix]_[ID]_[Suffix]

Legacy Model

在Legacy模式下生成的ClientID就是我们最为熟悉的,如”ctl0_UserControl1_ctl01_Textbox1”。

Inherit Model

在控件没有设置ClientIDMode值是,它的default值为Legacy。但是,子控件会默认继承父控件的Mode值,如果父控件的Mode值不为Legacy,那么子空间的Mode值就修改为父控件的值

Static Model

当控件的ClientIDMode值为Static时,控件的ID就为最后我们通过view source看到的ID值

Predictable

Predictable mode经常被用在如ListView, DataList等这样的数据绑定控件上。[Prefix]_[ID]_[Suffix] 中的[Prefix]为父控件的ID,中间的[ID]就为自己的ID值,而这个[Suffix]就依情形而定了。在Predictable模式下,名为ClientIDRowSuffix的属性值可以用来设置这一Suffix,但是这个值必须为Data Key Collections中的一个。可以给ClientIDRowSuffix设置多个值,如ClientIDRowSuffix=“ProductID, Name”,这时生成的最终的ID值就是[Prefix]_[ID]_ProductID_Name。如果没有给ClientIDRowSuffix赋值(比如使用Repeater控件时),那么这一Suffix就是这时的RowIndex

理论讲完了,该是实践的时候了。借用一句经常在英文书上看到的一句: It’s time to get your hands dirty! 附上source code, 置底。

Summary

个人感觉,能够控制这个ClientID还是很值得推荐和使用的一个功能,尤其是在JS和CSS代码无处不在的Web时代,给我们开发人员带来很多的方便之处。而相对于url routing功能,这一功能率先被用到的概率应该会大得多。

Sample 需要用VS 2010 Beta2来打开