碼上歡樂
相關內容    簡體    繁體

aspx 頁面中 js 引用與頁面后台的數據交互 --【 js 調后台】

本文轉載自   查看原文   2017-06-24 23:12   7291    ASP.NET

 后台調用 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代碼。。。

 


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 ASPX頁面AJAX調用ASPX后台 vue 后台交互數據-編輯頁面 原生aspx頁面如何引用公共js和css 在aspx頁面寫c#后台代碼 前端必備——js中前端與后台的數據交互全解 js獲取后台json數據顯示在jsp頁面元素 js監測頁面是否切換到后台 Freemarker的頁面和JS遍歷后台傳入的Map 后台取值頁面顯示——Vue.js js的頁面交互
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM