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

ASP
ASP正则表达式技巧
ASP Access实现网站计数器（访问量）
ASP新闻分页，将一篇过长的文章分页，生成静态页面
一些关于asp 购物车的想法
一个sql查询器，自动画表格填字段
ASP实现文件直接下载的代码
把网页中的(电话，qq等数字)生成图片的ASP程序
asp长文章用分页符来分页显示
Asp函数介紹(37个常用函数)
ASP中的面向对象类
分页实现方法的性能比较
asp ajax跨域提交数据
asp修改文件和文件夹的名字的代码
ASP 多关键词查询实例代码
asp被杀毒软件误删的解决方法
asp 多关键词搜索的简单实现方法
asp 根据IP地址自动判断转向分站的代码
asp dictionary对象的用法
ASP 千万级数据分页的存储过程
ASP隐藏真实文件的下载功能实现代码

No. « 80 81 82 83 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2009-08-14   浏览: 109 ::
收藏到网摘: 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 这种方式,访问,也挺爽吧？