解析ASP.NET 2.0創(chuàng)建母版頁引來的麻煩(2)_.Net教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

推薦：解讀ASP.NET 2.0跨網(wǎng)頁提交的三種方法
當(dāng)在一個(gè)ASP.NET Web頁面中進(jìn)行操作時(shí)，在默認(rèn)情況下向當(dāng)前頁進(jìn)行提交。這種行為在ASP.NET出現(xiàn)之前并沒有什么關(guān)系，但在ASP.NET中，當(dāng)我們想向另外一個(gè)Web頁提交一個(gè)Web Form時(shí)該如何做呢?在ASP.NET1.0中這個(gè)問題變得很難解決，但在ASP.NET 2.0中為開發(fā)人員

再看看套用母版頁之后，生成的HTML代碼：

以下是引用片段：

以下為引用的內(nèi)容：

<!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="服務(wù)器端插入(_)" 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(...)' 為空或不是對象”的錯(cuò)誤了，原來生成頁面后其ID都變了。

那么我們?nèi)绾谓鉀Q它呢?既然他id變了，我們就把JS代碼id改為生成后的id。代碼如下：

以下是引用片段：

以下為引用的內(nèi)容：
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; }

好了，問題解決了，不過想想有什么更好的辦法呢?到底為什么呢?

其實(shí)分析一下，它是后來生成的客戶端id，我們可以用C#語句Control的ClientID屬性，像這樣寫：txt.ClientID; txt還是原來控件的id，后面的ClientID就是新生成的id。txt.ClientID是從程序里取到的后來生成新的id，這樣不是更好嗎。修改代碼如下：

以下是引用片段：

以下為引用的內(nèi)容：

function insert() { document.getElementById("").value=document.getElementById("").value "(__)"; return; }

還有在后臺Request.Form["txt"]鍵值需要改變，必須變?yōu)镽equest.Form[""]才能接收到頁面的值。想想如果想要得到ID的control是一個(gè)用戶控件的話，當(dāng)生成頁面后盡管能得到其ClientID，但是卻得不到這個(gè)對象，所以也就不能設(shè)置或獲得其屬性了。比如，我要做的這個(gè)用戶控件，由三個(gè)DropDownList組成，可是我卻想得到一個(gè)完整的日期值(指在客戶端)，一種思路是先獲得三個(gè)DropDownList的ClientID，然后再由ID1.value ID2.value ID3.value取得，可是如果你一個(gè)頁面上需要放多個(gè)這樣的用戶控件的話，你需要取得多少個(gè)ClientID?顯然這樣做的話，工作量會很大，而且要操作眾多的對象，很容易出錯(cuò)。

四、總結(jié)

這一類問題我像在我們編寫程序時(shí)往往經(jīng)常會遇到，總結(jié)一下：這應(yīng)該屬于“使用了MasterPage，或者GridView中的模版列后所有元素ID不一致問題”。由于種種原因(比如使用了MasterPage，或者GridView中的模版列)，一個(gè)控件在設(shè)計(jì)時(shí)的ID往往不同于生成頁面后的ID，為了獲得控件客戶端ID，我們可以從生成的頁面入手，取控件id有以下三種修改方法：(當(dāng)然我還是推薦第三種)

以下是引用片段：

以下為引用的內(nèi)容：
document.getElementById("ctl00$編輯區(qū)ID$控件ID"); document.getElementById("ctl00_編輯區(qū)ID_控件ID"); document.getElementById("");

至于為什么，是自己還沒有深刻理解其中的根源還是.NET機(jī)制問題呢?

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

分享：揭秘設(shè)計(jì)ASP.NET應(yīng)用程序的七大妙招
隨著微軟.NET的流行，ASP.NET越來越為廣大開發(fā)人員所接受。作為ASP.NET的開發(fā)人員，我們不僅需要掌握其基本的原理，更要多多實(shí)踐，從實(shí)踐中獲取真正的開發(fā)本領(lǐng)。在我們的實(shí)際開發(fā)中，往往基本的原理滿足不了開發(fā)需求，我們更多的要積累一些開發(fā)技巧，本文就