转:http://www.cnblogs.com/xray2005/archive/2011/07/05/2097881.html

以前我们可以通过ClientID在JavaScript脚本中服务器端控件.比如:

document.getElementById("<%=控件.ClientID %>");

这种方式不方便,而且如果在有数据绑定的控件中嵌套着子控件,则访问更不太方便了.

现在,在Asp.Net4中,对于控件增加了一种新的属性,名为ClientIDMode.通过设置ClientIDMode,我们可以指定各个服务器控件如何生成ClientID,以便我们在客户端脚本中方便使用.具体如下:

1.         Inherit

控件继承其父控件的 ClientIDMode 设置。这个就没什么多说的了.

2.         AutoID

ClientID 值是通过串联每个父命名容器的 ID 值生成的,这些父命名容器都具有控件的 ID 值。 在呈现控件的多个实例的数据绑定方案中,将在控件的 ID 值的前面插入递增的值。 各部分之间以下划线字符 (_) 分隔。 在 ASP.NET 4 之前的 ASP.NET 版本中使用此算法。

代码如下所示:

<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div>

<asp:Button ID="Button1123" runat="server" Text="Button" OnClientClick="showClientId();"

ClientIDMode="AutoID" />

</div>

<script type="text/javascript">

function showClientId() {

var d = document.getElementById("<%=Button1123.ClientID %>");

alert(d.id);

return false;

}

</script>

</asp:Content>

运行结果如下图所示:

3.         Static

ClientID 值设置为 ID 属性的值。 如果控件是命名容器,则该控件将用作其所包含的任何控件的命名容器的顶层。

代码如下所示:

<asp:Content ID="content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">

<div>

<asp:Button ID="Button1123" runat="server" Text="Button" OnClientClick="showClientId();"

ClientIDMode="Static" />

</div>

<script type="text/javascript">

function showClientId() {

var d = document.getElementById("Button1123");

alert(d.id);

return false;

}

</script>

</asp:Content>

这里,我们就可以直接使用var d = document.getElementById("Button1123");这样的代码访问服务器端控件了. 运行结果如下图所示:

4.         Predictable

对于数据绑定控件中的控件使用此算法。 ClientID 值是通过串联每个父命名容器的 ClientID 值生成的,这些父命名容器都具有控件的ID 值。 如果控件是生成多个行的数据绑定控件,则在末尾添加 ClientIDRowSuffix 属性中指定的数据字段的值。  如果 ClientIDRowSuffix 属性为空白,则在末尾添加顺序号,而非数据字段值。 这个顺序号是从0开始并以1递增的. 各部分之间以下划线字符 (_) 分隔。

页面代码如下:

<asp:ListView ID="ListView1" runat="server" ClientIDMode="Predictable" ClientIDRowSuffix="ID">

<ItemTemplate>

<tr>

<td>

<%# Eval("ID")%>

</td>

<td>

<%# Eval("Name") %>

</td>

<td align="right">

<asp:Label ID="Label1" runat="server" Text='<%# Eval("RegisteTime") %>' />

</td>

</tr>

</ItemTemplate>

</asp:ListView>

运行后,查看页面源文件如下:

如上示例, Predictable 主要是用在有数据绑定控件中的子控件中,这样可以按照自己的意愿生成相应的id,上例中,我们指定了使用数据源中的ID字段做为后缀来生成相应的id.还可以通过分号分割设置多个字段作为ID.

现在我们去掉ClientIDRowSuffix="ID"这段代码,再来看看执行之后的页面源代码.

我们可以发现,自动为添加了从0开始,以1递增的后缀序号.

使用此方式,我们可以预见子控件id规律,这样在某些需要顺序或循环通过客户端脚本(如JavaScript脚本)访问这些子控件时,就很方便了.

通过以上几种不同的设置,我们可以更自由的控制服务器端控件生成的id,以使得我们在客户端脚本(如JavaScript脚本)中方便的调用.尤其在现在Jquery等JS库普遍使用的情况下.

 
     本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

