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. 从flask视角理解angular（四）Route

    app-routing.modules.ts import { NgModule } from '@angular/core'; import { RouterModule, Routes } fro ...

  2. 牛客国庆集训派对Day3 A Knight

    Knight 思路: bfs打表找规律 如下图 代码: #pragma GCC optimize(2) #pragma GCC optimize(3) #pragma GCC optimize(4) ...

  3. Unity---关于游戏小包的记录

    最近因为需求,出了一个pc版的游戏小包,遇到一些坑,在此做一下记录. 首先需要明白的是出小包的意义所在,其实就是为了压缩包体,游戏需要的大部分资源,在第一次运行游戏的时候通过热更新去FTP资源服务器上 ...

  4. 猫眼电影爬取(三)：requests+pyquery，并将数据存储到mysql数据库

    还是以猫眼电影为例,这次用pyquery库进行爬取 1.简单demo,看看如何使用pyquery提取信息,并将提取到的数据进行组合 # coding: utf-8 # author: hmk impo ...

  5. （转）stm32启动文件详解

    在<<STM32不完全手册里面>>,用的是STM32F103RBT6,所有的例程都采用了一个叫STM32F10x.s的启动文件,里面定义了STM32的堆栈大小以及各种中断的名字 ...

  6. 数据结构（C语言版）-第1章 绪论

  7. RLE Plots: relative log expression

    RLE Plots: Visualising Unwanted Variation in High Dimensional Data 参考:RLE Plots: Visualising Unwante ...

  8. JS获取系统时间--JavaScript基础

    1.网页中实时显示当前时间 <!DOCTYPE html><html lang="en"><head> <meta charset=&qu ...

  9. 20180831xlVBA_WorkbooksCosolidate

    Sub WorkbooksConsolidate() Rem 设置求和区域为 sheet名称/单元格区域;sheet名称/单元格区域 Const Setting As String = "S ...

  10. jQuery -- touch事件之滑动判断（左右上下方向）

    $("body").on("touchstart", function(e) { // 判断默认行为是否可以被禁用 if (e.cancelable) { // ...