解析ASP.NET 2.0創建母版頁引來的麻煩(2)_.Net教程
推薦：解讀ASP.NET 2.0跨網頁提交的三種方法當在一個ASP.NET Web頁面中進行操作時，在默認情況下向當前頁進行提交。這種行為在ASP.NET出現之前并沒有什么關系，但在ASP.NET中，當我們想向另外一個Web頁提交一個Web Form時該如何做呢?在ASP.NET1.0中這個問題變得很難解決，但在ASP.NET 2.0中為開發人員
再看看套用母版頁之后，生成的HTML代碼：
以下是引用片段：
|
以下為引用的內容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head><title>使用母版頁面抽象模型－YJingLee</title></head> <body> <form name="aspnetForm" method="post" action="Default2.aspx" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKLTEwMTY2NjE0OWRkADUETiohcorj2qXOE9M1qhFVw20=" /> </div> <div> <script language="javascript" type="text/javascript"> // <!CDATA[ function insert() { document.getElementById("txt").value=document.getElementById("txt").value "(__)";return; } // ]]> </script> <div> <textarea name="ctl00$ContentPlaceHolder1$txt" id="ctl00_ContentPlaceHolder1_txt" rows="10" cols="50"></textarea> <input type="submit" name="ctl00$ContentPlaceHolder1$btnInsert" value="服務器端插入(_)" onclick="insert();" id="ctl00_ContentPlaceHolder1_btnInsert" /> <input name="ctl00$ContentPlaceHolder1$btnInsert2" type="button" id="ctl00_ContentPlaceHolder1_btnInsert2" onclick="insert();" value="客戶端插入(_)" /></div> </div> <div> <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBAKyga4JAtO59ZELApOT2tEDApOTwvAC83bfMO00kt0PYcRte7XQOsXBcFE=" /> </div></form> </body> </html> |
是不是看到問題了，源文件控件元素的ID和生成HTML文件的ID不一致。表單from的name屬性和id屬性變成了aspnetForm，控件的id屬性被無緣無故了加上了ctl00_ContentPlaceHolder1_前綴，其name屬性也加上了ctl00$ContentPlaceHolder1$前綴。
這下知道了，難怪提示“'document.getElementById(...)' 為空或不是對象”的錯誤了，原來生成頁面后其ID都變了。
那么我們如何解決它呢?既然他id變了，我們就把JS代碼id改為生成后的id。代碼如下：
以下是引用片段：
| 以下為引用的內容： function insert() { document.getElementById("ctl00$ContentPlaceHolder1$txt").value=document.getElementById("ctl00$ContentPlaceHolder1$txt").value "(__)"; return; } //或者 function insert() { document.getElementById("ctl00_ContentPlaceHolder1_txt").value=document.getElementById("ctl00_ContentPlaceHolder1_txt").value "(__)"; return; } |
好了，問題解決了，不過想想有什么更好的辦法呢?到底為什么呢?
其實分析一下，它是后來生成的客戶端id，我們可以用C#語句Control的ClientID屬性，像這樣寫：txt.ClientID; txt還是原來控件的id，后面的ClientID就是新生成的id。txt.ClientID是從程序里取到的后來生成新的id，這樣不是更好嗎。修改代碼如下：
以下是引用片段：
| 以下為引用的內容： function insert() { document.getElementById("").value=document.getElementById("").value "(__)"; return; } |
還有在后臺Request.Form["txt"]鍵值需要改變，必須變為Request.Form[""]才能接收到頁面的值。想想如果想要得到ID的control是一個用戶控件的話，當生成頁面后盡管能得到其ClientID，但是卻得不到這個對象，所以也就不能設置或獲得其屬性了。比如，我要做的這個用戶控件，由三個DropDownList組成，可是我卻想得到一個完整的日期值(指在客戶端)，一種思路是先獲得三個DropDownList的ClientID，然后再由ID1.value ID2.value ID3.value取得，可是如果你一個頁面上需要放多個這樣的用戶控件的話，你需要取得多少個ClientID?顯然這樣做的話，工作量會很大，而且要操作眾多的對象，很容易出錯。
四、總結
這一類問題我像在我們編寫程序時往往經常會遇到，總結一下：這應該屬于“使用了MasterPage，或者GridView中的模版列后所有元素ID不一致問題”。由于種種原因(比如使用了MasterPage，或者GridView中的模版列)，一個控件在設計時的ID往往不同于生成頁面后的ID，為了獲得控件客戶端ID，我們可以從生成的頁面入手，取控件id有以下三種修改方法：(當然我還是推薦第三種)
以下是引用片段：
| 以下為引用的內容： document.getElementById("ctl00$編輯區ID$控件ID"); document.getElementById("ctl00_編輯區ID_控件ID"); document.getElementById(""); |
至于為什么，是自己還沒有深刻理解其中的根源還是.NET機制問題呢?
在我們設計時往往就會出現一些莫名其妙的問題，我想我們遇到問題時，冷靜思考，把握主次，從底層框架入手，糾其原因，相信最終會找到答案。
分享：揭秘設計ASP.NET應用程序的七大妙招隨著微軟.NET的流行，ASP.NET越來越為廣大開發人員所接受。作為ASP.NET的開發人員，我們不僅需要掌握其基本的原理，更要多多實踐，從實踐中獲取真正的開發本領。在我們的實際開發中，往往基本的原理滿足不了開發需求，我們更多的要積累一些開發技巧，本文就
- asp.net如何得到GRIDVIEW中某行某列值的方法
- .net SMTP發送Email實例(可帶附件)
- js實現廣告漂浮效果的小例子
- asp.net Repeater 數據綁定的具體實現
- Asp.Net 無刷新文件上傳并顯示進度條的實現方法及思路
- Asp.net獲取客戶端IP常見代碼存在的偽造IP問題探討
- VS2010 水晶報表的使用方法
- ASP.NET中操作SQL數據庫(連接字符串的配置及獲取)
- asp.net頁面傳值測試實例代碼
- DataGridView - DataGridViewCheckBoxCell的使用介紹
- asp.net中javascript的引用(直接引入和間接引入)
- 三層+存儲過程實現分頁示例代碼
- 相關鏈接：
- 教程說明：
.Net教程-解析ASP.NET 2.0創建母版頁引來的麻煩(2)
。