话说曾在校时,前端的第一门课程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 属性值,这样就可以直接接受值,纯前台界面之间的操作
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); }