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. CC初试啼声-----演讲与我

    演讲与我 我非常讨厌演讲,因为我不会演讲,当我站在许多人面前讲话时,我会非常的紧张,我会血压升高,心跳加速,后背冒冷汗. 第一次演讲应该是在我初二的时候,期末考试结束,班级前五名的同学要做一个分享,我 ...

  2. JavaScript 第一章总结

    A quick dip into javascipt The way JavaScript works HTML 用一系列的 markup 来呈现整个 content 的 structure.CSS ...

  3. learn python the hard way 习题6～10总结

    习题6总结 定义字符串: 名字 = 值 其他 你也可以用 {types_of_people}的方式把它放在任何字符串中. 也就是说你可以在其他字符串中添加{},然后前面加一个 f,可用print()进 ...

  4. Confluence 6 修改一个空间从归档到当前

    通过空间目录: 进入头部的 空间(Spaces ) > 空间目录(Space directory). 在左侧 选择 归档的空间(Archived Spaces). 找到你的空间,然后单击右侧的  ...

  5. 4.2 面向对象分析(二) CRC方法标识概念类

    CRC  又称为CRC索引卡片:CRC card  每张卡片代表一个类 Each card represents one class  每张卡片上写出这个类承担的职责.与其合作交互的其他类名   ...

  6. 代码版本控制[version control]之Git

    如何多人协同开发同一个项目? 使用代码版本控制[version control]软件, 目前市面上比较流行的代码版本控制器有: git,svn,csv 1. 使用git管理代码版本 本项目使用git管 ...

  7. HDU - 4456 cdq

    题意:给一个矩阵,两种操作1:修改单点的权值,2:查询和某个点曼哈顿距离小于r点的权值和 题解:先旋转坐标轴,(x,y)->(x-y,x+y)然后就变成了cdq分治裸题,子矩阵和和单点修改一维时 ...

  8. shiro中JSP标签

    Shiro提供了JSTL标签用于在JSP/GSP页面进行权限控制,如根据登录用户显示相应的页面按钮. 导入标签库 <%@taglib prefix="shiro" uri=& ...

  9. 配置ssh免密登录

    安装ssh sudo apt-get install ssh 产生密钥:ssh-keygen -t rsa -P "" -f ~/.ssh/id_rsa (rsa为ssh的加密方式 ...

  10. AWR报告学习示例

    1.  参数1  AAS AAS讲解 elapsed 为 该AWR性能报告的时间跨度 DB_TIME =所有前台session花费在database调用上的总和时间. 注意:前台进程 foregrou ...