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. 学习笔记8—MATLAB中奇异值处理办法

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

  2. CSS 控制鼠标在元素停留的样式

    以下资料来自网络,收藏学习总结用: 有时候需要改变鼠标样式,DIV 可以改成手型等,A也可以改成光标形式 巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊.CSS鼠标样式 ...

  3. AtCoder Beginner Contest 113 D Number of Amidakuji

    Number of Amidakuji 思路:dp dp[i][j]表示经过(i, j) 这个点的方案数 然后一层一层地转移, 对于某一层, 用二进制枚举这一层的连接情况, 判断连接是否符合题意, 然 ...

  4. Unity --- 纹理为什么要设置为2的N次方

    1.图片的纹理像素在Unity3D中需要遵循2的N次方,由图形学决定的,只识别2的N次方.   非2的N次方的图片会转化为2的N次方图片(500 x 500 → 512 x 512),是因为转化过程比 ...

  5. Getting started with Processing 第九章总结

    函数 函数的力量在于模块化. 范例 掷骰子 rollDice()函数 rollDice(int numSides){int d = 1+int(random(numSides));println(&q ...

  6. English trip M1 - AC3 Teacher:Corrine

    课堂上内容 16,black,games The clothes is Only $. is lucky number in China. God give us black eyes,but we ...

  7. LeetCode--443--压缩字符串(未看)

    问题描述: 给定一组字符,使用原地算法将其压缩. 压缩后的长度必须始终小于或等于原数组长度. 数组的每个元素应该是长度为1 的字符(不是 int 整数类型). 在完成原地修改输入数组后,返回数组的新长 ...

  8. uva11552

    将字符串分为len/k块.用dp[i][j]表示第i个块必须以j结尾的最小划分.当第i块没有字符j时,dp[i][j]多计一个.如果当前块只有1种字符,那么就等于dp[i-1][j].否则对于第i块的 ...

  9. Android Error:Could not find lottie.jar

    Android Error:Could not find lottie.jar 今天遇到了一个及其头疼的问题 同事的工程导到我的电脑里却报错,错误是找不到jcenter仓库里的lottie.jar包 ...

  10. 373. Find K Pairs with Smallest Sums （java，优先队列）

    题目: You are given two integer arrays nums1 and nums2 sorted in ascending order and an integer k. Def ...