Asp.Net 客户端JS如何访问服务端控件的值？

Asp.Net 客户端JS如何访问服务端控件的值？ 这是asp.net 初学者经常提出的问题。

Asp.Net 中有三种不同形式的控件： html控件、html服务端控件、服务端控件。

服务端控件:服务端控件的提出大大方便了程序员的编程工作，程序员可以在后台对这些控件进行操作，或都将数据查询结果输出到客户端。典形的服务端控件有： TextBox控件、DropDownList控件、Button控件、DataGridView控件。DataGridView是一个数据输出控件，具有十分强大的功能，有了这个控件，程序员可以不费吹灰之力，设计出复杂的表格输出效果。（如果不采用DataGridView控件，程序员单凭JS代码，要实现类似的功能，将十分的麻烦）。

html控件:html控件普通的HTML代码，在web页面提交时，这些HTML控件的值可以提交到服务器，服务器端可以通过：string str = Request.Form["txtUserName"].Trim();等方式获取HTML控件的值。所以，服务端获取客户端html控件的值是比较容易的事情（页面必须提交到服务端）。

html服务端控件：其实就是html控件的基础上加上runat="server"所构成的控件.参考其他资料是这样说的: 当ASP.NET 网页执行时，会检查标注有无runat 属性，如果标注没有设定，那么Html标注就会被视为符串，并被送到字符串流等待送到客户端，客户端的浏览器会对其进行解释；如果Html标注有设定runat="server" 属性，Page 对象会将该控件放入控制器，服务器端的代码就能对其进行控制，等到控制执行完毕后再将Html服务器控件的执行结果转换成Html标注，然后当成字符串流发送到客户端进行解释< -- input id="Button" type="button" value="button" runat="server" />

我们的问题是：Asp.Net 客户端JS如何访问服务端控件的值？

假设有一个服务端控件 TextBox1 它的 ID 是：TextBox1，现在页面内有一段JS代码要获了这个控件的值，该怎以办？

答案1：  var t1=document.all.TextBox1.value;（直接将服务端控件当作客户端控件使用） 如果你幸运的话，这种方式会百试不爽。但是有一天，你突然发出错了，“document.all.TextBox1.value对象为空”你再也获取不到TextBox1对应的值。

这个时候你查看一下网页源代码，你会发现有一个叫“ctl00_ContentPlaceHolderContent_TextBox1”（具体值视情况而定），实现上document.all.TextBox1.value是标准的js调用，它得到的是控个id 为“TextBox1”的值。现在源码中的TextBox1的ID值变成了“ctl00_ContentPlaceHolderContent_TextBox1”，当然会错了。

哪，之前为什么我们可以调用成功呢？？？之前可以的啊！！！！

答案是：之间你是歪打正着，刚刚碰上的！！

对于“html服务端控件”、“服务端控件”，会首先在服务端进行处理，服务端根据控件的内容生成一个或多个对应的“html控件代码字符串”在这个过程中，服务器会根据控件的ID，生成一个新的ID当做新控件的ID，为了避免与客户端其它件冲突，新ID可能会与原ID不同，最后将这些生成的字符串输出给客户端。（如果生成的新ID与原ID相同，用“var t1=document.all.TextBox1.value”方问就不会出错了）。

哪么在什么情况下，生成的新ID会与原来的ID会不同呢？

1。TextBox1做为 DatagridView 的模板列输出时。这时在可户端可能生成多个对应的html控件，所以新ID必须加一些前缀。

2。TextBox1位于模板页的内部，因为不清楚模板外面是不是有ID与TextBox1相同的Html控件，所以以了保险起见，必须在新ID前面加一些前缀。

…  … 其它情况………

“html服务端控件”、“服务端控件”都要经过用服端处理，所以都会存在上面的问题。

解决办法：1。如果页面相对比较简单，服务端控件ID与生成的客户端控件ID相同，那么直接用：var t1=document.all.TextBox1.value就OK了。

2。如果生成的ID不同则：

a方法.在A.aspx页面中引入一个全局变量来获取ClientID,然后js脚本文件可以调用该全局变量,如下:

<script language ="javascript">
var ddd = "<%=服务端控件ID.ClientID%>";
</script>

b方法.将控件本身以函数的参数的形式传递到js脚本中去:

<asp:TextBox ID="tbUserName" runat="server" οnblur="check(this);"></asp:TextBox>

然后在脚本文件中可以直接调用:

function check(obj)
{
var name = obj.value;
}

转载： rommayer