asp.net js获取控件ID_.NET

您所在的位置：程序员俱乐部 > 编程开发 > .NET > asp.net js获取控件ID

asp.net js获取控件ID

2014/11/17 16:06:41 码农JJ 程序员俱乐部我要评论(0)

摘要：以文本框为例：一、未使用母版页js可以使用document.getElementById('控件的ID')形式，也可以使用document.getElementById('<%=控件的ID.ClientID%>')的形式，代码如下：1<headrunat="server">2<title></title>3<scripttype="text/javascript">4functionchange()
标签：.net ASP.NET net 控件 JS

以文本框为例：

一、未使用母版页

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>