使用ClientID
ASP.Net 提供了代码和页面分离的机制,在大多数情况下,这种机制工作得非常好。但是,如果需要使用客户端java脚本来做些工作,你就会遇到麻烦了。问题出在你在设计阶段为server端控件设置的ID值和页面运行时控件实际的ID值不一致。例如,新建一个Web site,增加一个 aspx page,在页面上加入一个text box控件:
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>
运行这个页面,从View source中会看到运行时的结果:
<Input name="mytext" type="text" id="mytext" />
这时我们看到设计阶段的ID值和运行时控件的ID值是一样的,没有问题,这是因为这是一个单纯的aspx页面。如果在页面中包含一个用户自定义的web control或使用了master pages (ASP.NET 2.0),情况就不乐观了。我们增加一个新的user control名为mycontrol.ascx. 在mycontrol.ascx中加入同样的text box。再把这个自定义控件加入到一个aspx 页面,将此控件的ID设置为myControl. 在浏览器中运行这个页面,得到的html是这样的:
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控件的设计阶段ID= mytext,但运行时得到的ID=myControl_mytext。也就是在原来的ID前面增加了包含text box控件的容器myControl的ID。在使用master pages时,所有的aspx 页面都是被包含在一个容器中的,而且还常常会有容器的嵌套。如果在客户端使用JavaScript去按照ID查找控件就会失败。解决这个问题可以有多个方法。
最简单的:
<script language="javascript" type ="text/javascript>
var x=<% Response.Write("'"+myControl.ClientId+"';" ) %>
function doSomething()
{
Var myControl=document.getElementById(x);
}
</script>
这种方法对于一个两个控件比较适用。不过由于必须在aspx页面中设置,不能将javascript集中起来管理了。
那么,有没有可以不进行硬编码的方法呢?本文提供了一种方法,可以使用ASP.Net现有技术实现,并且适合所有的ASP.Net framework版本。
解决方案
关键是创建一个不会被服务器端修改的客户端控件。在自定义控件上增加一个hidden input,将它设为literal server side control:
<input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='<asp:Literal Runat=server ID=ctrlPrefix></asp:Literal>'>
还要注意,这个hidden input控件需要加入到控件容器里面。因为我们后面要用它来得到控件的ID。在后台代码中对Page_Load 事件加入如下处理:
string []elm =ctrlPrefix.ClientID.Split('_'); ctrlPrefix.Text = ctrlPrefix.ClientID.Replace(elm[elm.Length - 1],"");
我们得到控件的client id,包含了控件的ID加上控件容器的ID作为前缀。第二行代码将ctrlPrefix.ClientID的后面一段去掉,得到容器的ID前缀,返回值包含了_。编译后运行这个页面,结果如下:
<input name="myControl:mytext" type="text" id="myControl_mytext" /> <input type=hidden id="ctrlPrefix" name="ctrlPrefix" value='myControl_'>
现在,hidden input中已经保存了容器的ID前缀。下面,我们用JavaScript来利用hidden input处理控件查找。
增加一个新的方法getCrtlPrefix()
//returns the container prefix as all controls have that on their ids
function getCrtlPrefix()
{
var prefix;
var objCrtlPrefix = document.getElementById("ctrlPrefix");
if (objCrtlPrefix)
prefix = objCrtlPrefix.value;
return prefix;
}
这个方法得到hidden input的值并返回,这样我们就得到了ID的前缀。第二个方法用来查询空间
function readValue(ctrlName) { var prefix = getCrtlPrefix(); var objCrtl = document.getElementById(prefix + ctrlName); if (objCrtl) alert ( "Prefix: " + prefix + " - value: " + objCrtl.value); else alert("not found!"); }
这个方法显示textbox控件的值。你会注意到,这里调用了getCtrlPrefix来计算textbox控件的ClientID。我们可以增加一个按钮来调用这个方法:
<input type=button value="Read Value" onclick="javascript:readValue('mytext')">
这个html button会调用readValue。最后,把这个javascript的js文件加入aspx中。
<script language="JavaScript" src="mycontrol.js"></script>
运行这个页面,在text box中输入写数据,然后点击按钮,会出现一个消息对话框来显示ID前缀以及text box中的数据
使用ClientID相关推荐
- 学习ID,ClientID,UniqueID
gvData里有个lbl_UserID ID 为 lbl_User ClientID 为 gvData_ctl02_lbl_UserID UniqueID 为 gvData$ctl02$lbl_Use ...
- asp.net中控件id,clientid,uniqueid的区别
id是你在代码编写时给其赋的id属性,如果没有进行赋值,系统会自动生成一个名称,如:_ctlX,X是从0开始的递增的索引,范围是0~127 uniqueid是asp.net为每一个控件生成的真正的服务 ...
- asp.net 服务器控件的 ID,ClientID,UniqueID 的区别
1.简述 ID是设计的时候自己所指定的ID,是我们分配给服务器控件的编程标识符,我们常常使用this.controlid来寻找控件,那么这个controlid就是这里所说的ID. ClientID是由 ...
- 转:UniqueID和ClientID的来源
转:http://www.cnblogs.com/GrayZhang/archive/2009/03/05/how-uniqueid-is-generated.html 在<漫话ID>一文 ...
- [转载]答《漫话ID》中的疑问:UniqueID和ClientID的来源
在<漫话ID>一文中,作者提出了一个问题:为什么在ItemCreated事件中访问ClientID会导致MyButton无法响应事件,事实上 MyButton无法响应事件是因为他在客户端的 ...
- 【转】 ID,ClientID和UniqueID
在ASP.NET 的服务器端控件中有三种关于 ID 的属性,即 ID, ClientID 和 UniqueID. ID 表示控件的服务器端编程的标识符,我们写"服务器端的代码",就 ...
- ID,ClientID,UniqueID的区别
ID是设计的时候所指定的ID. ClientID是当这个控件生成到客户端页面时候,需要在客户端访问时候用的. UniqueID是当需要参与服务端回传的时候用的. 备注:当控件是子控件的时候(例如在用户 ...
- 华为消息推送 有透传通道吗_求解在推送用透传消息-使用厂商通道(我用的是基座测试) 用手机测试出现了“clientId离线”问题...
// #ifdef APP-PLUS // uni.showModal({ // title: '提示', // content: '您的用户在其它的app登录,如果有问题,请修改密码或重新登录!', ...
- id,clientid 和 uniqueid 的区别
一. ID是设计的时候所指定的ID. ClientID是当这个控件生成到客户端页面时候,需要在客户端访问时候用的. UniqueID是当需要参与服务端回传的时候用的. 备注:当控件是子控件的时候(例如 ...
- 服务器控件的 ID, ClientID 和 UniqueID 属性
ASP.NET 的服务器端控件有三种关于 ID 的属性 ID, ClientID 和 UniqueID. ID 表示控件的服务器端编程的标识符,我们写服务器端的代码,就要用到这个 ID, 通过这个 I ...
最新文章
- 入门Python之后还是搞不定面试、做不来项目,推荐读读这本书
- 使用windbg定位内存问题【入门级】
- IDEA同时使用maven和gradle
- internetreadfile读取数据长度为0_【完结】TensorFlow2.0 快速上手手册
- utf-8是否带签名 乱码问题。
- 这不是我想要的Serverless
- jdk下没有java源码_openJDK之如何下载各个版本的openJDK源码
- LinkedIn领英官方API接口文档说明:授权代码流程
- 读书笔记《Unix编程艺术》一
- 哈希(散列)函数的一些应用
- 纪念我的小宝贝——浪浪
- 新浪微博热搜榜“背后的男人”讲述热搜背后的秘密
- 开源移动设备管理(MDM)解决方案的利与弊
- 这里告诉大家,“后端开发工程师”到底是做什么的。
- 【plang 1.4.4】编写贪吃蛇脚本
- android 经纬度工具类,计算经纬度距离工具类
- 使用java解析Infor XA ERP SystemLink请求响应报文
- 桌面图标黑色解决方案
- 原来系统还能这样重装!看这里,教您一键重装win10系统
- Python爬虫实战(四) :下载煎蛋网所有妹子照片
热门文章
- 美国服务器Linux和Ubuntu的区别
- Windows权限设置
- div+css 制作表格
- 手机 android 系统 升级失败,谷歌再次放出大招!让安卓11系统从此不再变砖:强制无缝升级系统...
- postgres oracle 兼容,PostgreSQL嵌套表(兼容oracle)
- 免费的瑞星2008杀毒软件!
- Juniper认证介绍
- HQL语法与详细解释[整理]
- php java优劣_PHP开发和JAVA开发网站的优劣对比
- android版本 6手机版下载,granboard安卓版下载-GranBoard 安卓版v6.1.2-PC6安卓网