用控件的方式解决问题-在客户端关联服务器端WEB控件引用
来源:互联网 发布:sql语句执行计划分析 编辑:程序博客网 时间:2024/05/19 03:17
用控件的方式解决问题-在客户端关联WEB控件引用
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
- 用控件的方式解决问题-在客户端关联服务器端WEB控件引用
- 自定义ajax验证控件-客户端引用服务器端的验证
- 服务器端控件与客户端控件的区别
- 用服务器端控件给客户端控件赋值
- 服务器端Web控件与客户端Html控件交互(转)
- 客户端服务器端控件间的交互
- 客户端的服务器端控件取值问题
- 服务器端获取客户端的html标签控件
- Reapter 中客户端控件和服务器端控件的选择
- 在服务器端遍历服务器端控件
- 让服务器端的Panel 在客户端动态地显示在某个控件的下面
- 在WEB下的客户端控件的开发应用
- [转]在WEB下的客户端控件的开发应用
- 服务器端控件使用客户端脚本
- 服务器端控件使用客户端脚本
- 在asp.net服务器控件中响应客户端与服务器端事件的例子
- 如何编写JavaScript脚本,在客户端获取或变更服务器端控件的值及ID
- .net中如何在服务器端获取客户端的html标签控件。
- Linux C 函数参考之字符测试篇
- [转]prototype.js 1.4版开发者手册
- abt adpcm encorder(from msdn)
- Flex的一问一答
- 其极震惊,今天我看见有人在修鞋
- 用控件的方式解决问题-在客户端关联服务器端WEB控件引用
- Apache的FileUpload组件
- Linux C 函数参考之字符串转换篇
- 主动性阅读书/源码
- ContentType类型大全
- 最近两个月
- Linux 查看磁盘分区、文件系统、磁盘的使用情况相关的命令和工具介绍
- Linux C 函数参考之内存控制篇
- static的作用