用控件的方式解决问题-在客户端关联WEB控件引用
width="250" scrolling="no" height="250" frameborder="0" marginwidth="0" marginheight="0" hspace="0" vspace="0" src="http://info.jobems.com/googleAD250250.htm"> |
document.getElementById('Repeater1_ctl00_Button1')
这一类的方式来引用,非常不方便.
想像一下,你想生成如上的界面,然后在鼠标在Button上mousemove时,改变其前面对应的文本框中的文字,格式为: 'hello world ' + 该Button的ID + '--' + new Date().valueOf()
先不要管,这个有什么用,在什么地方用, 首先, 你如何实现呢?
我的实现方法就是如标题所言,用服务器控件来对付它们,只要我们来选择一个合适的思路:假设我们有一个服务器控件,通过给控件指定两个相关联的控件(这里就是Buton和TextBox),我们在客户端为这两个控件,分别设置自定义的属性来直接指向另一个控件.
如果有了另一个控件的引用,我们就可以在button的实例中,直接得到相关联的TextBox的引用,而绕开getElementById().
先看一下该服务端控件的使用:
< div >
< asp:Repeater ID ="Repeater1" runat ="server" >
< ItemTemplate >
< asp:TextBox ID ="TextBox1" runat ="server" Width ="445px" ></ asp:TextBox >
< asp:Button ID ="Button1" runat ="server" Text ="Button" onmousemove ="return button_onmousemove(this,event)" />
< cc1:WebControlLinker ID ="WebControlLinker1" runat ="server" WebControlFirst ="Button1" WebControlSecond ="TextBox1" />
</ ItemTemplate >
</ asp:Repeater >
</ div >
它们会在页面输出时,生成下面的代码:
页面呈现:
<
div
>
< input name ="Repeater1$ctl00$TextBox1" type ="text" id ="Repeater1_ctl00_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl00$Button1" value ="Button" id ="Repeater1_ctl00_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl00_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl01$TextBox1" type ="text" id ="Repeater1_ctl01_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl01$Button1" value ="Button" id ="Repeater1_ctl01_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl01_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl02$TextBox1" type ="text" id ="Repeater1_ctl02_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl02$Button1" value ="Button" id ="Repeater1_ctl02_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl02_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl03$TextBox1" type ="text" id ="Repeater1_ctl03_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl03$Button1" value ="Button" id ="Repeater1_ctl03_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl03_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl04$TextBox1" type ="text" id ="Repeater1_ctl04_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl04$Button1" value ="Button" id ="Repeater1_ctl04_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl04_WebControlLinker1" ></ span >
</ div >
< input name ="Repeater1$ctl00$TextBox1" type ="text" id ="Repeater1_ctl00_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl00$Button1" value ="Button" id ="Repeater1_ctl00_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl00_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl01$TextBox1" type ="text" id ="Repeater1_ctl01_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl01$Button1" value ="Button" id ="Repeater1_ctl01_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl01_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl02$TextBox1" type ="text" id ="Repeater1_ctl02_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl02$Button1" value ="Button" id ="Repeater1_ctl02_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl02_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl03$TextBox1" type ="text" id ="Repeater1_ctl03_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl03$Button1" value ="Button" id ="Repeater1_ctl03_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl03_WebControlLinker1" ></ span >
< input name ="Repeater1$ctl04$TextBox1" type ="text" id ="Repeater1_ctl04_TextBox1" style ="width:445px;" />
< input type ="submit" name ="Repeater1$ctl04$Button1" value ="Button" id ="Repeater1_ctl04_Button1" onmousemove ="return button_onmousemove(this,event)" />
< span id ="Repeater1_ctl04_WebControlLinker1" ></ span >
</ div >
<
script
type
="text/javascript"
>
<!--
document.getElementById('Repeater1_ctl00_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl00_TextBox1'));
document.getElementById('Repeater1_ctl00_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl00_Button1'));
document.getElementById('Repeater1_ctl01_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl01_TextBox1'));
document.getElementById('Repeater1_ctl01_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl01_Button1'));
document.getElementById('Repeater1_ctl02_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl02_TextBox1'));
document.getElementById('Repeater1_ctl02_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl02_Button1'));
document.getElementById('Repeater1_ctl03_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl03_TextBox1'));
document.getElementById('Repeater1_ctl03_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl03_Button1'));
document.getElementById('Repeater1_ctl04_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl04_TextBox1'));
document.getElementById('Repeater1_ctl04_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl04_Button1'));
// -->
</ script >
有了上面的东西,我们要执行的脚本就可以简单的写成这样:
<!--
document.getElementById('Repeater1_ctl00_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl00_TextBox1'));
document.getElementById('Repeater1_ctl00_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl00_Button1'));
document.getElementById('Repeater1_ctl01_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl01_TextBox1'));
document.getElementById('Repeater1_ctl01_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl01_Button1'));
document.getElementById('Repeater1_ctl02_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl02_TextBox1'));
document.getElementById('Repeater1_ctl02_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl02_Button1'));
document.getElementById('Repeater1_ctl03_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl03_TextBox1'));
document.getElementById('Repeater1_ctl03_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl03_Button1'));
document.getElementById('Repeater1_ctl04_Button1').setAttribute('TextBox1',document.getElementById('Repeater1_ctl04_TextBox1'));
document.getElementById('Repeater1_ctl04_TextBox1').setAttribute('Button1',document.getElementById('Repeater1_ctl04_Button1'));
// -->
</ script >
<
head
><
title
>
Untitled Page
</ title >
< script type ="text/javascript" >
function button_onmousemove(obj,e)
{
obj.TextBox1.value = "hello world " + obj.TextBox1.Button1.id + '--' + new Date().valueOf();;
}
</ script >
</ head >
obj.TextBox1.value 这种方式,访问,也挺爽吧?Untitled Page
</ title >
< script type ="text/javascript" >
function button_onmousemove(obj,e)
{
obj.TextBox1.value = "hello world " + obj.TextBox1.Button1.id + '--' + new Date().valueOf();;
}
</ script >
</ head >
附上求例下载:
WebControlLinker-demo.rar