因為使用母版頁而帶來的麻煩

2021-06-03 02:37:12 字數 2393 閱讀 6879

本文將為大家介紹一下 asp.net 2.0 在建立母版頁時引來的麻煩,並分析了問題產生的實質,大家在實際操作中多多注意一下。

一、問題提出

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

二、 抽象模型

由於整個頁面內容過多,所以我把這個頁面中最為本質的問題抽象出來。

原來單一頁面,就是利用按鈕觸發js事件,在文字域中插入「(_)」功能,其實現**如下:

以下是引用片段:

<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" %>

">

" >

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

以下是引用片段:

<%@ page language="c#" masterpagefile="~/masterpage.master" autoeventwireup="true" codefile="default2.aspx.cs" inherits="default2" title="使用母版頁面抽象模型-yjinglee" %>

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

三、分析本質

原來我們仔細看看其生成的html**:

單一頁面:

以下是引用片段:

">

" >

再看看套用母版頁之後,生成的html**:

以下是引用片段:

">

" >

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

這下知道了,難怪提示「'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[""]才能接收到頁面的值。想想如果想要得到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機制問題呢?

在我們設計時往往就會出現一些莫名其妙的問題,我想我們遇到問題時,冷靜思考,把握主次,從底層框架入手,糾其原因,相信最終會找到答案。

母版頁使用練習

css樣式表 body header logo left right footer 母版頁 master xlanguage c autoeventwireup true codefile masterpage.master.cs inherits masterpage 內容頁 page title...

django母版頁的使用

母版頁用於處理html頁面相同部分內容,避免在不同的頁面中重複出現 1 新增母版頁 再manage.py檔案相同目錄下新增templates資料夾用於儲存母版頁html檔案 2 新增母版頁base.html,html如下 doctype html html lang en xmlns head me...

巢狀母版頁

寫在前面的話 對於乙個專案來說,我們可能會用到許多的母版頁 內容頁的組合.那麼當我們使用到多個母版頁時,我們可能會遇到這樣的問題.在不同的母版頁內載入相同的js和css內容.如果乙個js或css檔案在專案中的位置發生了變化,我們就要修改多個母版頁的js和css的link.對此,我們或許可以使用巢狀母...