在APS NET页面中使用JS验证服务器控件,并在Button按钮中调用JS代码

时间:2022-02-11 00:36:57

用VS设计了一个表单,里面全是服务器控件,其中包含Label、TextBox、DropdownList,Button。验证就是用VS的验证控件。因我还想当用户输入完数据,点击Button按钮的时候,出现一个提示的信息,提示是否要添加该信息。

于是想到了用JS的confirm来进行确认提示,当弹出提示后,如果点“是”就执行Button_Click事件,点“否”就不执行。所以我在Button那里增加了一个onClientClick的事件,代码如下:

<asp:Button ID="ButtonOK" runat="server" OnClientClick="return confirmClick();" Text="确认新增" Width="80px"  OnClick="ButtonOK_Click" />
然后在页面那里添加JS的代码

<script language="javascript" type="text/javascript">
    function confirmClick()

   {...}

</script>

然后在confirmClick()中读取页面控件的值。

由于JS只能用于客户,不能直接用Label、TextBox等名称进行直接的访问。我的解决方法是:通过查看客户端的源文件的确定他们的ID,其中TextBox、DropdownList、Button的服务器ID就是客户端访问时的ID,估计其他的一般的控件都是,但有一个比较特殊,就是这个Label控件,Label控件在客户端的时候是以<span>的形式出来的,虽然也可以在<span>这里添加ID,但利用DOM结构是不能直接的访问到的。

用JS访问DOM结构有getElementsById和getElementsByTagName两个方法来进行访问,通过这两个方法访问得到的是该HTML的DOM的节点,该节点包含关于节点的某些属性,这些属性是:
nodeValue      节点的值
nodeName      节点名称
nodeType       节点类型

————————————————————————————————————————————————————————————————
nodeName      节点名称
1、元素节点的nodeName是标签名称
2、属性节点的nodeName是属性名称
3、文本节点的nodeName永远是#text
4、文档节点的nodeName永远是#document

——————————————————————————————————————
nodeValue
1、对于文本节点,nodeValue属性包含文本。
2、对于属性节点,nodeValue属性包含属性值。
3、nodeValue属性对于文档节点和元素节点是不可用的。

——————————————————————————————————————
nodeType
nodeType属性可返回节点的类型。
最重要的节点类型是:

元素      1
属性      2
文本      3
注释      8
文档      9

知道上面这些节点的相关信息很重要,特别是节点的类型。TextBox和DropDownList控件产生的节点的类型是1,也就是元素节点。访问TextBox的值比较简单,直接用nodeValue就可以了。但DrowpDownList访问起来就有点麻烦了,因为它在客户端生成是<select></select>元素,不能直接用nodeValue来访问。去找了一下资料,原来由于Select里面有很多个Option,所以他的值应该是一个数组,也就是Options数组,可以通过访问这个数组来获得值,而且我想获得Select里选择的Text,不是用value的值。访问的方法是:

      var confirmDDLXueQi=document.getElementById("DropDownListXueQi");              
      var confirmDDLType=document.getElementById("DropDownListKSType");
      var selectindex;
      selectindex=confirmDDLXueQi.selectedIndex;                              //获得当前选择的节点的text的值
      var XueQiText=confirmDDLXueQi.options[selectindex].text;
      selectindex=confirmDDLType.selectedIndex;                               //获得当前选择的节点的text的值
      var TypeText=confirmDDLType.options[selectindex].text;

最后还有个Label的控件,由于Label产生的是<span></span>,那怎么访问它们的值呢?
假如在服务器控件中Label控件的ID为LabelName,在客户端如何访问呢?方法如下:
var confirmLabelParentNode=document.getElementById("LabelName").parentNode;       //访问<span>父节点我这里是BODY
var confirmLabelNode=confirmLabelParentNode.getElementsByTagName("span")[0].firstChild;      //访问BODY下的第一个SPAN节点的第一个子节点。
var confirmLabelValue=confirmLabelNode.nodeValue                              //获取该节点的值
访问TextBox的方法是:这里TextBox的ID为TextBoxName,访问的方法如下:
var confirmTextBoxNode=document.getElementById("TextBoxName");      //获取节点信息
var confirmTextBoxValue=confirmTextBoxNode.value;                              //获取节点值

到这里,工作已经基本完成了,通过JS已经能够访问HTML的DOM了。
但。。。。这时还出现了一个问题,就是原来VS的验证控件不起作用了。想了一下,因为VS的验证在客户端生成的也是JS的代码,会不会是JS的执行顺序问题呢?还是JS的冲突呢?

然后去网上查了一下,应该是顺序的问题,也是就执行了页面的JS,也没有执行验证控件产生的JS,这个可以通过一个函数来解决这个问题Page_ClientValidate()。代码如下:
if(Page_ClientValidate())
{
  if(confirm("确认要添加吗?"))
    return true;
  else
    return false;
}

到此,这部分工作已经全部完成了。

原来是只是看了JS的书,但通过这个实践,深深的觉得用JS来控制DOM结构的强大,也对我看书的知识有了一个较深入的理解,看来要多些研究一下JS才行。
看一下,原来已经写了3200字,哇,表扬一下自己能写这么字的文章。