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

当我们制作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 );

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