js前台与后台数据交互-前台调后台


 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台)。即:


  


  下面就讲前台与后台进行数据交互的方法,分前台调用后台方法与变量;台调用前台js代码。本文先介绍前者,后者在后面文章中介绍。


前台调用后台方法与变量:


方法一:通过WebService来实现

步骤:

后台

Ø  首先引入命名空间(using System.Web.Services;)

Ø  然后定义公共的静态的方法(必须为public和static的,且静态方法不能访问外部的非静态变量,此时后台与前台相当于父类与子类的关系),并在该方法头部上加上[System.Web.Services.WebMethod],来标注方法特性。

前台

Ø  添加ScriptManager服务器控件,并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介:

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array; 

2)      funRight是方法调用成功后的回调函数,对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法(容错处理方法), 

4)      userContext是可以传递给SuccessMethod方法,或是FailedMethod方法的任意内容。

举例:

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm10 : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.   
  15.         }  
  16.         [WebMethod]  
  17.         public static string test1(string userName)  
  18.         {  
  19.             return "hello "+userName+", 这是通过WebService实现前台调用后台方法";  
  20.         }  
  21.     }  
  22. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.         <%--引入ScriptManager服务器控件--%>  
  11.         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>  
  12.         <script type="text/javascript">  
  13.             function bclick() {  
  14.                 PageMethods.test1("zhipeng", funRight);  
  15.             }  
  16.   
  17.             function funRight(val)       //回调函数,用val接受后台代码test1的执行结果    
  18.             {  
  19.                 alert(val);               
  20.             }  
  21.         </script>  
  22.         <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”  
  23.     </form>  
  24. </body>  
  25. </html>  


点击按钮弹出如下对话框:


  



方法二:通过<%=methodname()%><%#methodname()%>methodname()为后台定义的方法)

这种方法调用的后台方法可能出现在前台的位置有3种情况:

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置(它作为占位符把变量显示于符号出现的位置)

这里对两者做简单实例,详细内容在后面文章中介绍

步骤:

后台

Ø  定义public或protected的变量或方法(不能为private)

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用,两者的用法稍有差异(<%# %>基本上能实现<%= %>的所以功能)

举例:

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm1 : System.Web.UI.Page  
  11.     {  
  12.         public string name = "我是后台变量";  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             this.DataBind();  
  16.              
  17.         }  
  18.         //不能为private  
  19.         protected string strTest() {  
  20.             return "这是前台通过<%# %>调用后台方法";  
  21.         }  
  22.         public void  strTest2()  
  23.         {  
  24.             Response.Write("这是前台通过<%= %>调用后台方法");  
  25.         }  
  26.   
  27.     }  
  28. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title></title>  
  9.   
  10. </head>  
  11. <body>  
  12.   
  13.     <form id="form1" runat="server">  
  14.     <div>  
  15.         <b>服务器控件</b><br /><br />  
  16.         服务器端文本框绑定后台方法:<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />   
  17.         ......................变量:<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />   
  18.         服务器端文本框绑定后台方法:<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />  
  19.         服务器端文本框绑定后台方法:<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />  
  20.   
  21.         <br /><br />  
  22.         <b>客户端控件</b><br /><br />  
  23.         客户端文本框绑定后台方法:<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />           
  24.         客户端标签: <div><%=strTest() %></div>  
  25.          
  26.     </div>  
  27.     </form>  
  28. </body>  
  29. </html>  


运行结果:


  


<%=methodname()%>和<%#methodname()%>两种方式的详细介绍(联系与区别)会在后面文章中详细介绍。


方法三:通过隐藏服务端按钮来实现

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm11 : System.Web.UI.Page  
  11.     {  
  12.         protected void Button1_Click(object sender, EventArgs e)  
  13.         {  
  14.             Response.Write("这是通过隐藏控件方式实现前台访问后台方法");  
  15.         }  
  16.     }  
  17. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title></title>  
  9.     <script type="text/javascript" >  
  10.         function test() {  
  11.             //通过客户端脚本选中隐藏控件,并调用后台相关方法  
  12.             document.getElementById("Button1").click();  
  13.         };  
  14.     </script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <form id="form1" runat="server">  
  19.         <%--隐藏服务端铵钮--%>  
  20.         <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />  
  21.         <%--调用客户端脚本,间接调用后台方法--%>  
  22.         <input id="Button2" type="button" value="button" onclick="test()" />  
  23.     </form>  
  24. </body>  
  25. </html>  


总结:

  方法一的后台方法必须声明为public和static(否则会发生PageMethods未定义错误),正是由于要将方法声明为static,使得这两种方法都有局限性,即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法,后台方法中是不能访问非静态成员变量的。

  方法二,后台方法没有任何限制,但是前台调用的时候由于<%=%>是只读的,<%=%>适合于调用后台方法经过处理并返回给客户端使用,不适合于将数据传到后台供后台使用

  后面会讲后台调用前台js代码。。。

 

js前台与后台数据交互-前台调后台

分类: .net   1476人阅读  评论(26)  收藏  举报

目录(?)[+]

 

  网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数据,然后将数据传给前台来显示出来(当然可以将后台代码嵌入到前台)。即:


  


  下面就讲前台与后台进行数据交互的方法,分前台调用后台方法与变量;台调用前台js代码。本文先介绍前者,后者在后面文章中介绍。


前台调用后台方法与变量:


