如何编写JavaScript脚本，在客户端获取或变更服务器端控件的值及ID

以前编写asp网页时，当我们需要在脚本里访问页面内一个对象的时候，一般都是通过对象的id或name。就像这样——
<!--Test.html-->
// ...
function getText()
{
  return document.form1.Text1.value; // Text1就是对象的id
}

// ...

<INPUT id="Text1" type="text" ...>

 

现在随着ASP.NET的发展，让我们越来越习惯使用服务器端控件TextBox作为用户输入的途径。如果我们想在客户端脚本里访问一个TextBox，原先的做法就行不通了——
<!--Test.aspx-->
// ...
function getText()
{
  return document.form1.Text1.value; // Text1还是对象的id？
}

// ...

<asp:TextBox id="Text1" .../>

浏览页面时，会有一个脚本错误——“Text1对象不存在”。原因就在于，Text1作为服务器端控件TextBox，在被发送到客户端之前，先由.NET Framework进行转换，而它的id显然也是转换的一部分。

 

比如：在一aspx文件中，由ID=Content1的服务器端控件Content，在此Content控件中有ID=TextBox_bdj1的服务器端控件TextBox。此aspx网页发送到客户端后，服务器端控件TextBox得ID将转换为"ctl00_ContentPlaceHolder1_TextBox_bdj1"。在客户端javascript中用document.getElementById(this.TextBox_bdj1)将不能查找到服务器端控件TextBox。

 

虽然，我们可以在aspx.cs文件中用C#查找并获取服务器端控件TextBox的ID和值，但这将增加服务器端的开销，那么如何在不增加服务器端开销的情况下，用客户端的javascipt来进行以上操作呢？

 

下面，我将举例说明

在一aspx文件中，有三个服务器端控件TextBox，ID分别为TextBox_bdj1,TextBox_bdj2,TextBox_pjdj

目的：在客户端，用javascript获取TextBox_bdj1,TextBox_bdj2,的平均值，并赋予TextBox_pjdj

 

1、在aspx.cs文件中为服务器控件TextBox_bdj1,TextBox_bdj2添加OnKeyUp事件，调用客户端脚本函数getAveragePrice()，在page_load事件中添加如下代码（位于isPostBack判断之外）

1. this.TextBox_bdj1.Attributes.Add("OnKeyUp", "getAveragePrice()");
2. this.TextBox_bdj2.Attributes.Add("OnKeyUp", "getAveragePrice()");

2、在aspx文件中添加如下客户端脚本

1.  <script language="javaScript" type="text/javascript">
2.         
3.         function getAveragePrice()
4.         {       
5.             var txtbox_bdj1=document.getElementById("<%=this.TextBox_bdj1.ClientID %>").value;
6.             var txtbox_bdj2=document.getElementById("<%=this.TextBox_bdj2.ClientID %>").value;
8.             if (txtbox_bdj2 =="" && txtbox_bdj1 !=="")
9.             {
10.                 document.getElementById("<%=this.TextBox_pjdj.ClientID %>").value=Math.round(txtbox_bdj1*Math.pow(10,2))/Math.pow(10,2);  //四舍五入，保留2位小数
11.             }
12.             else
13.             {
14.                 if (txtbox_bdj1 =="" && txtbox_bdj2 !=="")
15.                 {
16.                     document.getElementById("<%=this.TextBox_pjdj.ClientID %>").value=Math.round(txtbox_bdj2*Math.pow(10,2))/Math.pow(10,2);
17.                 }
18.                 else
19.                 {
20.                     document.getElementById("<%=this.TextBox_pjdj.ClientID %>").value=Math.round(((parseFloat(txtbox_bdj1)+parseFloat(txtbox_bdj2))/2)*Math.pow(10,2))/Math.pow(10,2);
21.                 }
22.             }        
23.         }
24. </script>