zoukankan      html  css  js  c++  java
  • 在APS NET页面中使用JS验证服务器控件,并在Button按钮中调用JS代码

    用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字,哇,表扬一下自己能写这么字的文章。

  • 相关阅读:
    项目
    关于我
    【转载】罗胖精选|什么样的自控方法才有效?
    知识管理——得到CEO脱不花女士的一次分享
    注意由双大括号匿名类引起的serialVersionUID编译告警
    持续集成、持续交付和持续部署
    Google Cayley图数据库使用方法
    任务的属性
    团队博客地址
    个人总结
  • 原文地址:https://www.cnblogs.com/leotan/p/1515688.html
Copyright © 2011-2022 走看看