转:通过代码理解Asp.net4中的几种ClientIDMode设置.的更多相关文章

  1. 通过代码理解Asp.net4中的几种ClientIDMode设置.

    以前我们可以通过ClientID在JavaScript脚本中服务器端控件.比如: document.getElementById("<%=控件.ClientID %>" ...

  2. Asp.Net中的三种分页方式

    Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...

  3. httpClient中的三种超时设置小结

    httpClient中的三种超时设置小结   本文章给大家介绍一下关于Java中httpClient中的三种超时设置小结,希望此教程能给各位朋友带来帮助. ConnectTimeoutExceptio ...

  4. 理解asp.net中DropDownList编辑数据源,绑定数据库数据。

    一.理解asp.net绑定数据库 终于学习到了连接数据库部分的内容,杨中科老师视频看起来挺轻松的,如果是高清版就更ok了. 我发现我学习新的编程语言会有一个特点,都想要赶紧学习数据库,数据就是一切,有 ...

  5. ASP.Net中的四种状态保持机制

    每个人上网可多有过这样的情况,当我们登陆某个网站时,在登陆的旁边会有一个 "记住我" 的复选框,有的网站还会让用户选择记住我.这个记住我是怎么实现的呢? 其实就用利用的是cooki ...

  6. 详解ASP.NET4 GridView的四种排序样式

    与ASP.NET 的其他Web控件一能够,Gridview控件拥有很多不同的CSS样式属性设置,包括象CssClass,Font字体,ForeColor,BackColor,BackColor, Wi ...

  7. ASP.Net 中的三种控件

    ---恢复内容开始--- 第一种:HTML控件 ASP.Net把HTML控件当成普通字符串渲染到浏览器端,不去检查正确性.无法在服务器端进行处理. 比如: <input111 type=&quo ...

  8. 深入理解asp.net中的 __doPostBack函数

    前段时间做一个.net网站的时候,用到了模拟前端按钮刷新updatePanel进行局部刷新的时候,遇见了这个问题,当时没顾上记下来,查看网上资料,记下来留着以后查看. 很早以前,当我刚接触asp.NE ...

  9. ASP.NET动态加载Js代码到Head标签中(三种方法)

    方法一代码如下: HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attribut ...

随机推荐

  1. 377. Combination Sum IV——DP本质:针对结果的迭代,dp[ans] <= dp[ans-i] & dp[i] 找三者关系 思考问题的维度+1,除了数据集迭代还有考虑结果

    Given an integer array with all positive numbers and no duplicates, find the number of possible comb ...

  2. ajax简单封装

    var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); ...

  3. Could not find artifact com.sun:tools:jar:1.5.0

    问题: Failed to execute goal on project petroleum: Could not resolve dependencies for project petroleu ...

  4. [示例]NSDictionary编程题-字典的排序应用(iOS7班)

    代码: #import <Foundation/Foundation.h> int main(int argc, const char * argv[]) { @autoreleasepo ...

  5. 告别硬编码-发个获取未导出函数地址的Dll及源码

    还在为找内核未导出函数地址而苦恼嘛? 还在为硬编码通用性差而不爽吗? 还在为暴搜内核老蓝屏而痛苦吗? 请看这里: 最近老要用到内核未导出的函数及一些结构,不想再找特征码了,准备到网上找点符号文件解析的 ...

  6. Memcached 及 Redis 架构分析和比较

    Memcached和Redis作为两种Inmemory的key-value数据库,在设计和思想方面有着很多共通的地方,功能和应用方面在很多场合下(作为分布式缓存服务器使用等) 也很相似,在这里把两者放 ...

  7. http://bootswatch.com/

    http://bootswatch.com/ http://v3.bootcss.com/examples/dashboard/

  8. BroadCastReceiver相关知识--读书笔记

    2013-12-30 16:55:07 1. BroadCastReceiver是Android四大组件之一,本质上是一个系统级的监视器. 2. 每次BroadCast事件发生后,系统都会创建对应的B ...

  9. jQuery 其他操作

    1. 样式操作 1.1 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 1.2 追加样式: ...

  10. C++-sizeof和strlen的区别

    一.sizeof    sizeof(...)是运算符,在头文件中typedef为unsigned int,其值在编译时即计算好了,参数可以是数组.指针.类型.对象.函数等.    它的功能是:获得保 ...