后台调用 js 方法

前台调用后台方法与变量：

 后台被调用的方法必须是public 或 protected
后台被调用的方法必须是静态的static

方法一：通过WebService来实现

步骤：

后台

Ø  首先引入命名空间（using System.Web.Services;）

Ø  然后定义公共的静态的方法（必须为public和static的,且静态方法不能访问外部的非静态变量，此时后台与前台相当于父类与子类的关系），并在该方法头部上加上[System.Web.Services.WebMethod]，来标注方法特性。

前台

Ø  添加ScriptManager服务器控件，并把其EnablePageMethods属性设为true。

Ø  通过PageMethods方法调用后台定义的public、static方法

 

PageMethods方法简介：

PageMethods.FunctionName(Paramter1,Parameter2,...,funRight,funError, userContext);

1)      Paramter1,Parameter2,...,表示的是FunctionName的参数,类型是Object或Array； 

2)      funRight是方法调用成功后的回调函数，对返回值进行处理

3)      funError是当后台的FunctionName方法发生异常情况下的执行的Js方法（容错处理方法）， 

4)      userContext是可以传递给SuccessMethod方法，或是FailedMethod方法的任意内容。

举例：

后台代码：

　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. using System.Web.Services;
  8. namespace WebApplication4
  9. {
  10. public partial class WebForm10 : System.Web.UI.Page
  11. {
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. }
  15. [WebMethod]
  16. public static string test1(string userName)
  17. {
  18. return "hello "+userName+", 这是通过WebService实现前台调用后台方法";
  19. }
  20. }
  21. }

前台代码：

　　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <%--引入ScriptManager服务器控件--%>
  11. <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
  12. <script type="text/javascript">
  13. function bclick() {
  14. PageMethods.test1("zhipeng", funRight);
  15. }
  16. function funRight(val)       //回调函数，用val接受后台代码test1的执行结果
  17. {
  18. alert(val);
  19. }
  20. </script>
  21. <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”
  22. </form>
  23. </body>
  24. </html>

点击按钮弹出如下对话框：

　　

( 二 )

[WebMethod]

public static string SayHello(string name)

{

return name+"Hello !";

}
<input type="text"  id="SearchKey"  value="" />

 <input id="btnserach" type="button" value="搜索" />

<script type="text/javascript">

      $(function() { 

    $("#btnserach").click(function() {

        $.ajax({

            type: "post", //要用post方式

            url: "Demo.aspx/SayHello",//方法所在页面和方法名

            data: "{'key':'" + $("#SearchKey").val() + "'}",

            contentType: "application/json; charset=utf-8",

            dataType: "json",

            success: function(data) {

                 console.log(data.d);

            },

            error: function(err) {

                alert(err);

            }

        });

    });

});

</script>

方法二：通过<%=methodname()%>和<%#methodname()%>（methodname()为后台定义的方法）

这种方法调用的后台方法可能出现在前台的位置有3种情况：

1)     服务器端控件或HTML控件的属性

2)     客户端js代码中

3)     Html显示内容的位置（它作为占位符把变量显示于符号出现的位置）

这里对两者做简单实例，详细内容在后面文章中介绍

步骤：

后台

Ø  定义public或protected的变量或方法（不能为private）

前台

Ø  直接用<%= %>和<%# %>对后台变量或方法进行调用，两者的用法稍有差异（<%# %>基本上能实现<%= %>的所以功能）

举例：

后台代码：

　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class WebForm1 : System.Web.UI.Page
  10. {
  11. public string name = "我是后台变量";
  12. protected void Page_Load(object sender, EventArgs e)
  13. {
  14. this.DataBind();
  15. }
  16. //不能为private
  17. protected string strTest() {
  18. return "这是前台通过<%# %>调用后台方法";
  19. }
  20. public void  strTest2()
  21. {
  22. Response.Write("这是前台通过<%= %>调用后台方法");
  23. }
  24. }
  25. }

前台代码：

　　

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. </head>
  8. <body>
  9. <form id="form1" runat="server">
  10. <div>
  11. <b>服务器控件</b><br /><br />
  12. 服务器端文本框绑定后台方法：<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />　
  13. ......................变量：<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />　
  14. 服务器端文本框绑定后台方法：<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />
  15. 服务器端文本框绑定后台方法：<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />
  16. <br /><br />
  17. <b>客户端控件</b><br /><br />
  18. 客户端文本框绑定后台方法：<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />　
  19. 客户端标签: <div><%=strTest() %></div>
  20. </div>
  21. </form>
  22. </body>
  23. </html>

运行结果：

　　

<%=methodname()%>和<%#methodname()%>两种方式的详细介绍（联系与区别）会在后面文章中详细介绍。

方法三：通过隐藏服务端按钮来实现

后台代码：

　　

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.UI;
  6. using System.Web.UI.WebControls;
  7. namespace WebApplication4
  8. {
  9. public partial class WebForm11 : System.Web.UI.Page
  10. {
  11. protected void Button1_Click(object sender, EventArgs e)
  12. {
  13. Response.Write("这是通过隐藏控件方式实现前台访问后台方法");
  14. }
  15. }
  16. }

