asp.net中javascript与后台c#交互

2019-05-22 23:58:38于丽

最近做一个小项目,网页中嵌入google maps,输入经纬度坐标可以定位地图位置并加注标记,点击标记获取远端摄像头数据并在视频窗口实现播放。在实际操作过程中,由于经纬度数据和视频登录的用户名密码数据均要从后台数据库中提取,而第三版的google maps api又是在javascript中实现的,因此不可避免的需要前端脚本与后台进行交互。由于是在asp.net中实现,故问题演化成asp.net中javascript与后台c#如何进行交互。

C#代码与javaScript函数的相互调用主要有四个方面:

1.如何在JavaScript访问C#函数?

2.如何在JavaScript访问C#变量?

3.如何在C#中访问JavaScript的已有变量?

4.如何在C#中访问JavaScript函数?

一、javaScript函数中执行C#代码中的函数:
方法一:页面和页面类结合
1、函数声明为public            

      后台代码(把public改成protected也可以)

 public string ss()

    {

    return("a");

    }

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

      前台脚本

 <script language=javascript>

    var a = "<%=ss()%>";//JavaScript中调用C#后台的函数

    alert(a);

    </script> 


方法二: 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; 

示例:

前台JavaScript代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>无标题页</title>

 <script type="text/javascript">
 function JsCallCSharp(param1)
 {   
  PageMethods.sayhell(param1,onSayHelloSucceeded);//sayhell是后台标注了【webMethod】属性的方法 param1是传入该方法的参数,onSayHelloSucceeded是回调函数主要是对后台返回的结果进一步处理
 }  
 function onSayHelloSucceeded(result)//绑定的回调函数 
 { 
 alert(result);
 } 

 </script>

</head>
<body>
 <form id="form1" runat="server">
 <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true">//ScriptManager控件管理脚本的,注意设置EnablePageMethods="true"此属性
 </asp:ScriptManager>
 <div>
  <input type="button" onclick="JsCallCSharp('hello')" />
 </div>
 </form>
</body>
</html>