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

来源：互联网发布：mac口红哪个国家的编辑：程序博客网时间：2024/06/06 00:16

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

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