母版頁中對控制項ID的處理

本篇技巧和訣竅記錄的是：母版頁中對控制項id的處理。

一、問題提出

由於總體排版和設計的需要，我們往往建立母版頁來實現整個**的統一性，最近我由於統一性的需要，把原來整個專案單獨的頁面全部套用了母版頁。但是出現了乙個錯誤……在我的blog中記錄一下，方便大家參考。

二、抽象模型

由於整個頁面內容過多，所以我把這個頁面中最為本質的問題抽象出來。原來單一頁面，就是利用按鈕觸發js事件，在文字域中插入「(_)」功能，其實現**如下：

上述頁面可以正常使用。後來使用模板頁後，其**如下：

當開啟後按下按鈕出現了「microsoft jscript 執行時錯誤: 'document.getelementbyid(...)' 為空或不是物件」。這是什麼原因呢？原來好好的，怎麼套用個母版頁就出現這個奇怪的問題呢？困擾了好久，和朋友討論了一下，終於找到了答案……

三、分析本質

原來我們仔細看看其生成的html**：單一頁面：

再看看套用母版頁之後，生成的html**：

是不是看到問題了，原始檔控制項元素的id和生成html檔案的id不一致。表單from的name屬性和id屬性變成了aspnetform，控制項的id屬性被無緣無故了加上了ctl00_contentplaceholder1_字首，其name屬性也加上了ctl00$contentplaceholder1$字首。

這下知道了，難怪提示「'document.getelementbyid(...)' 為空或不是物件」的錯誤了，原來生成頁面後其id都變了。那麼我們如何解決它呢？既然他id變了，我們就把js**id改為生成後的id。**如下：

function insert()

//或者

function insert() 好了，問題解決了，不過想想有什麼更好的辦法呢？到底為什麼呢？其實分析一下，它是後來生成的客戶端id，我們可以用c#語句control的clientid屬性，像這樣寫：txt.clientid; txt還是原來控制項的id，後面的clientid就是新生成的id。txt.clientid是從程式裡取到的後來生成新的id，這樣不是更好嗎。修改**如下：

function insert() 還有在後台request.form["txt"]鍵值需要改變，必須變為request.form["<%=txt.clientid %>"]才能接收到頁面的值。想想如果想要得到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("<%=控制項名id.clientid%>"); //推薦在我們設計時往往就會出現一些莫名其妙的問題，我想我們遇到問題時，冷靜思考，把握主次，從底層框架入手，糾其原因，相信最終會找到答案。

母版頁中對控制項ID的處理

母版頁中對控制項ID的處理

巢狀母版頁中的控制項訪問

巢狀母版頁中的控制項訪問

母版頁中對控制項ID的處理

母版頁中對控制項ID的處理

巢狀母版頁中的控制項訪問

巢狀母版頁中的控制項訪問

相關推薦