asp.net js获取控件ID
以文本框为例：
一、未使用母版页
js可以使用document.getElementById('控件的ID')形式，也可以使用document.getElementById('<%=控件的ID.ClientID %>')的形式，代码如下：
1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 function change() { 5 var control = document.getElementById('TextBox1'); 6 //或者是下面的方式 7 //var control = document.getElementById('<%=TextBox1.ClientID %>'); 8 if (control.value != "") { 9 alert("输入的文本：" + control.value); 10 } 11 } 12 </script> 13 </head> 14 <body> 15 <form id="form1" runat="server"> 16 <div> 17 <asp:TextBox ID="TextBox1" runat="server" onblur="change()"></asp:TextBox> 18 </div> 19 </form> 20 </body>
如果是HTML <input>标签，取得id的方式和服务器控件取得ID的方式一样，代码如下：
1 <head runat="server"> 2 <title></title> 3 <script type="text/javascript"> 4 function change() { 5 var control = document.getElementById('Text1'); 6 if (control.value != "") { 7 alert("输入的文本：" + control.value); 8 } 9 } 10 </script> 11 </head> 12 <body> 13 <form id="form1" runat="server"> 14 <div> 15 <input id="Text1" type="text" onblur="change()" /> 16 </div> 17 </form> 18 </body>
注意：使用HTML <input>标签，想在后台取得其Value值（string text = this.Text1.Value;），或者在js用document.getElementById('<%=Text1.ClientID %>');的形式获取控件id，需要变为服务器控件，加上runat="server"，即<input id="Text1" type="text" runat="server" onblur="change()">即可，当然，即使加上runat="server"，js也可以使用document.getElementById('Text1');获取其id。
二、使用母版页
①对于标准服务器控件，如<asp:TextBox>，js获取其控件ID必须使用document.getElementById('<%=TextBox1.ClientID %>');获取其ID，代码如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change() { 4 //var control = document.getElementById('TextBox1');//找不到TextBox1对象 5 var control = document.getElementById('TextBox1.ClientID'); 6 if (control.value != "") { 7 alert("文本为：" + control.value); 8 } 9 } 10 </script> 11 </asp:Content> 12 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 13 <asp:TextBox ID="TextBox1" runat="server" onblur="change()"></asp:TextBox> 14 </asp:Content>
如果使用document.getElementById('TextBox1');会出现如下错误：
②对于HTML <input>标签，如果作为服务器控件，即有runat="server"，js获取其id使用document.getElementById('<%=Text1.ClientID %>');，如果不作为服务器控件，使用document.getElementById('Text1');获取其id。否则也会出现上图的错误，代码如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change() { 4 var control = document.getElementById('Text1.ClientID');//作为服务器控件获取其id 5 //var control = document.getElementById('Tex2');//作为HTML <input>标签，获取其id 6 if (control.value != "") { 7 alert("文本为：" + control.value); 8 } 9 } 10 </script> 11 </asp:Content> 12 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 13 <input id="Text1" type="text" runat="server" onblur="change()"/> 14 <%--<input id="Text2" type="text" onblur="change()"/>--%> 15 </asp:Content>
注：如果想在后台获取其文本值，必须将其作为服务器控件，即加上runat="server"
③对于服务器控件，如果在母版页body内的ContentPlaceHolder控件加上ClientIDMode="Static" 属性后，内容页中js获取服务器控件id就可以直接使用其ID名（不用使用<%=控件ID.ClientID %>），母版页代码如下：
1 <head runat="server"> 2 <title></title> 3 <asp:ContentPlaceHolder ID="head" runat="server"> 4 </asp:ContentPlaceHolder> 5 </head> 6 <body> 7 <form id="form1" runat="server"> 8 <div> 9 <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server" ClientIDMode="Static"> 10 11 </asp:ContentPlaceHolder> 12 </div> 13 </form> 14 </body>
内容页代码如下：
1 <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> 2 <script type="text/javascript"> 3 function change(id) { 4 var control = document.getElementById(id); 5 if (control.value != "") { 6 alert("文本为：" + control.value); 7 } 8 } 9 </script> 10 </asp:Content> 11 <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> 12 <input id="Text1" type="text" runat="server" onblur="change(this.id)"/><br /> 13 <asp:TextBox ID="TextBox1" runat="server" onblur="change(this.id)"></asp:TextBox> 14 </asp:Content>