asp.net中javascript與后臺(tái)c#交互
最近做一個(gè)小項(xiàng)目，網(wǎng)頁中嵌入google maps，輸入經(jīng)緯度坐標(biāo)可以定位地圖位置并加注標(biāo)記，點(diǎn)擊標(biāo)記獲取遠(yuǎn)端攝像頭數(shù)據(jù)并在視頻窗口實(shí)現(xiàn)播放。在實(shí)際操作過程中，由于經(jīng)緯度數(shù)據(jù)和視頻登錄的用戶名密碼數(shù)據(jù)均要從后臺(tái)數(shù)據(jù)庫中提取，而第三版的google maps api又是在javascript中實(shí)現(xiàn)的，因此不可避免的需要前端腳本與后臺(tái)進(jìn)行交互。由于是在asp.net中實(shí)現(xiàn)，故問題演化成asp.net中javascript與后臺(tái)c#如何進(jìn)行交互。
C#代碼與javaScript函數(shù)的相互調(diào)用主要有四個(gè)方面：
1.如何在JavaScript訪問C#函數(shù)?
2.如何在JavaScript訪問C#變量?
3.如何在C#中訪問JavaScript的已有變量?
4.如何在C#中訪問JavaScript函數(shù)?
一、javaScript函數(shù)中執(zhí)行C#代碼中的函數(shù)：
方法一：頁面和頁面類結(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頁面中的方法
1.將該方法聲明為公有(public);
2.將該方法聲明為類方法(C#中的static,VB.NET中的Shared),而不是實(shí)例方法;
3.將該方法添加【W(wǎng)ebMethod】屬性
4.將頁面中ScriptManager控件的EnablePageMethods屬性設(shè)置為true;
5.在客戶端使用如下JavaScript語法調(diào)用該頁面方法
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>無標(biāo)題頁</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.在頁面中ScriptManager控件并添加web服務(wù)引用
<Services><asp:ServiceReferencePath="~/WebService.asmx" /></Services>
4.在客戶端使用如下JavaScript語法調(diào)用web服務(wù)方法
WebService.HelloWorld("helloWord",function(res)//Webservice是web服務(wù)頁面名稱
HelloWord為web服務(wù)頁面類中的方 法，function為回調(diào)JavaScript函數(shù)主要是處理返回的結(jié)果
{
alert(res);
});
示例：
頁面代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>無標(biāo)題頁</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)頁" />
<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 的摘要說明
/// </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訪問C#變量
方法一：
a、通過頁面上隱藏域訪問,可以在后臺(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ù)器端變量賦值后在頁面注冊(cè)腳本
Page.RegisterStartScript(" ","<script language='javascript'>var vary=" + value + "</script>");
value是后臺(tái)變量，然后javascript中可以直接訪問vary值,它的值就是后臺(tái)變量value的值，這種方式只不過是能過一種間接的方式來訪問c#變量。
三、C#中訪問JavaScript的已有變量
方法一：前臺(tái)使用服務(wù)器文本控件隱藏域，將js變量值寫入其中；后臺(tái)直接通過控件id訪問和調(diào)用，即后臺(tái)用Request["id"]來獲取值。
方法二：可以用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);
}
頁面后臺(tái)代碼
ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//關(guān)鍵代碼調(diào)用頁面腳本函數(shù)的代碼
方法二：使用隱藏域或者Literal控件，在前臺(tái)使用js腳本把一些js函數(shù)控制的值寫進(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>");
以上就是asp.net中javascript與后臺(tái)c#交互的方法，每一種情況都有對(duì)應(yīng)的解決方法，希望能夠幫助到大家。
- C#實(shí)現(xiàn)在前端網(wǎng)頁彈出警告對(duì)話框（alert）的方法
- C#使用后臺(tái)線程BackgroundWorker處理任務(wù)的總結(jié)
- 微信小程序支付之c#后臺(tái)實(shí)現(xiàn)方法
- webBrowser執(zhí)行js的方法,并返回值,c#后臺(tái)取值的實(shí)現(xiàn)
- C#后臺(tái)接受前臺(tái)JSON字符串裝換成字典集合處理
- C# WinForm程序處理后臺(tái)繁忙導(dǎo)致前臺(tái)控件假死現(xiàn)象解決方法
- 基于C#后臺(tái)調(diào)用跨域MVC服務(wù)及帶Cookie驗(yàn)證的實(shí)現(xiàn)
- C#前端驗(yàn)證和后臺(tái)驗(yàn)證代碼實(shí)例
相關(guān)文章
asp.net動(dòng)態(tài)加載自定義控件的方法
這篇文章主要介紹了asp.net動(dòng)態(tài)加載自定義控件的方法,涉及asp.net動(dòng)態(tài)加載控件的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
Asp.Net Core實(shí)現(xiàn)Excel導(dǎo)出功能的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于Asp.Net Core實(shí)現(xiàn)Excel導(dǎo)出功能的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
ASP.net中獲取客戶端參數(shù)操作系統(tǒng)信息
這篇文章主要介紹了ASP.net中如何獲取客戶端參數(shù)或操作系統(tǒng)信息,需要的朋友可以參考下2014-03-03
這篇文章主要為大家詳細(xì)介紹了Visual Studio 2015全英界面切換成中文界面的具體步驟,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
ASP.NET Core依賴注入系列教程之服務(wù)的注冊(cè)與提供
這篇文章主要給大家介紹了關(guān)于ASP.NET Core依賴注入系列教程之服務(wù)的注冊(cè)與提供的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起看看吧2018-11-11
ASP.NET實(shí)現(xiàn)根據(jù)URL生成網(wǎng)頁縮略圖的方法
這篇文章主要介紹了ASP.NET實(shí)現(xiàn)根據(jù)URL生成網(wǎng)頁縮略圖的方法,結(jié)合實(shí)例較為詳細(xì)的分析了asp.net生成網(wǎng)頁縮略圖的詳細(xì)實(shí)現(xiàn)技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-11-11
ASP.NET 2.0下的條件編譯...2006-09-09
ASP.NET：設(shè)置頁面buffer引出來的問題...2006-09-09
Asp.net中Microsoft.Identity的IPasswordHasher加密的默認(rèn)實(shí)現(xiàn)與運(yùn)用
本文主要介紹了Microsoft.Identity的IPasswordHasher加密的默認(rèn)實(shí)現(xiàn)與運(yùn)用。具有很好的參考價(jià)值，下面跟著小編一起來看下吧2017-02-02
asp.net DataFormatString格式化GridView
在GridView里面顯示數(shù)據(jù),要顯示的數(shù)據(jù)有好多位小數(shù),就想讓它只顯示兩位小數(shù),在delphi里,直接用DisplayFormat就行了,2009-08-08