JavaScript調用用戶控件中的子控件(此方法僅限於Inline的JavaScript)

(此方法僅限於Inline的JavaScript)

asp.net提供一種很好的模塊級的複用技術――用戶控件,大大方便了web網站的建設,提高了效率。用戶控件使用多了,碰到的問題也會增多。最近遇到一個問題,就是如果在一個用戶控件中要使用到客戶端腳本,而這個客戶端的腳本又要訪問到控件中包含的控件,問題就出現了。問題是當一個用戶控件被包含到一個aspx頁面後,呈現到用戶客戶端後,整個用戶控件中的控件的名稱將會有所變化,它們不再是你設計這個用戶控件時的名稱,而是有兩個相關的名稱:

id ―― 客戶端可以通過這個id訪問這個客戶端控件,asp.net給每個控件輸出的id形式爲“用戶控件id_此控件的id”,如果是用戶控件嵌套的情況,形式爲“頂層用戶控件id_下層用戶控件id_此控件的id

name ―― 客戶端也可以通過這個name來訪問這個客戶端控件,asp.net給每個控件輸出的name“用戶控件id:此控件的id”,如果是用戶控件嵌套的情況,形式爲“頂層用戶控件id:下層用戶控件id:此控件的id”。

 

例子: 

在設計用戶控件時,放置了一個TextBoxidTexBox1,這個用戶控件被放置到一個aspx頁面,用戶控件的idWebUserControl11,最後這個用戶控件的TextBox到客戶端後就是上面的這個樣子的了。

 

客戶端提交到服務端時是根據控件的name來提交的,也就是說,對服務端來講,客戶端的name是有意義的,id是不需要的。

在寫客戶端腳本時你不能預知你的用戶控件將會是以什麼id加入到aspx頁面的,也不能預知用戶控件被嵌套了多少層,所以你根本不能在設計時來參考這些控件。

幸好,asp.netwebcontrol  htmlcontrol 的控件有個運行時屬性 UniqueID,用來獲取服務器控件的唯一的、以分層形式限定的標識符。對應到上面的那個例子,控件TextBox1UniqueID就是“WebUserControl11:TextBox1”,跟生成的客戶端的控件的name相一致。

所以我們可以用控件的UniqueID來獲得運行時客戶端的name,也就能通過這個name來控制客戶端控件了。

OK,按照這個思路來設計個客戶端腳本:

用戶控件很簡單,就放置一個TextBox,我們再給這個TextBox設置一個鼠標經過事件來觸犯客戶端的腳本,給TextBox賦一個值,代碼如下:

 

 

把鼠標移到TextBox時,又報一個腳本錯誤:“缺少對象將這個用戶控件拖放到一個aspx頁面中,編譯瀏覽這個頁面,報一個腳本錯誤:缺少‘;’

 

檢查發現,客戶端引用的標示不能含有”:”符號,就是說在客戶端不能用控件的name來參考。asp.netwebcontrol  htmlcontrol 的控件還有個運行時屬性 ClientID,它用來獲取由 ASP.NET 生成的服務器控件標識符,也就是來獲取控件的客戶端id的,我們再改用這個屬性來試一下:

 

document.all.<%= TextBox1.ClientID %>.value = "kent";

 

再運行,OK成功,當鼠標移動TextBox時,TextBox中出現了“kent”。

 

切記切記! 用戶控件裏面的子控件,一定要有Name屬性!

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章