方法一:通过WebService来实现

步骤:

后台

Ø  首先引入命名空间(using System.Web.Services;)

Ø  然后定义公共的静态的方法(必须为public和static的,且静态方法不能访问外部的非静态变量,此时后台与前台相当于父类与子类的关系),并在该方法头部上加上[System.Web.Services.WebMethod],来标注方法特性。

前台

Ø  添加ScriptManager服务器控件,并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介:

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array; 

2)      funRight是方法调用成功后的回调函数,对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法(容错处理方法), 

4)      userContext是可以传递给SuccessMethod方法,或是FailedMethod方法的任意内容。

举例:

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7. using System.Web.Services;  
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm10 : System.Web.UI.Page  
  11.     {  
  12.         protected void Page_Load(object sender, EventArgs e)  
  13.         {  
  14.   
  15.         }  
  16.         [WebMethod]  
  17.         public static string test1(string userName)  
  18.         {  
  19.             return "hello "+userName+", 这是通过WebService实现前台调用后台方法";  
  20.         }  
  21.     }  
  22. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>  
  2. <!DOCTYPE html>  
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head runat="server">  
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  6.     <title></title>  
  7. </head>  
  8. <body>  
  9.     <form id="form1" runat="server">  
  10.         <%--引入ScriptManager服务器控件--%>  
  11.         <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>  
  12.         <script type="text/javascript">  
  13.             function bclick() {  
  14.                 PageMethods.test1("zhipeng", funRight);  
  15.             }  
  16.   
  17.             function funRight(val)       //回调函数,用val接受后台代码test1的执行结果    
  18.             {  
  19.                 alert(val);               
  20.             }  
  21.         </script>  
  22.         <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”  
  23.     </form>  
  24. </body>  
  25. </html>  


点击按钮弹出如下对话框:


  



方法二:通过<%=methodname()%><%#methodname()%>methodname()为后台定义的方法)

这种方法调用的后台方法可能出现在前台的位置有3种情况:

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置(它作为占位符把变量显示于符号出现的位置)

这里对两者做简单实例,详细内容在后面文章中介绍

步骤:

后台

Ø  定义public或protected的变量或方法(不能为private)

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用,两者的用法稍有差异(<%# %>基本上能实现<%= %>的所以功能)

举例:

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm1 : System.Web.UI.Page  
  11.     {  
  12.         public string name = "我是后台变量";  
  13.         protected void Page_Load(object sender, EventArgs e)  
  14.         {  
  15.             this.DataBind();  
  16.              
  17.         }  
  18.         //不能为private  
  19.         protected string strTest() {  
  20.             return "这是前台通过<%# %>调用后台方法";  
  21.         }  
  22.         public void  strTest2()  
  23.         {  
  24.             Response.Write("这是前台通过<%= %>调用后台方法");  
  25.         }  
  26.   
  27.     }  
  28. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title></title>  
  9.   
  10. </head>  
  11. <body>  
  12.   
  13.     <form id="form1" runat="server">  
  14.     <div>  
  15.         <b>服务器控件</b><br /><br />  
  16.         服务器端文本框绑定后台方法:<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />   
  17.         ......................变量:<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />   
  18.         服务器端文本框绑定后台方法:<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />  
  19.         服务器端文本框绑定后台方法:<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />  
  20.   
  21.         <br /><br />  
  22.         <b>客户端控件</b><br /><br />  
  23.         客户端文本框绑定后台方法:<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />           
  24.         客户端标签: <div><%=strTest() %></div>  
  25.          
  26.     </div>  
  27.     </form>  
  28. </body>  
  29. </html>  


运行结果:


  


<%=methodname()%>和<%#methodname()%>两种方式的详细介绍(联系与区别)会在后面文章中详细介绍。


方法三:通过隐藏服务端按钮来实现

后台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.WebControls;  
  7.   
  8. namespace WebApplication4  
  9. {  
  10.     public partial class WebForm11 : System.Web.UI.Page  
  11.     {  
  12.         protected void Button1_Click(object sender, EventArgs e)  
  13.         {  
  14.             Response.Write("这是通过隐藏控件方式实现前台访问后台方法");  
  15.         }  
  16.     }  
  17. }  


前台代码:


  

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
  8.     <title></title>  
  9.     <script type="text/javascript" >  
  10.         function test() {  
  11.             //通过客户端脚本选中隐藏控件,并调用后台相关方法  
  12.             document.getElementById("Button1").click();  
  13.         };  
  14.     </script>  
  15. </head>  
  16.   
  17. <body>  
  18.     <form id="form1" runat="server">  
  19.         <%--隐藏服务端铵钮--%>  
  20.         <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />  
  21.         <%--调用客户端脚本,间接调用后台方法--%>  
  22.         <input id="Button2" type="button" value="button" onclick="test()" />  
  23.     </form>  
  24. </body>  
  25. </html>  


总结:

  方法一的后台方法必须声明为public和static(否则会发生PageMethods未定义错误),正是由于要将方法声明为static,使得这两种方法都有局限性,即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法,后台方法中是不能访问非静态成员变量的。

  方法二,后台方法没有任何限制,但是前台调用的时候由于<%=%>是只读的,<%=%>适合于调用后台方法经过处理并返回给客户端使用,不适合于将数据传到后台供后台使用

  后面会讲后台调用前台js代码。。。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值