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也可以)

 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#交互的方法，每一种情况都有对应的解决方法，希望能够帮助到大家。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索javascript
， asp.net
c#
，以便于您获取更多的相关知识。

时间： 2024-09-12 05:52:13

asp.net中javascript与后台c#交互_实用技巧的相关文章

ASP.NET 前台javascript与后台代码调用_实用技巧

ASP.NET中前台javascript与后台代码调用 1如何在JavaScript访问C#函数? 2.如何在JavaScript访问C#变量? 3.如何在C#中访问JavaScript的已有变量? 4.如何在C#中访问JavaScript函数? 问题1答案如下: javaScript函数中执行C#代码中的函数: 方法一:1.首先建立一个按钮,在后台将调用或处理的内容写入button_click中; 2.在前台写一个js函数,内容为document.getElementById("btn1&qu

解决ASP.NET中的各种乱码问题总结_实用技巧

经常发现有人被乱码困扰着,而我感觉比较幸运,很少为此烦恼过. 在这篇博客中,我将把我想到的一些与乱码有关的经验总结出来,供大家参考. 页面显示乱码问题 在一个网站中,有些页面会正常显示,然而,有些页面会显示成乱码. 如果发生这种情况,可以检查一下web.config和文件编码. 如果web.config是这样配置的: <globalization fileEncoding="utf-8" /> 而文件的编码不是UTF-8: 那么就会有乱码问题. 注意:反之是不是会出现乱码的

ASP.NET中Web API的简单实例_实用技巧

一.Web API的路由 1.在Visual Studio中新建MVC4项目,在App_Start目录下有一个WebApiConfig.cs文件,这个文件中就是相应的Web API的路由配置了. 2.Web API 框架默认是基于 Restful 架构模式的,与ASP.NET MVC 有区别的是,它会根据 Http 请求的 HttpMethod(Get.Post.Put.Delete)来在Controller 中查找 Action,规则是:Action 名中是否以Get.Post 开头?Acti

ASP.NET中 script runat server 的用法_实用技巧

本文实例讲述了ASP.NET中<script runat="server">的用法,分享给大家供大家参考.具体如下: 在ASP.NET的.aspx页面中,可以在<head>代码</head>标签中通过<script runat="server">添加代码.其实,这里的代码和.cs文件中的代码地位是相同的,都是在服务器端执行的. 例: 复制代码 代码如下: <script type="text/javas

Asp.net中使用Sqlite数据库的方法_实用技巧

实际运用中当我用SqliteAdmin以及SQLite Expert Professional 2软件新建Sqlite数据库的时候在ASP.NET中是无法运用的,老是报错:文件不是一个合法的数据库.后来采用一种方法,就是直接在ASP.NET里面利用引用入的DLL新建数据库就可以用了. string datasource = "d:\\test.db"; //数据库文件的地址 System.Data.SQLite.SQLiteConnection.CreateFile(datasourc

ASP.net中网站访问量统计方法代码_实用技巧

一.建立一个数据表IPStat用于存放用户信息 我在IPStat表中存放的用户信息只包括登录用户的IP(IP_Address),IP来源(IP_Src)和登录时间(IP_DateTime),些表的信息本人只保存一天的信息,如果要统计每个月的信息则要保存一个月.因为我不太懂对数据日志的操作,所以创建此表,所以说我笨吧,哈哈. 二.在Global.asax中获取用户信息 在Global.asax的Session_Start即新会话启用时获取有关的信息,同时在这里实现在线人数.访问总人数的增量统计,代

asp.net5中用户认证与授权(2)_实用技巧

上篇文章给大家介绍了asp.net5中用户认证与授权(1),基础建立好了,紧接着就要创建对基础类进行操作的类,也就是实现基础类的增删改查当然,为了使用asp.net5的认证机制,这些都是通过特定的接口来实现的. 比如,对于角色来说,角色管理要实现的接口如下: public interface IQueryableRoleStore<TRole> : IRoleStore<TRole>, IDisposable where TRole : class { IQueryable<

ASP.NET中母版页和shtml实例入门_实用技巧

本文较为深入浅出的分析了ASP.NET中母版页和shtml.分享给大家供大家参考.具体分析如下: 母版页 创建和使用母版页: 1. 创建Webform的母版页(MasterPage) 2. 创建使用母版页的窗体(ContentPage). 3. 母版页使用ContentPlaceHolder挖坑,"使用母版页的窗体"用Content填坑 母版页是服务器帮我们将页面拼接response给浏览器的. 但是,母版页太笨重.推荐使用shtml. shtml ServerSideInclude(

ASP.NET中repeater控件用法实例_实用技巧

本文实例讲述了ASP.NET中repeater控件用法.分享给大家供大家参考.具体实现方法如下: repeater绑定数据: 复制代码 代码如下: protected void Page_Load(object sender, EventArgs e) {         if(!IsPostBack)             BindStudent(); } private void BindStudent() {         string str = ConfigurationManag