技巧一:在客戶端的Javascript腳本中獲取服務器端控件的值
以前,當我們需要在腳本裡訪問頁面內一個對象的時候,一般都是通過對象的id或name。就像這樣——
// ...
現在,ASP.Net讓我們越來越習慣使用TextBox作為用戶輸入的途徑。如果我們想在客戶端腳本裡訪問一個TextBox,原先的做法就行不通了——
// ...
浏覽頁面時,會有一個腳本錯誤——“Text1對象不存在”。原因就在於,Text1作為服務器端控件TextBox,在被發送到客戶端之前,先由.Net Framework進行轉換,而它的id顯然也是轉換的一部分。如果你在客戶端查看頁面的源代碼,你可以發現原先的Text1已經不存在,取而代之的是一個普通的INPUT——
這就是轉換的結果,id不再是設計時所指定的id。如果我們要在客戶端訪問這個文本輸入框,也必須改變訪問的id。如何改變?直接將
document.form1.Text1
改為
document.form1.item("Test_Text1") // 保險起見,使用item由id或name得到控件
或者
document.getElementByID("Test_Text1") // 保險起見,使用getElementByID由id或name得到控件
可以嗎?當然可以!只要你的控件id固定是"Text1"。
但是,只有這個條件還不夠。"Test"又是什麼?它也應該被考慮在內(幸好form的id不會改變,否則要關心的內容又會多一個)。
你或許已經看出,Test就是這個Web頁面的名字。對嗎?——不完全對:P
確切地說,控件轉換後id中的"Test"是其所在的Web窗體對象的ClIEntID。所有的ASP.Net對象都在服務器端有一個實例(如果你面向對象的基礎不夠,建議也補完一次吧),而這個"Test",就是這個頁面實例對象的ClientID。而ClIEntID,則是每個Web窗體頁的一個屬性,它指明了這個Web窗體在客戶端的標識。
為什麼要這麼復雜?道理很簡單,我們並不能在客戶端腳本裡確定頁面的ClIEntID和控件的ID。
那應該怎樣做呢?
“在服務器端代碼裡生成客戶端Javascript。”——似乎非常復雜,其實並不困難,只要在服務器端Page_Load事件裡加上(在IsPostBack判斷之外)——
RegisterStartupScript("start",
"\n \n");
RegisterStartupScript是Web窗體(System.Web.UI.Page類)的一個方法,作用是在生成的頁面裡注冊客戶端腳本。
在這裡,我們添加了一個getText()函數,作用和之前的getText()一樣,所不同的在於,它所訪問的控件id並非腳本內指定,而是在服務器端根據頁面的ClientID(this.ClIEntID,this就是頁面自己)和Text1控件的ID(this.Text1.ID)動態生成的。
編譯之後重新浏覽,我們會在新的頁面源代碼裡找到這個由服務器端代碼生成的Javascript函數。此時,在頁面的其他地方調用getText()函數就將正確得到Text1中的內容了。