用jQuery访问ASP.Net WebControl丑陋的ClientID方法

关注

原创最新推荐文章于 2026-09-12 22:13:01 发布 2.5k 阅读 AI 写同款· GEO 优化 ›

js脚本获取webform服务器控件的方法 asp.net webform中获取服务器控件,js脚本获取服务器控件需要使用ClientID web前台获取控件: <%=TextBox1.ClientID %>会打印出TextBox1的控件ID js脚本中获取webform控件:(实现当鼠标移到控件时,控件颜色变成红色) 代码如下: [removed] function myFuntion() { document.getElementById(‘<%=TextBox1.ClientID %>’).onmouseover=function(){ this.style.background=’r 立即下载

当我们制作Web页面时通常会在客户端使用JavaScript动态的更改一个控件的属性，举例：

<html>
<head>
<script type="text/javascript">
	$(document).ready(function () {
		$("#btnSubmitMessage").click(function () {
			$("#lblMessage").text($("#txtMessage").val());
		});
	});
</script>
</head>
<body>
<div id="wrap">
	<p>
		Write Message: <input id="txtMessage" type="text" value="some strings here..." /> <input id="btnSubmitMessage" type="button" value="Post Message" />
	</p>
	<p>
		Message: <label id="lblMessage">nothing entered.</label>
	</p>
</div>
</body>
</html>

通过以上代码，在我们点击btnSubmitMessage按钮后，lblMessage将显示“some strings here...”字样。

以上代码固然简单，然而当我们把这段代码转换成ASP.Net的代码就会出现一个非常让人头疼的问题——ASP.Net会自动生成一个很难看的ClientID，比如把以上的<input id="txtMessage" />转换成一个WebControl就变成了这样：

<asp:textbox runat="server" id="txtMessage" textmode="SingleLine">some strings here...</asp:textbox>

但是当这段代码输出到客户端时就变成了这样：

<input name="ctl00$txtMessage" id="ctl00_txtMessage" type="text" value="some strings here..." />

可以看到我们的TextBox控件的ID前边多了一些奇怪的字符。这是ASP.Net MasterPage的特性，它像洋葱一样把控件的ID一层一层的包了起来，而当前控件ID前的字符串就是其控件父级控件的ID名称。这样的话我们就无法用前面的jQuery方法获取这个控件了。

不过jQuery却不会被此难倒，jQuery Selector有一个十分方便的方法可以调用到我们的控件，那就是ID Selector，如下：

$("[id$=lblMessage]").text( val );

通过以上的方法，无论这个控件被包了多少层我们都能够轻松的获取了。

标签

#asp.net #jquery #textbox #input #function

使用 jQuery 属性选择器获取服务器控件 ClientID 客户端获取方法 var divContainer=document.getElementById(''); var divContainer=$("[id$=txtMessage]"); jQuery 属性选择器 $("div[id]") 查找所有含有 id 属性的div元素 $("div[id='ajaxa']") 阅读详情

用jQuery访问ASP.Net WebControl丑陋的ClientID方法

相关推荐