大家都知道ASP.NET爲了區分控件 HTML標籤客戶端ID與服務器ID在某些情況下是不同的
例如 使用了模板頁
假如有個服務器TextBox ID爲txtName
那麼客戶端ID可能會是ctl00_ContentPlaceHolder1_txtName
當寫JScript代碼時，想得到某控件
如果JScript代碼直接寫在本頁時 可以用如下代碼獲得：
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>無標題頁</title>
<script language="javascript" type="text/javascript">
function GetValue(){
var txtNameValue=$id("<%=txtName.ClientID %>").value;
alert(txtNameValue);
}
function $id(id) {
return document.getElementById(id);
}
</script>
</head>
<body>
<form id="form1" runat="server" style="">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<input type="button" value="查看" onclick="GetValue()" />
</form>
</body>
</html>
當JScript寫在單獨的Js文件中 這種方法就不行了
可以用如下方式解決
首先在頁面定義一個函數(這個函數相當於OOP中的類)
例如:
Default2.aspx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!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 runat="server">
<title>無標題頁</title>
</head>
<body>
<form id="form1" runat="server" style="">
<asp:TextBox ID="txtName" runat="server"></asp:TextBox>
<input type="button" value="查看" onclick="GetValue()" />
</form>
<script type="text/javascript">
function IdList()
{
this.txtShopName="<%= txtName.ClientID %>";
//
}
</script>
<script src="js/test.js" language="javascript" type="text/javascript" ></script>
</body>
</html>
外部JScript文件
然後在JScript文件中實例化這個“類” 例如:
test.js//關聯Default2.aspx
function GetValue(){
var idList=new IdList();
alert($id(idList.txtShopName).value);
}
//簡化document.getElementById
function $id(id) {
return document.getElementById(id);
}
如上方法就可解決外部JScript不能得到正確的客戶端ID了
爲了便於理解 最好在JScript文件中標註 與那個頁面關聯
http://www.e5-zone.com/shopRegister.html 該頁面使用了此方法 提供出來 以便大家參考