在實現某個功能的時候,發現了一個奇怪的問題:單頁面應用js沒有問題,但是如果應用masterpage,在套用外部js檔案時,根據設定的id得到的對象始終為NULL:
*******************************引用一段文字說明 問題所在*******************************
ASP.Net 提供了代碼和頁面分離的機制,在大多數情況下,這種機制工作得非常好。但是,如果需要使用用戶端java指令碼來做些工作,你就會遇到麻煩了。問題出在你在設計階段為server端控制項設定的ID值和頁面運行時控制項實際的ID值不一致。例如,建立一個Web site,增加一個 aspx page,在頁面上加入一個text box控制項:
<asp:TextBox ID="mytext" Runat=server></asp:TextBox>
運行這個頁面,從View source中會看到運行時的結果:
<Input name="mytext" type="text" id="mytext" />
這時我們看到設計階段的ID值和運行時控制項的ID值是一樣的,沒有問題,這是因為這是一個單純的aspx頁面。如果在頁面中包含一個使用者自訂的web control或使用了master pages (ASP.NET 2.0),情況就不樂觀了。我們增加一個新的user control名為mycontrol.ascx. 在mycontrol.ascx中加入同樣的text box。再把這個自訂控制項加入到一個aspx 頁面, 將此控制項的ID設定為myControl. 在瀏覽器中運行這個頁面,得到的html是這樣的:
<Input name="myControl:mytext" type="text" id="myControl_mytext" />
text box控制項的設計階段ID= mytext,但運行時得到的ID=myControl_mytext。也就是在原來的ID前面增加了包含text box控制項的容器myControl的ID。在使用master pages時,所有的aspx 頁面都是被包含在一個容器中的, 而且還常常會有容器的嵌套。如果在用戶端使用JavaScript去按照ID尋找控制項就會失敗
*******************************************************************************************
通常這個時候,就要利用控制項的ClientID屬性來獲得運行時ID:
1.在Masterpage的header部分加入對外部js檔案的參考,那麼所有應用此模板的頁面都可以應用這個js檔案
<script src ="JScript.js" language ="javascript" type ="text/javascript" ></script>
2.JS檔案定義:
function showTip(id,oevent,address)
...{
var div=document.getElementById(id);
var result=DbOp.getDetail(address).value;
var arrs=result.split(",");
var show="The ID IS :"+arrs[0]+"<br>"+"The name IS :"+arrs[1];
div.innerHTML=show;
div.style.visibility="visible";
div.style.left=oevent.clientX+5;
div.style.top=oevent.clientY+5;
}
function hidTip(id,oevent)
...{
var div=document.getElementById(id);
div.style.visibility="hidden";
}
3。子頁面:<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<div id="divshow" runat ="server" >
</div>
<div id="div2" runat ="server" style =" border :solid 1px red; background :#f0f0f0; visibility :hidden ; position :absolute">
xxxxx
</div>
</div>
</asp:Content>
4.CS://some code...
gv.Rows[i].Cells[2].Attributes.Add("onMouseover", "showTip('"+div2.ClientID+"',event,'" + address + "')");
gv.Rows[i].Cells[2].Attributes.Add("onMouseout", "hidTip('"+div2.ClientID+"',event)");
//code here ...
結合上篇文章,就可以實現行為和表現(js和html)的分離。