当前位置: 首页 > 图文教程 > 网络编程 > ASP > 用控件的方式解决问题-在客户端关联WEB控件引用

ASP
ASP连接SQL2005数据库连接代码
ASP程序与SQL存储过程结合使用详解
asp 小偷采集程序原理与常用函数方法
防盗链接ASP函数
asp将table生成excel文件(xls)
asp实现新评论自动发短信提示的代码
asp最简单的生成验证码代码
ASP 常见对象总结(熟悉一下利用以后的开发使用)
ASP UTF-8编码生成静态网页的函数
ASP+FSO生成的网页文件默认编码格式以及转换成UTF-8编码方法
asp Access数据备份,还原,压缩类代码
asp fso操作类
ASP 自动采集实现代码
asp 一些支付接口
ASP 递归调用 已知节点查找根节点的函数
用asp实现读取文件的最后一行的代码
用asp实现的获取文件夹中文件的个数的代码
ASP与Excel结合生成数据表和Chart图的代码
iis7 ASP+Access数据库连接错误
ASP 日期的加减运算实现代码

No. « 220 221 222 223 »

技术文章搜索

关键字

ASP 中的 用控件的方式解决问题-在客户端关联WEB控件引用

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 212 ::
收藏到网摘: n/a

如果刚从ASP过渡到ASPX的程序员，大都会抱怨ASPX生成的客户端元素的ID，太长了！如果要在客户端脚本中使用,如利用：

这一类的方式来引用，非常不方便。

 
想像一下，你想生成如上的界面，然后在鼠标在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>

注意一下cc1:WebControlLinker 的WebControlFirst="Button1" WebControlSecond="TextBox1"  我们设置了两关联的控件.

    它们会在页面输出时，生成下面的代码：
页面呈现：

以下为引用的内容：<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>

有了上面的东西，,我们要执行的脚本就可以简单的写成这样：
以下为引用的内容：
<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 这种方式,访问,也挺爽吧？