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

2024-10-03 22:59:54

最近做一个小项目，网页中嵌入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>

后台代码（.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服务引用

public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {

 }
 [WebMethod]//标示为web服务方法属性
 public static string sayhell(string say)//注意函数的修饰符,只能是静态的
 {
  return say;
 }
}

方法三： JavaScript异步调用定义在Web服务类中的方法

1.添加一个web服务标示该服务为允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务

对应属性为[System.Web.Script.Services.ScriptService]

2.将该方法声明public并将该方法标示为[webMethod]属性方法
3.在页面中ScriptManager控件并添加web服务引用

<Services><asp:ServiceReferencePath="~/WebService.asmx" /></Services>

4.在客户端使用如下JavaScript语法调用web服务方法

WebService.HelloWorld("helloWord",function(res)//Webservice是web服务页面名称

HelloWord为web服务页面类中的方法，function为回调JavaScript函数主要是处理返回的结果
                {
               alert(res);
                  });

示例：

页面代码

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

 <script type="text/javascript">
 function JsCallCSharp(param1)
 {
  PageMethods.sayhell(param1,onSayHelloSucceeded);
 }
 function onSayHelloSucceeded(result)
 {
 alert(result);
 } 

//该方法为调用的函数
 function JsCallWebService()
 {
  WebService.HelloWorld("helloWord",function(res)//调用web服务
  {
  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服务
 </asp:ScriptManager>
 <div>
  <input type="button" onclick="JsCallCSharp('hello')" value="测试C#后台页" />
  <input type="button" onclick="JsCallWebService()" value="测试web后台类" />
 </div>
 </form>
</body>
</html>

web服务后台代码

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 从脚本中调用此 Web 服务，请取消对下行的注释。
 [System.Web.Script.Services.ScriptService]//注意要添加该标示
public class WebService : System.Web.Services.WebService {

 public WebService () {

  //如果使用设计的组件，请取消注释以下行
  //InitializeComponent();
 }

 [WebMethod]//方法要标示的属性
 public string HelloWorld(string result) {
  return result;
 }

}

二、JavaScript访问C#变量
方法一：
　　a、通过页面上隐藏域访问,可以在后台把c#变量值保存到隐藏文本域当中。

　　<input id="xx" type="hidden" runat="server">
　　b、然后在前台javascript当中直接取隐藏文本域的值。
　　 document.getElementByIdx_x('xx').value

方法二：
　　a、在服务器端变量赋值后在页面注册脚本
　　Page.RegisterStartScript(" ","<script language='javascript'>var vary=" + value + "</script>");
　　value是后台变量，然后javascript中可以直接访问vary值,它的值就是后台变量value的值，这种方式只不过是能过一种间接的方式来访问c#变量。
三、C#中访问JavaScript的已有变量
方法一：前台使用服务器文本控件隐藏域，将js变量值写入其中；后台直接通过控件id访问和调用，即后台用Request["id"]来获取值。

方法二：可以用cookie或session存储变量值，后台直接使用
使用session以下是代码片段：

.cs
if (Session["siteName"] == null)//判断是否存在指定Key值的Session变量
Session["siteName"] = "";//如果不存在则创建Session变量
//给Session["siteName"]变量赋值
.aspx
var siteName="<%=Session["siteName"] %>";

四、C#代码执行JavaScript函数和调用JavaScript函数
方法一：C#中使用ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('"+param1+"','"+param2+"')",

示例：

脚本函数

function CSharpCallJs(param1,param2)
  {
   alert(param1 + param2);
  }

页面后台代码

ScriptManager.RegisterStartupScript(this, this.GetType(), "edit", "CSharpCallJs('" + param1 + "','" + param2 + "');", true);//关键代码调用页面脚本函数的代码

方法二：使用隐藏域或者Literal控件，在前台使用js脚本把一些js函数控制的值写进隐藏域或者Literal控件，然后前台使用Hidden.Value或者Literal.Text读取前台值。
以下是代码片段：

 .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>你要调用的javascript函数名称;</script>");

以上就是asp.net中javascript与后台c#交互的方法，每一种情况都有对应的解决方法，希望能够帮助到大家。

asp.net C#生成和解析二维码的实例代码

类库文件我们在文件最后面下载 [ThoughtWorks.QRCode.dll 就是类库] 使用时需要增加: 复制代码代码如下: using ThoughtWorks.QRCode.Codec; using ThoughtWorks.QRCode.Codec.Data; using ThoughtWorks.QRCode.Codec.Util; 主要源代码: 1.生成二维码复制代码代码如下: QRCodeEncoder qrCodeEncoder = new QRCodeEncoder()
Asp.Net(C#)自动执行计划任务的程序实例分析分享

在业务复杂的应用程序中,有时候会要求一个或者多个任务在一定的时间或者一定的时间间隔内计划进行,比如定时备份或同步数据库,定时发送电子邮件等,我们称之为计划任务.实现计划任务的方法也有很多,可以采用SQLAgent执行存储过程来实现,也可以采用Windows任务调度程序来实现,也可以使用Windows服务来完成我们的计划任务,这些方法都是很好的解决方案.但是,对于Web应用程序来说,这些方法实现起来并不是很简单的,主机服务提供商或者不能直接提供这样的服务,或者需要你支付许多额外的费用. 本文就介绍
asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码实例

本文实例讲述了asp.net(C#)使用QRCode生成图片中心加Logo或图像的二维码.分享给大家供大家参考,具体如下: <%@ WebHandler Language="C#" Class="GetQRCode" %> using System; using System.Web; using ThoughtWorks.QRCode.Codec; using ThoughtWorks.QRCode.Codec.Data; using ThoughtW
asp.net中c#自定义事件的实现方法详解

本文实例讲述了asp.net中c#自定义事件的实现方法.分享给大家供大家参考.具体分析如下: c#自定义事件分为六步,声明关于事件的委托,声明事件,编写引发事件的函数,事件处理,这里我们就来具体的介绍一下. C#自定义事件的具体实现步骤如下: 1.声明一个delegate: (用于事件的类型的定义) 如: 复制代码代码如下: public delegate void 事件名称EventHandler(object serder, EventArgs e); 事件名称用你的自己的来代替,随后的E
ASP.NET(C#) Web Api通过文件流下载文件的实例

下载文件到本地是很多项目开发中需要实现的一个很简单的功能.说简单,是从具体的代码实现上来说的,.NET的文件下载方式有很多种,本示例给大家介绍的是ASP.NET Web Api方式返回HttpResponseMessage下载文件到本地.实现的方法很简单,其中就是读取服务器的指定路径文件流,将其做为返回的HttpResponseMessage的Content.直接贴出DownloadController控件器的代码: using System; using System.Collections.
ASP.NET/C#中如何调用动态链接库DLL

动态链接库(也称为DLL,即为"Dynamic Link Library"的缩写)是Microsoft Windows最重要的组成要素之一,打开Windows系统文件夹,你会发现文件夹中有很多DLL文件,Windows就是将一些主要的系统功能以DLL模块的形式实现. 动态链接库是不能直接执行的,也不能接收消息,它只是一个独立的文件,其中包含能被程序或其它DLL调用来完成一定操作的函数(方法.注:C#中一般称为"方法"),但这些函数不是执行程序本身的一部分,而是根据进
asp.net C#实现解压缩文件的方法

本文实例讲述了asp.net C#实现解压缩文件的方法.一共给大家介绍了三段代码,一个是简单的解压缩单个zip文件,后一个可以解压批量的大量的但需要调用ICSharpCode.SharpZipLib.dll类了,最后一个比较实例可压缩也可以解压缩了分享给大家供大家参考.具体如下: 解压缩单个文件: 复制代码代码如下: using System.IO; using System.IO.Compression; string sourceFile=@"D:2.zip"; string d
asp.net中C#实现手动回收内存的方法

C#有自动回收内存的机制,但是有时自动回收有一定滞后,需要在变量使用后迅速回收,节约内存,这里介绍一个最简单的方法. 1.先对对象赋值 null; 2.使用System.GC.Collect() 复制代码代码如下: class Program { static void Main(string[] args) { long lenth = 1024 * 1024 * 128; GetCost("程序启动
asp.net C#检查URL是否有效的方法

我们有时候需要对用户输入的网站(URL)进行有效性检查, 复制代码代码如下: function CheckUrl(str) { var RegUrl = new RegExp(); RegUrl.compile("^[A-Za-z]+://[A-Za-z0-9-_]+\.[A-Za-z0-9-_%&?/.=]+$"); if (!RegUrl.test(str)) { return false; } return true;} 不止
ASP.NET中的C#基础知识

说明:asp.net作为一种开发框架现在已经广为应用,其开发的基础除了前端的html.css.JavaScript等后端最重要的语言支持还是C#,下面将主要用到的基础知识做一个总结,方面后面的学习. 一.C#是一种面向对象的编程语言,主要用于开发可以在.net平台上运行的应用程序.是一种强类型语言,因此每个变量都必须具有声明类型.C#中有两种数据类型:值类型和引用类型.(其中值类型用于存储值,引用类型用于存储实际数据的引用). 1.值类型值类型表示实际的数据,存储在栈堆中.C#中多数基本类型都

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

相关推荐

随机推荐