以前我们可以通过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设置.

    转:http://www.cnblogs.com/xray2005/archive/2011/07/05/2097881.html 以前我们可以通过ClientID在JavaScript脚本中服务器端 ...

  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. MySQL计算指标连续两月金额相比_20160929

    在正常的业务逻辑中,对客户的分析是必须的也是最经常用到的,根据时间维度计算计算指标连续两月环比情况也是一道必须面对的题目. 国庆放假 先写代码 后面再拆分解释 SELECT a.*,b.年月 AS 上 ...

  2. poj3254二进制放牛——状态压缩DP

    题目:http://poj.org/problem?id=3254 利用二进制压缩状态,每一个整数代表一行的01情况: 注意预处理出二进制表示下没有两个1相邻的数的方法,我的方法(不知为何)错了,看到 ...

  3. linux 中spfvim安装

    1. 安装 git 1.1 安装依赖的包: curl          curl-devel     zlib-devel         openssl-devel      perl      c ...

  4. Spring 源码解析之DispatcherServlet源码解析(五)

    spring的整个请求流程都是围绕着DispatcherServlet进行的 类结构图 根据类的结构来说DispatcherServlet本身也是继承了HttpServlet的,所有的请求都是根据这一 ...

  5. Windows WMIC命令使用详解2

    Windows WMIC命令使用详解(附实例) https://blog.csdn.net/aflyeaglenku/article/details/77878525 第一次执行WMIC命令时,Win ...

  6. Elasticsearch的前后台运行与停止(tar包方式)

    备注:在生产环境中,往往一般用后台来运行.jps查看. 1.ES的前台运行 [hadoop@djt002 elasticsearch-2.4.3]$ pwd/usr/local/elasticsear ...

  7. 利用java在服务器和客服端建立连接,进行通讯(代码实例)

    客服端代码:有注释 package javanet; import java.io.IOException; import java.io.InputStream; import java.io.Ou ...

  8. mogilefs分布式文件存储

    MogileFS是一个开源的分布式文件存储系统,由LiveJournal旗下的Danga Interactive公司开发.Danga团队开发了包括 Memcached.MogileFS.Perlbal ...

  9. Eclipse&nbsp;Helios(3.6.2)下载地址

    Eclipse Helios(3.6.2)下载地址   鉴于有些插件最高只能支持到指定的eclipse 3.6版本,以此收集3.6下载地址 Eclipse Helios (v3.6.2) Eclips ...

  10. 1、R-reshape2-cast

    1.cast:     长型数据转宽型数据 (1).acast,dcast的区别在于输出结果.acast 输出结果为vector/matrix/array,dcast 输出结果为data.frame. ...