加载中…
个人资料
小蚂蚁
小蚂蚁
  • 博客等级:
  • 博客积分:0
  • 博客访问:9,614
  • 关注人气:5
  • 获赠金笔:0支
  • 赠出金笔:0支
  • 荣誉徽章:
正文 字体大小:

ASP.Net中如何使用ClientID

(2009-03-27 12:07:53)
标签:

it

分类: ASP.NET

介绍
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.getElementByIdx(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.getElementByIdx("ctrlPrefix");
             

           if (objCrtlPrefix)

                 prefix = objCrtlPrefix.value;                 

           return prefix;
}

这个方法得到hidden input的值并返回,这样我们就得到了ID的前缀。第二个方法用来查询空间

function readValue(ctrlName)
      
var prefix = getCrtlPrefix();           
var        objCrtl = document.getElementByIdx(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也是可以实现的.不过还是有些麻烦,呵呵~


使用 ClientScriptManager 类可以将ClientID注册为JS数组,可以在JS中直接使用:
string asc = "FavoriteFolks";
            string ascValues = """ + btnInfo.ClientID.Replace("_", "$") + ""," + """ + btnClose.ClientID.Replace("_", "$") + """;
            ClientScriptManager cs = Page.ClientScript;
            cs.RegisterArrayDeclaration(asc, ascValues);
可以在JS中直接使用FavoriteFolks数组,例如:alert(FavoriteFolks[0])可以输出btnInfo的页面ID
由此再来引申一下,ClientScriptManager也可以结合 RegisterHiddenField来使用,也可以用上文提到的hidden input。asp.net 2.0给我们提供了一个功能强大的ClientScriptManager 类,要多加学习和使用。Replace("_", "$")也可以不要,不要的情况下是ID值,要的情况下NAME值.取NAME的话可以用UniqueID
在JavaScript中可以用下面的办法利用ID值(NAME值):

document.getElementByIdx(control1).value   其中control1为数组值,例如上面的FavoriteFolks[0]


0

阅读 收藏 喜欢 打印举报/Report
  

新浪BLOG意见反馈留言板 欢迎批评指正

新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 产品答疑

新浪公司 版权所有