zoukankan      html  css  js  c++  java

  • aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】

     后台调用 js 方法

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

     后台被调用的方法必须是public 或 protected
    后台被调用的方法必须是静态的static

    方法一：通过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
     
    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
     
    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>  

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

    　　

    ( 二 )

    [WebMethod] 
public static string SayHello(string name)
{
return name+"Hello !";
}
    View Code
    <input type="text"  id="SearchKey"  value="" />
 <input id="btnserach" type="button" value="搜索" />
<script type="text/javascript">
    
      $(function() { 
   
    $("#btnserach").click(function() {    
        $.ajax({             
            type: "post", //要用post方式                
            url: "Demo.aspx/SayHello",//方法所在页面和方法名
            data: "{'key':'" + $("#SearchKey").val() + "'}",
            contentType: "application/json; charset=utf-8",    
            dataType: "json",    
            success: function(data) {                   
                 console.log(data.d);
            },
            error: function(err) {    
                alert(err);    
            }    
        });
    });    
});
  
    
 
</script>
    View Code

    方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

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

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

    2)     客户端js代码中

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

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

    步骤：

    后台

    Ø  定义public或protected的变量或方法（不能为private）

    前台

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

    举例：

    后台代码：

    　　

    [html] view plain copy
     
    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
     
    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
     
    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
     
    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代码。。。
  • 相关阅读:
    git常用命令
    git误删文件找回方法/git版本回退方法
    如何解决inline和linline-block在浏览器中的间距问题
    windows系统如何添加ssh key到github
    如何使用git命令添加文件和提交文件
    sublime text常用快捷键
    sublime text3好用的插件
    Atom编辑器的插件
    使用SharedPreference保存用户数据的步骤
    解析xml文件步骤 -- pullparser
  • 原文地址：https://www.cnblogs.com/Tanghongchang/p/7074790.html
Copyright © 2011-2022 走看看