前台代码：

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  6. <title></title>
  7. <script type="text/javascript" >
  8. function test() {
  9. //通过客户端脚本选中隐藏控件，并调用后台相关方法
  10. document.getElementById("Button1").click();
  11. };
  12. </script>
  13. </head>
  14. <body>
  15. <form id="form1" runat="server">
  16. <%--隐藏服务端铵钮--%>
  17. <asp:Button ID="Button1" runat="server" Text="Button" style="display:none"  />
  18. <%--调用客户端脚本，间接调用后台方法--%>
  19. <input id="Button2" type="button" value="button" onclick="test()" />
  20. </form>
  21. </body>
  22. </html>

总结：

　　方法一的后台方法必须声明为public和static（否则会发生PageMethods未定义错误）,正是由于要将方法声明为static,使得这两种方法都有局限性，即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法，后台方法中是不能访问非静态成员变量的。

　　方法二，后台方法没有任何限制，但是前台调用的时候由于<%=%>是只读的，<%=%>适合于调用后台方法经过处理并返回给客户端使用，不适合于将数据传到后台供后台使用

　　后面会讲后台调用前台js代码。。。

aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】的更多相关文章

  1. js前台与后台数据交互-前台调后台

    转自:http://blog.csdn.net/wang379275614/article/details/17033981   网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...

  2. 页面中如何引用外部的HTML（四种方法）

    页面中如何引用外部的HTML(四种方法) 一.总结 一句话总结:a.iframe标签        b.ajax引入代码片段        c.link import的方法导入        d.re ...

  3. 需求：一个页面中需要用到多个字典数据。用于下拉选项，同时，需要将其保存为json格式。以便于key，value的相互转换。记录在实现过程中踩的坑

    本文涉及到的知识: Promise,all()的使用 js处理机制 reduce的用法 map的用法 同步异步 需求: 一个页面中需要用到多个字典数据.用于下拉选项,同时,需要将其保存为json格式. ...

  4. aspx 页面中 js 引用与页面后台的数据交互 --【 后台调用 js 】

    js 中调用后台方法   一.用Response.Write方法 Response.Write("<script type='text/javascript'>alert(&qu ...

  5. JavaScript在页面中的引用方法

    现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...

  6. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  7. 前端必备——js中前端与后台的数据交互全解

    只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...

  8. 页面中引入mui 地址选择，点击页面中其他input时页面回到顶部

    问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...

  9. QtQuick多页面切换、多页面切换动画、多个qml文件数据交互

    一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

  10. Django-前后台的数据交互

    Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...

随机推荐

  1. 虚拟机Linux不能上网简单有效的解决办法

    对于刚开始接触Linux系统的用户来说,先使用虚拟机Linux学习是不错的选择.但是在用虚拟机上网的时候,总是出现这样那样的错误,到底该怎么办呢?本文笔者和大家分享一下虚拟机Linux不能上网的简单有 ...

  2. Python学习笔记-函数基础

    函数基础 定义: 函数是指将一组语句的集合通过一个名字(函数名)封装起来,要想执行这个函数,只需调用其函数名即可 为什么使用函数:减少重复代码.使程序变的可扩展使程序变得易维护 1.定义一个函数 #定 ...

  3. Hadoop集群及基本组件搭建

    本人采用一个master和两个slave的网络结构,具体搭建如下 1.准备安装包 1.下载安装包 http://pan.baidu.com/s/1jIoZulw 2.安装包清单 scala-2.12. ...

  4. Jenkins可用环境变量列表以及环境变量的使用（Shell/Command/Maven/Ant）

    一.可用环境变量列表(以下来自google翻译): BRANCH_NAME 对于多分支项目,这将被设置为正在构建的分支的名称,例如,如果您希望从而master不是从特征分支部署到生产. CHANGE_ ...

  5. 【CSS/JS】如何实现单行／多行文本溢出的省略（...）--老司机绕过坑道的正确姿势

    写前端UI的朋友们也许都遇到过这样的问题:我们需要实现这样一个需求,在一个父级元素中隐藏一个可能过长的文本:   这个文本可能是单行的:   也可能是多行的:   下面我就给大家展示如何简单或优雅地实 ...

  6. 如何优化Spring Cloud微服务注册中心架构？

    作者: 石杉的架构笔记 1.再回顾:什么是服务注册中心? 先回顾一下什么叫做服务注册中心? 顾名思义,假设你有一个分布式系统,里面包含了多个服务,部署在不同的机器上,然后这些不同机器上的服务之间要互相 ...

  7. JVM内存分配和垃圾收集策略

    java内存区域 程序计数器 因为java可以多线程并发执行,因此,为了线程切换后能恢复到正确的执行位置,每个线程都需要一个独立的程序计数器.记录正在执行的虚拟机字节码指令的地址. 这个区域不会产生内 ...

  8. 第51节：Java当中的集合框架Map

    简书作者:达叔小生 Java当中的集合框架Map 01 Map提供了三个集合视图: 键集 值集 键-值 映射集 public String getWeek(int num){ if(num<0 ...

  9. Oracle SQL优化器简介

    目录 一.Oracle的优化器 1.1 优化器简介 1.2 SQL执行过程 二.优化器优化方式 2.1 优化器的优化方式 2.2 基于规则的优化器 2.3 基于成本的优化器 三.优化器优化模式 3.1 ...

  10. Ubuntu下OpenCV版本切换

    1.假如安装了opencv以下两个版本: opencv-2.4.13 opencv-3.2.0 2.安装目录分别为: /usr/local/opencv-2.4.13 /usr/local/openc ...