用jQuery访问ASP.Net WebControl丑陋的ClientID方法
2010-06-25 02:11
579 查看
当我们制作Web页面时通常会在客户端使用JavaScript动态的更改一个控件的属性,举例:
通过以上代码,在我们点击btnSubmitMessage按钮后,lblMessage将显示“some strings here...”字样。
以上代码固然简单,然而当我们把这段代码转换成ASP.Net的代码就会出现一个非常让人头疼的问题——ASP.Net会自动生成一个很难看的ClientID,比如把以上的<input id="txtMessage" />转换成一个WebControl就变成了这样:
但是当这段代码输出到客户端时就变成了这样:
可以看到我们的TextBox控件的ID前边多了一些奇怪的字符。这是ASP.Net MasterPage的特性,它像洋葱一样把控件的ID一层一层的包了起来,而当前控件ID前的字符串就是其控件父级控件的ID名称。 这样的话我们就无法用前面的jQuery方法获取这个控件了。
不过jQuery却不会被此难倒,jQuery Selector有一个十分方便的方法可以调用到我们的控件,那就是ID Selector,如下:
通过以上的方法,无论这个控件被包了多少层我们都能够轻松的获取了。
<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 );
通过以上的方法,无论这个控件被包了多少层我们都能够轻松的获取了。
相关文章推荐
- 用jQuery访问ASP.Net WebControl的ClientID方法
- asp.net的登录验证方法 Web.config 的作用范围 拒绝与巧用允许 访问权限
- JQuery直接调用asp.net后台WebMethod方法
- JQuery直接调用asp.net后台WebMethod方法
- 在javascript中实现类似asp.net webcontrol中的render的方法
- JQuery直接调用asp.net后台WebMethod方法
- ASP.net Web页面中访问.cs方法
- asp.net的登录验证方法 Web.config 的作用范围 拒绝与巧用允许 访问权限
- Asp.net的登录验证方法Web.config访问权限配置
- Asp.net的登录验证方法Web.config访问权限配置
- JQuery直接调用asp.net后台WebMethod方法
- ASP.NET --WEB应用程序 App_Code中新的类无法访问的问题解决方法
- ASP.NET jQuery 食谱23 (jQuery AJAX实现调用页面后台方法和web服务定义的方法)
- JQuery直接调用asp.net后台WebMethod方法
- Asp.net Web Crop Image Control asp.net控件和jquery 自定义的一个截图控件
- JQuery直接调用asp.net后台WebMethod方法
- Asp.net的登录验证方法Web.config访问权限配置
- [ASP.NET]JQuery直接调用asp.net后台WebMethod方法
- DJ--一个实现了jQuery功能的asp.net webcontrol
- Take Control Of Web Control ClientID Values in ASP.NET 4