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

作者：熊猫大叔 字体：[增加 减小] 类型：转载 时间：2015-10-23我要评论，出处：http://www.jb51.net/article/73793.htm

这篇文章主要介绍了asp.net中javascript与后台c#交互，需要的朋友可以参考下
 

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

1
2
3
4
5
6
7
public string ss()
 
   {
 
   return("a");
 
   }

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

前台脚本

1
2
3
4
5
6
7
<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代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<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文件）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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);
                  });  

示例：

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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服务后台代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
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以下是代码片段：

1
2
3
4
5
6
.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+"')",

示例：

脚本函数

1
2
3
4
function CSharpCallJs(param1,param2)
  {
   alert(param1 + param2);
  }

页面后台代码

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

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

1
2
3
4
5
6
7
8
9
10
11
.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中javascript与后台c#交互的更多相关文章

  1. ASP.NET 前台Javascript调用后台代码 / 后台调用前台Javascript

    1:ASP.NET 前台Javascript调用后台代码 1.1:前台Javascript <script> function CallCs() { var str = "< ...

  2. (二)ASP.NET中JavaScript的中英文（多语言）实现方案（二）

    在ASP.NET中JavaScript的中英文(多语言)实现方案中简单的介绍了js实现多语言的一种方案.下面将要讲述另外一种方法,尽管很相似,但是有些地方也是需要细细琢磨的,不说了,先看看. 在Lan ...

  3. Asp.net中前台javascript与后台C#交互

    方法一:使用Ajax开发框架,后台方法定义前添加[AjaxPro.AjaxMethod],然后就可以在前台js脚本中调用后台C#函数. 方法二:后台方法声明为public或者protected,然后前 ...

  4. ASP.NET中前台调用后台的方法

    学习文章:http://www.cnblogs.com/kingteach/archive/2010/11/12/1875633.html 练习代码: 前台: <html xmlns=" ...

  5. (一)ASP.NET中JavaScript的中英文（多语言）实现方案

    PS: https://github.com/hzlzh/Front-End-Standards/wiki/HTML-CSS-JS-i18n 本文原始思路起源于此网址,请自行查看. 本文只是简单的一个 ...

  6. Asp.net中后台C#数组与前台Javascript数组交互

    摘自:http://blog.csdn.net/a6225301/article/details/20003305 在上一篇<asp.net中javascript与后台c#交互>中实现了前 ...

  7. ASP.NET MVC搭建项目后台UI框架—5、Demo演示Controller和View的交互

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  8. ASP.NET MVC搭建项目后台UI框架—8、将View中选择的数据行中的部分数据传入到Controller中

    目录 ASP.NET MVC搭建项目后台UI框架—1.后台主框架 ASP.NET MVC搭建项目后台UI框架—2.菜单特效 ASP.NET MVC搭建项目后台UI框架—3.面板折叠和展开 ASP.NE ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

随机推荐

  1. 关于AutoMApping 实体映射

    安装AutoMapping包 把订单实体映射成订单DTO实体 .ReverseMap()加上这个方法后 下面自定义 映射规则  第一个就是来源对象 第二个就是目标对象 https://www.cnbl ...

  2. eclipse中配置maven和创建第一个 Spring Boot Application

    关于Maven的下载.环境变量的配置自行百度,今天记录一下在Eclipse中配置Maven的操作: mvn -v 出现上图说明maven和jdk的要求都达到了(jdk要8.0及以上的版本) 然后在ec ...

  3. 学习笔记8—MATLAB中奇异值处理办法

    一.Inf 和 NAN处理 lnf: 无穷大值,可以用islnf或者isfinite函数处理 NAN:不是一个数字,可以用isnan函数来处理 或者:  类似于这种处理 mn(find(mn<= ...

  4. KMP算法（next数组方法）

    KMP算法之前需要说一点串的问题: 串: 字符串:ASCII码为基本数据形成的一堆线性结构. 串是一个线性结构:它的存储形式: typedef struct STRING { CHARACTER *h ...

  5. linux计划任务防暴力破解脚本+免密操作

    1.在root创建satools目录 mkdir satools 2.编辑防破解脚本 vi fpj.sh #!/bin/bash #zsl -xie cat /var/log/secure|awk ' ...

  6. Windows 下 Redis 服务无法启动，错误 1067 进程意外终止解决方案

    1.检查端口是否被占用 2.修改 Windows 服务里的 Redis 服务为本地系统服务(修改方式见下文) 方法: 1.看系统日志 桌面计算机/此电脑(Win10名称)右键打开管理,或 Win+R ...

  7. JavaScript 第九章总结

    Handing events 前言 这一章节主要讲了关于 events 的内容,讲了 event 的定义,以及如何用 code 来 react to events.同时,也说明了 JavaScript ...

  8. Jedis与Lua脚本结合

    使用Lua脚本的好处    1.减少网络开销:可以将多个请求通过脚本的形式一次发送,减少网络时延和请求次数. 2.原子性的操作:Redis会将整个脚本作为一个整体执行,中间不会被其他命令插入.因此在编 ...

  9. LeetCode--441--排列硬币

    问题描述: 你总共有 n 枚硬币,你需要将它们摆成一个阶梯形状,第 k 行就必须正好有 k 枚硬币. 给定一个数字 n,找出可形成完整阶梯行的总行数. n 是一个非负整数,并且在32位有符号整型的范围 ...

  10. Bitmap Byte[] 互转

    严正声明:作者:psklf出处: http://www.cnblogs.com/psklf/p/5889978.html欢迎转载,但未经作者同意,必须保留此段声明:必须在文章中给出原文连接:否则必究法 ...