首页 > 学院 > 开发设计 > 正文

asp.net js获取控件ID

2019-11-17 01:52:30
字体:
来源:转载
供稿:网友

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>


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表