jQuery 如何获取ASP.NET服务器控件的值？

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

服务器控件代码：<asp:TextBox 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。

<input name="ctl00$MainContent$TextBox1" type="text" />

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

aspx

<asp:textbox runat="server" >some strings here...</asp:textbox>

html

<input name="ctl00$txtMessage" />

说明

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

客户端获取方法

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

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

jQuery 属性选择器

$("div[id]") 查找所有含有 id 属性的div元素

$("div[]") 查找 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 元素