Jquery获得服务器控件值的方法

由于ASP.NET网页运行后，服务器控件会随机生成客户端id，jquery获取时候不太好操作，总结有以下3种方法：

服务器控件代码：<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>

1. $("#<%=txtUserID.ClientID%>").val();

2. $("input[id*=txtUserID]").val();

3. $("*[id$=txtUserID]").val();

使用JQuery获得ClientID

MasterPages的ClientID似乎一直是个诟病，尤其是在当下客户端脚本泛滥的今天。

使用MasterPages，Server Control会向ClientID加些东西，使得客户端JS在使用ID方面十分不便，一个普遍解决方案是添加 ClientIDMode="Static" 属性，当然每一个都要改事件麻烦事。

下面是Jquery的解决方案，主要利用jquery智能的selector。

var arg = $('[id$=TextBox1]').val();

这样jquery就能够准确找到客户端控件的ID。

.Net 2.0 下使用 jQuery 属性选择器获取服务器控件 ClientID

aspx

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

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

说明

ClientID 服务器控件生成为HTML代码时所对应的id，需要在客户端访问时候用的，一般情况下与服务器端的 ID 相同，如果是控件嵌套则一般每层用_隔开。

客户端获取方法

var divContainer=document.getElementById('<%= txtMessage.ClientID%>');

var divContainer=$("[id$=txtMessage]");

jQuery 属性选择器

$("div[id]") 查找所有含有 id 属性的div元素
$("div[id='ajaxa']") 查找 id 为 ajaxa 的 div 元素
$("div[id!='ajaxa']") 查找 id 不为 ajaxa 的 div 元素
$("div[id^='ajaxa']") 查找 id 以 ajaxa 开头的 div 元素
$("div[id$='ajaxa']") 查找 id 以 ajaxa 结尾的 div 元素
$("div[id*='ajaxa']") 查找 id 含 ajaxa 的 div 元素
$("div[id^='ajaxa']") 查找 id 以 ajaxa 开头的 div 元素
$("div[id][class='ajaxa']") 查找存在id属性并且类为ajaxa的 div 元素

参考资料

1、http://blog.csdn.net/divding/archive/2010/06/25/5692970.aspx
2、http://blog.csdn.net/a85907468/archive/2009/08/28/4494049.aspx
3、http://flex.desizen.com/jquery-selectors-attributefilters/

=======================================================================

晓哥

公告

View Post

Jquery获得服务器控件值的方法

使用JQuery获得ClientID

.Net 2.0 下使用 jQuery 属性选择器获取服务器控件 ClientID