最近做一個(gè)小項(xiàng)目,網(wǎng)頁(yè)中嵌入google maps,輸入經(jīng)緯度坐標(biāo)可以定位地圖位置并加注標(biāo)記,點(diǎn)擊標(biāo)記獲取遠(yuǎn)端攝像頭數(shù)據(jù)并在視頻窗口實(shí)現(xiàn)播放。在實(shí)際操作過(guò)程中,由于經(jīng)緯度數(shù)據(jù)和視頻登錄的用戶名密碼數(shù)據(jù)均要從后臺(tái)數(shù)據(jù)庫(kù)中提取,而第三版的google maps api又是在javascript中實(shí)現(xiàn)的,因此不可避免的需要前端腳本與后臺(tái)進(jìn)行交互。由于是在asp.net中實(shí)現(xiàn),故問(wèn)題演化成asp.net中javascript與后臺(tái)c#如何進(jìn)行交互。
C#代碼與javaScript函數(shù)的相互調(diào)用主要有四個(gè)方面:
1.如何在JavaScript訪問(wèn)C#函數(shù)?
2.如何在JavaScript訪問(wèn)C#變量?
3.如何在C#中訪問(wèn)JavaScript的已有變量?
4.如何在C#中訪問(wèn)JavaScript函數(shù)?
一、javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù):
方法一:頁(yè)面和頁(yè)面類結(jié)合
1、函數(shù)聲明為public
后臺(tái)代碼(把public改成protected也可以)
public string ss() { return("a"); }
2、在html里用<%=ss()%>可以調(diào)用//是C#中后臺(tái)的函數(shù)名稱
前臺(tái)腳本
<script language=javascript> var a = "<%=ss()%>";//JavaScript中調(diào)用C#后臺(tái)的函數(shù) alert(a); </script>
方法二: JavaScript異步調(diào)用定義在ASP.Net頁(yè)面中的方法
1.將該方法聲明為公有(public);
2.將該方法聲明為類方法(C#中的static,VB.NET中的Shared),而不是實(shí)例方法;
3.將該方法添加【W(wǎng)ebMethod】屬性
4.將頁(yè)面中ScriptManager控件的EnablePageMethods屬性設(shè)置為true;
5.在客戶端使用如下JavaScript語(yǔ)法調(diào)用該頁(yè)面方法
PageMethods.[MethodName](param1,param2,...,callbackFunction);
6.為客戶端異步調(diào)用指定回調(diào)函數(shù),在回調(diào)函數(shù)中接受返回值并進(jìn)一步處理;
7.添加 using System.Web.Services;
示例:
前臺(tái)JavaScript代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無(wú)標(biāo)題頁(yè)</title> <script type="text/javascript"> function JsCallCSharp(param1) { PageMethods.sayhell(param1,onSayHelloSucceeded);//sayhell是后臺(tái)標(biāo)注了【webMethod】屬性的方法 param1是傳入該方法的參數(shù),onSayHelloSucceeded是回調(diào)函數(shù)主要是對(duì)后臺(tái)返回的結(jié)果進(jìn)一步處理 } function onSayHelloSucceeded(result)//綁定的回調(diào)函數(shù) { alert(result); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">//ScriptManager控件管理腳本的,注意設(shè)置EnablePageMethods="true"此屬性 </asp:ScriptManager> <div> <input type="button" onclick="JsCallCSharp('hello')" /> </div> </form> </body> </html>
后臺(tái)代碼(.cs文件)
using System; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; using System.Web.Services;//添加web服務(wù)引用 public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } [WebMethod]//標(biāo)示為web服務(wù)方法屬性 public static string sayhell(string say)//注意函數(shù)的修飾符,只能是靜態(tài)的 { return say; } }
方法三: JavaScript異步調(diào)用定義在Web服務(wù)類中的方法
1.添加一個(gè)web服務(wù)標(biāo)示該服務(wù)為 允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù)
對(duì)應(yīng)屬性為[System.Web.Script.Services.ScriptService]
2.將該方法聲明public并將該方法標(biāo)示為[webMethod]屬性方法
3.在頁(yè)面中ScriptManager控件并添加web服務(wù)引用
<Services><asp:ServiceReferencePath="~/WebService.asmx" /></Services>
4.在客戶端使用如下JavaScript語(yǔ)法調(diào)用web服務(wù)方法
WebService.HelloWorld("helloWord",function(res)//Webservice是web服務(wù)頁(yè)面名稱
HelloWord為web服務(wù)頁(yè)面類中的方 法,function為回調(diào)JavaScript函數(shù)主要是處理返回的結(jié)果
{
alert(res);
});
示例:
頁(yè)面代碼
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>無(wú)標(biāo)題頁(yè)</title> <script type="text/javascript"> function JsCallCSharp(param1) { PageMethods.sayhell(param1,onSayHelloSucceeded); } function onSayHelloSucceeded(result) { alert(result); } //該方法為調(diào)用的函數(shù) function JsCallWebService() { WebService.HelloWorld("helloWord",function(res)//調(diào)用web服務(wù) { alert(res); }); } </script> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" > <Services><asp:ServiceReference Path="~/WebService.asmx" /></Services>//注意要引用web服務(wù) </asp:ScriptManager> <div> <input type="button" onclick="JsCallCSharp('hello')" value="測(cè)試C#后臺(tái)頁(yè)" /> <input type="button" onclick="JsCallWebService()" value="測(cè)試web后臺(tái)類" /> </div> </form> </body> </html>
web服務(wù)后臺(tái)代碼
using System; using System.Collections; using System.Linq; using System.Web; using System.Web.Services; using System.Web.Services.Protocols; using System.Xml.Linq; /// <summary> ///WebService 的摘要說(shuō)明 /// </summary> [WebService(Namespace = "http://tempuri.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] //若要允許使用 ASP.NET AJAX 從腳本中調(diào)用此 Web 服務(wù),請(qǐng)取消對(duì)下行的注釋。 [System.Web.Script.Services.ScriptService]//注意要添加該標(biāo)示 public class WebService : System.Web.Services.WebService { public WebService () { //如果使用設(shè)計(jì)的組件,請(qǐng)取消注釋以下行 //InitializeComponent(); } [WebMethod]//方法要標(biāo)示的屬性 public string HelloWorld(string result) { return result; } }
二、JavaScript訪問(wèn)C#變量
方法一:
a、通過(guò)頁(yè)面上隱藏域訪問(wèn),可以在后臺(tái)把c#變量值保存到隱藏文本域當(dāng)中。
<input id="xx" type="hidden" runat="server">
b、然后在前臺(tái)javascript當(dāng)中直接取隱藏文本域的值。
document.getElementByIdx_x('xx').value
方法二:
a、在服務(wù)器端變量賦值后在頁(yè)面注冊(cè)腳本
Page.RegisterStartScript(" ","<script language='javascript'>var vary=" + value + "</script>");
value是后臺(tái)變量,然后javascript中可以直接訪問(wèn)vary值,它的值就是后臺(tái)變量value的值,這種方式只不過(guò)是能過(guò)一種間接的方式來(lái)訪問(wèn)c#變量。
三、C#中訪問(wèn)JavaScript的已有變量
方法一:前臺(tái)使用服務(wù)器文本控件隱藏域,將js變量值寫(xiě)入其中;后臺(tái)直接通過(guò)控件id訪問(wèn)和調(diào)用,即后臺(tái)用Request["id"]來(lái)獲取值。
方法二:可以用cookie或session存儲(chǔ)變量值,后臺(tái)直接使用
使用session以下是代碼片段:
.cs if (Session["siteName"] == null)//判斷是否存在指定Key值的Session變量 Session["siteName"] = "";//如果不存在則創(chuàng)建Session變量 //給Session["siteName"]變量賦值 .aspx var siteName="<%=Session["siteName"] %>";
四、C#代碼執(zhí)行JavaScript函數(shù)和調(diào)用JavaScript函數(shù)
方法一:C#中使用ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('"+param1+"','"+param2+"')",
示例:
腳本函數(shù)
function CSharpCallJs(param1,param2) { alert(param1 + param2); }
頁(yè)面后臺(tái)代碼
ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//關(guān)鍵代碼調(diào)用頁(yè)面腳本函數(shù)的代碼
方法二:使用隱藏域或者Literal控件,在前臺(tái)使用js腳本把一些js函數(shù)控制的值寫(xiě)進(jìn)隱藏域或者Literal控件,然后前臺(tái)使用Hidden.Value或者Literal.Text讀取前臺(tái)值。
以下是代碼片段:
.aspx function GetTitleID(obj) { sTitleID=obj if(sTitleID!=null) document.getElementByIdx_x("HiddenField1").value=type+','+sTitleID; else document.getElementByIdx_x("HiddenField1").value=type+',0'; } .cs string hiddenValue = this.HiddenField1.Value;
方法三:Page.RegisterStartupScript("function","<script>你要調(diào)用的javascript函數(shù)名稱;</script>");
聲明:本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí),若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系,我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com