JavaScript和ASP.NET之間的傳值

本文轉載自查看原文 2020-07-18 10:03 498 JavaScript和ASP.NET的傳值

C#代碼與javaScript函數的相互調用：

1.如何在JavaScript訪問C#函數?

javaScript函數中執行C#代碼中的函數：

方法一：頁面和頁面類相結合

1、函數聲明為public ，后台代碼(把public改成protected也可以)

2、在html里用<%=ss()%>可以調用//是C#中后台的函數名稱　　

 1          C#后台的函數
 2 　　　 public string ss()
 3           {
 4                 return("a");
 5            }
 6 
 7            前台腳本
 8 
 9            <script language=javascript>
10             var a = "<%=ss()%>";//JavaScript中調用C#后台的函數
11             alert(a);
12            </script>

View Code

方法二： JavaScript異步調用定義在ASP.Net頁面中的方法
            1.將該方法聲明為公有(public);
            2.將該方法聲明為類方法(C#中的static,VB.NET中的Shared),而不是實例方法;
            3.將該方法添加【WebMethod】屬性
            4.將頁面中ScriptManager控件的EnablePageMethods屬性設置為true;
            5.在客戶端使用如下JavaScript語法調用該頁面方法
                PageMethods.[MethodName](param1,param2,...,callbackFunction);
            6.為客戶端異步調用指定回調函數,在回調函數中接受返回值並進一步處理;
            7.添加 using System.Web.Services;

 1 前台JavaScript代碼
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 < head runat="server">
 5     <title>無標題頁</title>
 6     <script type="text/javascript">
 7     function JsCallCSharp(param1)
 8     {            
 9           PageMethods.sayhell(param1,onSayHelloSucceeded);//sayhell是后台標注了【webMethod】屬性的方法 param1是傳入該方法的參數，onSayHelloSucceeded是回調函數主要是對后台返回的結果進一步處理
10     }        
11     function onSayHelloSucceeded(result)//綁定的回調函數 
12     { 
13         alert(result);
14     } 
15 
16     </script>
17 
18 </head>
19 < body>
20     <form id="form1" runat="server">
21     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">//ScriptManager控件管理腳本的，
22 
23 注意設置EnablePageMethods="true"此屬性
24     </asp:ScriptManager>
25     <div>
26         <input type="button" onclick="JsCallCSharp('hello')" />
27     </div>
28     </form>
29 < /body>
30 < /html>
31  后台代碼（.cs文件）
32 using System;
33 using System.Configuration;
34 using System.Data;
35 using System.Linq;
36 using System.Web;
37 using System.Web.Security;
38 using System.Web.UI;
39 using System.Web.UI.HtmlControls;
40 using System.Web.UI.WebControls;
41 using System.Web.UI.WebControls.WebParts;
42 using System.Xml.Linq;
43 using System.Web.Services;//添加web服務引用
44 
45 public partial class _Default : System.Web.UI.Page
46 {
47     protected void Page_Load(object sender, EventArgs e)
48     {
49       
50 
51     }
52     [WebMethod]//標示為web服務方法屬性
53     public static  string sayhell(string say)//注意函數的修飾符,只能是靜態的
54     {
55         return say;
56     }
57 }

View Code

方法三： JavaScript異步調用定義在Web服務類中的方法

1.添加一個web服務標示該服務為允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務

對應屬性為[System.Web.Script.Services.ScriptService]

2.將該方法聲明public並將該方法標示為[webMethod]屬性方法
3.在頁面中ScriptManager控件並添加web服務引用 <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>
4.在客戶端使用如下JavaScript語法調用web服務方法

WebService.HelloWorld("helloWord",function(res)//Webservice是web服務頁面名稱 HelloWord為web服務頁面類中的方法，function為回調JavaScript函數主要是處理返回的結果

 1 頁面代碼
 2 
 3 <html xmlns="http://www.w3.org/1999/xhtml">
 4 < head runat="server">
 5     <title>無標題頁</title>
 6 
 7     <script type="text/javascript">
 8     function JsCallCSharp(param1)
 9     {            
10           PageMethods.sayhell(param1,onSayHelloSucceeded);
11     }        
12     function onSayHelloSucceeded(result)
13     { 
14         alert(result);
15     }  
16 
17 //該方法為調用的函數
18     function JsCallWebService()
19     {
20      WebService.HelloWorld("helloWord",function(res)//調用web服務
21      {
22          alert(res);
23      });
24     }
25     </script>
26 
27 </head>
28 < body>
29     <form id="form1" runat="server">
30     <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" >
31    <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>//注意要引用web服務
32     </asp:ScriptManager>
33     <div>
34         <input type="button" onclick="JsCallCSharp('hello')" value="測試C#后台頁" />
35         <input type="button" onclick="JsCallWebService()" value="測試web后台類" />
36     </div>
37     </form>
38 < /body>
39 < /html>
40 
41 web服務后台代碼
42 
43 using System;
44 using System.Collections;
45 using System.Linq;
46 using System.Web;
47 using System.Web.Services;
48 using System.Web.Services.Protocols;
49 using System.Xml.Linq;
50 
51 /// <summary>
52 ///WebService 的摘要說明
53 /// </summary>
54 [WebService(Namespace = "http://tempuri.org/")]
55 [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
56 //若要允許使用 ASP.NET AJAX 從腳本中調用此 Web 服務，請取消對下行的注釋。 
57  [System.Web.Script.Services.ScriptService]//注意要添加該標示
58 public class WebService : System.Web.Services.WebService {
59 
60     public WebService () {
61 
62         //如果使用設計的組件，請取消注釋以下行 
63         //InitializeComponent(); 
64     }
65 
66     [WebMethod]//方法要標示的屬性
67     public string HelloWorld(string result) {
68         return result;
69     }
70 }

View Code

  1 方法一：使用<% %>
  2  <script  type="text/javascript">
  3           var s = "<%=ShowBehindInfo("chenliang")%>";  
  4           document.write(s);
  5  </script>
  6 cs后台代碼：
  7 protected string ShowBehindInfo(string name)
  8 {
  9     return "姓名：" + name;
 10 }
 11 方法二：使用<% %>
 12   <script   type="text/javascript">
 13      document.write("<%ShowResult();%>");  
 14   </script>
 15 cs后台代碼：
 16 protected void ShowResult()
 17 {
 18     Response.Write("我是陳全勇氣");
 19 }
 20 方法三：
 21  <style>
 22         .btn
 23         {
 24             display:none;
 25         }
 26   </style>
 27 <asp:Button ID="Button1" runat="server"  CssClass="btn"  Text="Button" OnClick="Button1_Click" />
 28 <div  onclick="invokeCharp()">點擊調用aspx.cs的代碼</div>
 29 以下js代碼將調用后台的cs代碼
 30 function invokeCharp()
 31 {
 32     document.getElementById("Button1").click();
 33 }
 34 通過js調用的代碼
 35  protected void Button1_Click(object sender, EventArgs e)
 36  {
 37     Response.Write("被js調用的代碼");
 38  }
 39 方法四：
 40 <input type="hidden"   name="txtFunName">
 41 <input id="Button2" type="button" value="調用cs函數" onclick="return Button2_onclick()" />
 42 //將調用的信息存入隱藏控件中 在提交表單
 43 function Button2_onclick()
 44 {
 45     document.all.txtFunName.value="show";
 46     document.forms[0].submit();
 47 }
 48 //后台cs代碼
 49 protected void Page_Load(object sender, EventArgs e)
 50 {
 51         string strFunName = Request.Form["txtFunName"] != null ? Request.Form["txtFunName"] : "";
 52         //根據傳回來的值決定調用哪個函數
 53         switch (strFunName)
 54         {
 55             case "show":
 56                 enter(); //調用該函數
 57                 break;
 58             default:
 59                 //調用默認函數
 60                 break;
 61         }
 62 }
 63 方法五：
 64 使用__doPostBack();
 65 <input id="Button6" type="button" value="調用服務端的button" onclick="Button6_onclick()"  />
 66 <asp:Button ID="btn" runat="server"   Text="Button" OnClick="btn_Click" />  
 67 <asp:CheckBox ID="CheckBox1" AutoPostBack="true" runat="server" />
 68 function Button6_onclick()
 69 {
 70    var res = "chenliang";
 71    __doPostBack('btn','chenlinng');
 72 }
 73 //以上腳本將調用以下事件代碼
 74 protected void btn_Click(object sender, EventArgs e)
 75 {
 76     string target = Request.Params["__EVENTTARGET"];
 77     string args = Request.Params["__EVENTARGUMENT"];
 78     Response.Write(target + "<Br>" + args);
 79 }
 80 __doPostBack解釋：
 81 是一個純粹並且是非常簡單的javascript函數
 82 如以上代碼，如果ASPX頁面有包含asp:LinkButton或者帶有AutoPostBack屬性且其值為true的服務器控件時
 83 ASP.NET會自動為頁面生成下面的腳本
 84 實際上調用__doPostBack函數
 85 也就是將觸發回發的控件(第一個參數)及相關參數(第二個參數)付給兩個頁面的隱藏控件
 86 然后提交表單；
 87 <input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
 88 <input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
 89 function __doPostBack(eventTarget, eventArgument)
 90 {
 91    if (!theForm.onsubmit || (theForm.onsubmit() != false))
 92    {
 93       theForm.__EVENTTARGET.value = eventTarget;
 94       theForm.__EVENTARGUMENT.value = eventArgument;
 95       theForm.submit();
 96    }    
 97 }  
 98 而在后台事件代碼中可以
 99 通過Request.Form[“__EVENTTARGET”]獲取到觸發頁面PostBack的事件源（控件的ID）
100 但Button和ImageButton觸發的PostBack無法通過這種方式獲取到它們的ID

在javascript訪問C#函數

2.如何在JavaScript訪問C#變量?

方法一：1、通過頁面上隱藏域訪問<input id="xx" type="hidden" runat="server">

方法二：1、如后台定義了PUBLIC STRING N;前台js中引用該變量的格式為'<%=n%>'或"+<%=n%>+"

方法三：1、或者你可以在服務器端變量賦值后在頁面注冊一段腳本

"<script language='javascript'>var temp=" + tmp + "</script>"

tmp是后台變量，然后js中可以直接訪問temp獲得值。

 1 1.如何在javascript訪問C#變量
 2 方法一：使用<%=%>
 3  <input id="Button3" type="button" value="js調用c#變量" onclick="return Button3_onclick()" />
 4 function Button3_onclick()
 5 {         
 6     alert('我的名字：'+ '<%=name %>');
 7 }
 8 cs代碼中的定義：protected string name = "chenlaing";
 9 方法二：使用Hidden隱藏控件
10   <input id="Hidden1" runat="server" type="hidden" />
11 在cs代碼中給該隱藏控件賦值：  Hidden1.Value = "陳亮";
12 function Button3_onclick()
13 {         
14     alert(document.getElementById("Hidden1").value);
15 }
16 方法三：在cs代碼中注冊js腳本
17 string tmp = "陳全用";
18 ClientScript.RegisterClientScriptBlock(this.GetType(), null, "<script language='javascript'>var temp='" + tmp + "'</script>");
19 function Button3_onclick()
20 {         
21      alert(temp);
22 }

View Code

3.如何在C#中訪問JavaScript的已有變量?

問題3 .如何在C#中訪問JavaScript的已有變量?

方法一：1、前台使用服務器文本控件隱藏域，將js變量值寫入其中；后台直接通過控件id訪問和調用（request["id"]）

方法二：可以用cookie或session存儲變量值，后台直接使用

4.如何在C#中訪問JavaScript函數?

問題4 C#代碼執行JavaScript函數和調用JavaScript函數

方法一： .盡量少用Response.Write(< script>< /script>);這種方法,它會影響CSS導致頁面效果偏差

方法二：C#中使用ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('"+param1+"','"+param2+"')",

 1 示例：
 2 
 3 腳本函數
 4 
 5 function CSharpCallJs(param1,param2)   
 6         {   
 7             alert(param1 + param2);   
 8         }  
 9 
10 頁面后台代碼
11 
12 ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//關鍵代碼調用頁面腳本函數的代碼
13 
14 方法三：C#中使用 Page.RegisterStartupScript("ggg","<script>CSharpCallJs“(”+param1+“,"+param2+“);"</script>");
15 
16 方法四：C#中使用Literal類（類似label類）
17 
18 示例代碼
19 
20 private void Button2_Click(object sender, System.EventArgs e)
21 
22 {
23 
24 string str;
25 
26 str="<script language='javascript'>";
27 
28 str+="selectRange()";
29 
30 str+="</script>";
31 
32 //Literal1.Visible=true;
33 
34 Literal1.Text=str;
35 
36 ｝

View Code

免責聲明！

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

猜您在找 【學習筆記】ASP.NET頁面之間傳值的方式之Session ASP.NET中頁面之間傳值的幾種方式【ASP.NET MVC系列】淺談ASP.NET 頁面之間傳值的幾種方式【學習筆記】ASP.NET頁面之間傳值的方式之Server.Transfer Asp.Net Core MVC控制器和視圖之間傳值 ASP.NET MVC5---通過QueryString傳值 ASP.NET跨頁面傳值——Cookie Asp.NET頁面傳值到Silverlight頁面 asp.net頁面間傳值方式 asp.net 的頁面幾種傳值方式