用控制項的方式解決問題-在用戶端關聯WEB控制項引用

來源:互聯網
上載者:User
如果剛從ASP過渡到ASPX的程式員,大都會抱怨ASPX產生的用戶端元素的ID,太長了!如果要在用戶端指令碼中使用,如利用:

以下為引用的內容:
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>

注意一下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 這種方式,訪問,也挺爽吧?

請作者聯絡本站,及時附註您的姓名,聯絡郵箱:Post@chinaz.com。



相關文章

Cloud Intelligence Leading the Digital Future

Alibaba Cloud ACtivate Online Conference, Nov. 20th & 21st, 2019 (UTC+08)

Register Now >

11.11 Big Sale for Cloud

Get Unbeatable Offers with up to 90% Off,Oct.24-Nov.13 (UTC+8)

Get It Now >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。