体验ASP.NET4之ClientID
2009-10-28 16:51:08 来源:WEB开发网核心提示:在asp.net中,我们赋给一个服务器端控件的ID值,体验ASP.NET4之ClientID,并非真正这个控件在浏览器中展现时的Html的ID值,Framework会默认把父控件的ID值用”_”区分附加到自己的ID前面,给我们开发人员带来很多的方便之处,而相对于url routing功能,因此我们在Html中看到的ID
在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
Legacy: ClientIDMode的default值,这时的ClientID值就是经典的“ctl0_UserControl1_ctl01_Textbox1”
Inherit:这个是每一个控件的默认的行为,它会继承它的父控件的mode属性
Static :顾名思义,控件的ID值就是最终的ClientID值。因此,如果在一个repeating的控件中使用这一个属性,就得负责保证ClientID的唯一性
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来打开
这一ID的生成方式对于后台代码来说,并没有什么影响,但是却给客户端的操作带来了很多的不便。比如,我们不能直接在javascript和CSS代码中直接使用”Textbox1”这一ID。在JS代码中,我们需要使用ClientID这一属性。而对于CSS,则需要使用控件的CssClass属性来work around这一问题。
好了,现在ASP.NET 4给我们带来了ClientIDMode这一属性,通过设置这个Mode,我们可以控制”ClientID”的生成方式
四种Model
Legacy: ClientIDMode的default值,这时的ClientID值就是经典的“ctl0_UserControl1_ctl01_Textbox1”
Inherit:这个是每一个控件的默认的行为,它会继承它的父控件的mode属性
Static :顾名思义,控件的ID值就是最终的ClientID值。因此,如果在一个repeating的控件中使用这一个属性,就得负责保证ClientID的唯一性
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来打开
[]
更多精彩
赞助商链接