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

ASP
ASP 3.0高级编程（二十七）
ASP 3.0高级编程（二十八）
ASP 3.0高级编程（二十九）
ASP 3.0高级编程（三十）
ASP中时间函数的使用(一)
ASP中时间函数的使用(二)
ASP中时间函数的使用(三)
.NET之ASP WebApplication快速入门(1)
.NET之ASP WebApplication快速入门(2)
.NET之ASP WebApplication快速入门(3)
.NET之ASP WebApplication快速入门(4)
.NET之ASP WebApplication快速入门(5)
asp.NET特写
ASP 3.0高级编程（七）
ASP 3.0高级编程（八）
ASP.NET 入门的五个步骤
ASP 组件指南
XML 数据的编码方式
ASP 3.0高级编程（九）
ASP 3.0高级编程（十）

No. « 147 148 149 150 »

技术文章搜索

关键字

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

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