• JavaScript界面传值与前后台互调


         话说曾在校时,前端的第一门课程HTML静态网页设计,其老师,真是应了他的名字: 路遥知马力。 整个学期硬是全部在 Dreamwear 中进行拖拽控件来教学,未曾教授一句代码。成功忽悠了全体学生,课上一本正经的胡说八道,对拖拽控件的心得侃侃而谈,想想也是讽刺,同期的学生都是纯手写编辑界面,我们却依旧沉浸在设计下的拖拽操作中,带来的就是界面看起来还像回事,只是源码惨不忍睹,后来有幸在网上观看了燕十八老师的HTML系列视频,犹如冬服参汤,醍醐灌顶。使我终没有在拖拽的路上越走越远。

    1.前台界面互调传值,就是子界面与父界面之间的那些事

       ①父界面传值到子界面  在子界面中使用opener方法来说获取父界面元素

        <script type="text/javascript">
            function getfather() {
                var a = window.opener.document.getElementById("txt1").value;
                var b = window.opener.document.getElementById("txt2").value;
                console.log(a);
                console.log(b);
            }
           
        </script>

    如上图所示,txt1、txt2 为父界面中两个textbox 的 ID 属性值,这样就可以直接接受值,纯前台界面之间的操作

       ②子界面传值到父界面,同样可以在子界面中用 opener 来解决,同上,只是给等号右边的表达式赋值而已。当然,方法有很多种,解决问题时只需要一种,对于初学者,其他的方法了解就可,需要先是广度,深度的事情,研究起来内容很多,需要下大量的功夫,时间也是等倍计算。当然我这里不是误导,时时刻刻积累,每天睡前想想 又 get 到哪些新技能。

    本着技术不够,数量来凑的思想来说说Web from 中前后台的控件的情况

    2. 函数执行顺序,对于一般按钮而言,可以设置 OnClick、OnClientClick、OnCommand事件,执行顺序如下:

         ①OnClientClick  调用JS中设置的方法

         ②OnClick 按钮单击事件,在OnClientClick 事件之后执行

         ③OnCommand 在OnClick 事件执行,一般是结合CommandName 属性一起使用,当界面上有多数按钮时,可以进行标记

    3. 前台方法中设置判断,是否执行 OnClick 事件

     <script type="text/javascript">
         function Todu() {
             var txtbd = document.getElementById("txtbd").value;
             if(parseInt(txtbd)!=2) {
                 alert("回答錯誤,無法進行進入後台");
                 return false;     //添加此處
             }
             else {
                 alert("我將要執行後台方法");
             }
         }
     </script>

      默认情况下,OnClientClick  事件执行完,是要执行 OnClick 事件的,在前台做判断时, 需要设置两个地方,其一是在方法中添加,如上图注释处,其二如下图,在OnClientClick  事件中加入 return false()

    <body>
        <form id="form1" runat="server">
        <div>
            <asp:Label ID="lab" runat="server"></asp:Label>
            <br />
            <asp:TextBox ID="txtbd" runat="server"></asp:TextBox>
            <asp:Button ID="btn_to" runat="server"  Text="ToBaidu" OnClick="btn_to_Click" OnClientClick="Todu(); return false();"/>
        </div>
        </form>
    </body>

    4.后台调用前台方法

       ① 在Page_load 里面给某个按钮绑定前台方法 (注:和前端调用略有不同,false 后面没有括号) 

           protected void Page_Load(object sender, EventArgs e)
           {
               btn_to.Attributes.Add("onclick", "javascript:return Todu(); return false;");
           }

      ② 在某个按钮事件或方法中 绑定前台方法

            protected void btn_id_Click(object sender, EventArgs e)
            {
                //在前台腳本裡面增加一個script: window.open('B.aspx');
                this.ClientScript.RegisterStartupScript(this.GetType(), "", "window.open('B.aspx')", true);
                //在前台腳本裡面增加一個script: icc();    注:沒有true
                this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>icc();</script>");
                //在前台腳本裡面增加一份script:    alert("123");   注:单/双引号
                Response.Write("<script type='text/javascript'>alert('123');</script> ");
              
            }

    5. 前台调用后台方法

            public int After() 
            {
                return 233;
            }
    
            public int After2(int a, int b) 
            {
                return a + b;
            
            }

       比如后台有以上两个方法,一个带参数,一个不带参数,那么在前台的方法中,若调用后台方法,如下:

         function iafter() {
             var b = "<%=After()%>";
             alert(b);
         }
    
         function iafter2()
         {
             var b = "<%=After2(5,8)%>";
             alter(b);
         }

     以上这些都是很浅显的点,不管怎样,也是记录我这个小白路上的一个脚印,权当作学习笔记。

    ----------------------------------市人皆大笑,举手揶揄之

  • 相关阅读:
    根据对象的属性排序数组
    将多维数组的元素全部取出,组成一维数组的方法
    微信公众号报错 config:invalid signature
    改造业务代码
    微信公众号调用扫一扫
    JQuery :contains选择器,可做搜索功能,搜索包含关键字的dom
    【转】超全功能测试方法集锦——(通用黑盒功能:测试新人必收攻略)
    Oracle 查看表空间的大小及使用情况sql语句
    oracle数据库 参数open_cursors和session_cached_cursor详解!
    使用MITab操作MapInfo地图文件
  • 原文地址:https://www.cnblogs.com/Sientuo/p/6211353.html
Copyright © 2020-2023  润新知