通过代码理解Asp.net4中的几种ClientIDMode设置.
以前我们可以通过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设置.的更多相关文章
- 转:通过代码理解Asp.net4中的几种ClientIDMode设置.
转:http://www.cnblogs.com/xray2005/archive/2011/07/05/2097881.html 以前我们可以通过ClientID在JavaScript脚本中服务器端 ...
- Asp.Net中的三种分页方式
Asp.Net中的三种分页方式 通常分页有3种方法,分别是asp.net自带的数据显示空间如GridView等自带的分页,第三方分页控件如aspnetpager,存储过程分页等. 第一种:使用Grid ...
- httpClient中的三种超时设置小结
httpClient中的三种超时设置小结 本文章给大家介绍一下关于Java中httpClient中的三种超时设置小结,希望此教程能给各位朋友带来帮助. ConnectTimeoutExceptio ...
- 理解asp.net中DropDownList编辑数据源,绑定数据库数据。
一.理解asp.net绑定数据库 终于学习到了连接数据库部分的内容,杨中科老师视频看起来挺轻松的,如果是高清版就更ok了. 我发现我学习新的编程语言会有一个特点,都想要赶紧学习数据库,数据就是一切,有 ...
- ASP.Net中的四种状态保持机制
每个人上网可多有过这样的情况,当我们登陆某个网站时,在登陆的旁边会有一个 "记住我" 的复选框,有的网站还会让用户选择记住我.这个记住我是怎么实现的呢? 其实就用利用的是cooki ...
- 详解ASP.NET4 GridView的四种排序样式
与ASP.NET 的其他Web控件一能够,Gridview控件拥有很多不同的CSS样式属性设置,包括象CssClass,Font字体,ForeColor,BackColor,BackColor, Wi ...
- ASP.Net 中的三种控件
---恢复内容开始--- 第一种:HTML控件 ASP.Net把HTML控件当成普通字符串渲染到浏览器端,不去检查正确性.无法在服务器端进行处理. 比如: <input111 type=&quo ...
- 深入理解asp.net中的 __doPostBack函数
前段时间做一个.net网站的时候,用到了模拟前端按钮刷新updatePanel进行局部刷新的时候,遇见了这个问题,当时没顾上记下来,查看网上资料,记下来留着以后查看. 很早以前,当我刚接触asp.NE ...
- ASP.NET动态加载Js代码到Head标签中(三种方法)
方法一代码如下: HtmlGenericControl Include2 = new HtmlGenericControl("script"); Include2.Attribut ...
随机推荐
- <opengl>使用glu绘制二次曲面
绘制二次曲面通常要以下四步: 1.首先我们创建一个二次方程状态对象 GLUquadricObj *m_pObj; //保存绘图模式.法线模式.法线朝向.纹理等信息 //创建二次方程状态对象 ...
- ubuntu关闭cups服务
本人使用的ubuntu10.10每次开机时使用nmap扫描127.0.0.1的时候总是能发现一个631端口开启,在/etc/services找到 631端口是网络打印机服务,但对于我一个普通用户来说这 ...
- 字典树Trie的使用
1. Trie树介绍 Trie,又称单词查找树.前缀树,是一种多叉树结构.如下图所示: 上图是一棵Trie树,表示了关键字集合{“a”, “to”, “tea”, “ted”, “ten”, “i”, ...
- 浏览器,tab页显示隐藏的事件监听--页面可见性
//监听浏览器tab切换,以便在tab切换之后,页面隐藏的时候,把弹幕停止 document.addEventListener('webkitvisibilitychange', function() ...
- Codeplus2017 11月赛T3——基因
题目:https://www.luogu.org/problemnew/show/P4059 DP,状态应分为空格或字母,可用0和1表示,据此转移,详见代码. 另:注意初始化,因为有负值所以要先把f数 ...
- JS---基础用法2
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 隐藏时间表ribbon按钮
Ribbon.ContextualTabs.Timesheet.Home.Share;Ribbon.ContextualTabs.Timesheet.Home.ShowHide;Ribbon.Cont ...
- HDU 4625. JZPTREE
题目简述:给定$n \leq 50000$个节点的数,每条边的长度为$1$,对每个节点$u$,求 $$ E_u = \sum_{v=1}^n (d(u, v))^k, $$ 其中$d(u, v)$是节 ...
- SQL 分割字符串
USE [AppCloud] GO /****** Object: UserDefinedFunction [dbo].[splitstr] Script Date: 12/19/2013 09:33 ...
- 自定义Swap
网上看到的一篇文章加深了对指针的了解,收藏一下 自定义的swap函数是一个老掉牙的问题,而这个问题对于理解指针和内存中的栈是很有帮助的 一般自定swap函数是这样的: 1.swap函数的功能是实现两个 ...