[ASP.NET] 利用javascript获取Asp.net网页控件并检验网页输入的简单办法

 

利用javascript获取Asp.net网页控件并检验网页输入的简单办法（从服务器获取客户端ID）收藏

今天十分想通过javascript检验asp.net输入合法性，采用原来在Form年代的办法document.getElementById("textBox").value就会报错，而且document.getElementById("textBox")获取的是Null，说明这个办法在.net中采取WebForms时获取不到控件id，找了很长时间材料，终于知道所以和解决办法。

原因所在：

据个例子，一个TextBox控件，在服务器端的ID是txtUserName，但是最终在客户端生成的ID可能是LoginForm_txtUserName，因为它被放在一个ID为LoginForm的NamingContainer中。为了使组件内部的服务器控件最终生成的客户端ID能够在页面上唯一，WebForms引入了NamingContainer这个概念。在NamingContainer中的服务器端控件最终在客户端生成的ID，会使用NamingContainer的“客户端ID”作为前缀。如此“递归”的做法保证了服务器控件在客户端的ID唯一。

  

　　Web 2.0在业界风卷残云般的势头至今还未停歇，与其有密切相关的AJAX技术也被广泛使用。AJAX技术从根本上讲，是一种在浏览器中使用JavaScript实现的技术，因此使用JavaScript操作DOM元素的情况非常多见。在非WebForms的页面中我们可以编写如下的代码：

  

<input type="text" id="textBox" />

  

<script language="javascript" type="text/javascript">

   document.getElementById("textBox").value = "Hello World!";

</script>

  

　　但是由于NamingContainer的缘故，我们在使用WebForms的服务器端的控件时就可能无法通过textBox在客户端获得文本框（生成的<input />元素）。为了解决这个问题，服务器端的控件模型提供了一个ClientID属性，通过这个属性，我们就可以在服务器端得到控件最终在客户端的ID。例如，如果上面的代码放在一个用户控件里的话，就一定必须写成如下形式：

  

<%@ Control Language="C#" AutoEventWireup="true" %>

  

<asp:TextBox runat="server" ID="textBox" />

  

<script language="javascript" type="text/javascript">

   document.getElementById("<%= this.textBox.ClientID %>").value = "Hello World!";

</script>

  

　　此时，当控件被放到页面上之后，它在客户端生成的代码则会是：

  

<input name="DemoControl1$textBox" type="text" id="DemoControl1_textBox" />

  

<script language="javascript" type="text/javascript">

   document.getElementById("DemoControl1_textBox").value = "Hello World"!;

</script>

  

　　请注意<input />元素的name和id，它们都留下了NamingContainer的痕迹。由于我们在页面上使用了<%= %>标记直接输出了服务器控件的ID，这样在客户端的JavaScript代码也就可以正确访问到服务器端<asp:TextBox />对应的客户端<input />元素了。

检验录入解决办法：

实例代码如下：

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

<script language="javascript" type="text/javascript">

function CheckSchEnter()

{

    var obj=document.getElementById("<%=this.tValue.ClientID%>");

    if(obj.value==""){

    alert("请输入查询关键字");

    obj.focus();

    return false;

    }

    else{

    return true;

    }

}

</script>

<form id="form1" runat="server">

<div>

搜索：关键字

<asp:TextBox ID="tValue" runat="server"></asp:TextBox>

<asp:Button ID="btnSearch" runat="server" Height="25px" Text="搜索" OnClientClick="return CheckSchEnter()" onclick="btnSearch_Click" />

<div>

</form>