aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】
前台调用后台方法与变量:
方法一:通过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方法的任意内容。
举例:
后台代码:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- using System.Web.Services;
- namespace WebApplication4
- {
- public partial class WebForm10 : System.Web.UI.Page
- {
- protected void Page_Load(object sender, EventArgs e)
- {
- }
- [WebMethod]
- public static string test1(string userName)
- {
- return "hello "+userName+", 这是通过WebService实现前台调用后台方法";
- }
- }
- }
前台代码:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm10.aspx.cs" Inherits="WebApplication4.WebForm10" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <%--引入ScriptManager服务器控件--%>
- <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
- <script type="text/javascript">
- function bclick() {
- PageMethods.test1("zhipeng", funRight);
- }
- function funRight(val) //回调函数,用val接受后台代码test1的执行结果
- {
- alert(val);
- }
- </script>
- <input id="Button1" type="button" value="方法测试" onclick="bclick()" />//点击按钮会弹出对话框“通过WebService实现前台调用后台方法”
- </form>
- </body>
- </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)
前台
Ø 直接用<%= %>和<%# %>对后台变量或方法进行调用,两者的用法稍有差异(<%# %>基本上能实现<%= %>的所以功能)
举例:
后台代码:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- namespace WebApplication4
- {
- public partial class WebForm1 : System.Web.UI.Page
- {
- public string name = "我是后台变量";
- protected void Page_Load(object sender, EventArgs e)
- {
- this.DataBind();
- }
- //不能为private
- protected string strTest() {
- return "这是前台通过<%# %>调用后台方法";
- }
- public void strTest2()
- {
- Response.Write("这是前台通过<%= %>调用后台方法");
- }
- }
- }
前台代码:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>
- <b>服务器控件</b><br /><br />
- 服务器端文本框绑定后台方法:<asp:TextBox ID="TextBox1" runat="server" Text="<%#strTest()%>"></asp:TextBox><%=strTest()%><br />
- ......................变量:<asp:TextBox ID="TextBox2" runat="server" Text="<%#name%>"></asp:TextBox><br />
- 服务器端文本框绑定后台方法:<asp:Label ID="Label1" runat="server" Text="Label"><%=strTest()%></asp:Label><br />
- 服务器端文本框绑定后台方法:<asp:Label ID="Label2" runat="server" Text="<%#strTest() %>"></asp:Label><br /><br />
- <br /><br />
- <b>客户端控件</b><br /><br />
- 客户端文本框绑定后台方法:<input id="Text1" type="text" value="<%#strTest()%>" /><%=name %><br />
- 客户端标签: <div><%=strTest() %></div>
- </div>
- </form>
- </body>
- </html>
运行结果:
<%=methodname()%>和<%#methodname()%>两种方式的详细介绍(联系与区别)会在后面文章中详细介绍。
方法三:通过隐藏服务端按钮来实现
后台代码:
- using System;
- using System.Collections.Generic;
- using System.Linq;
- using System.Web;
- using System.Web.UI;
- using System.Web.UI.WebControls;
- namespace WebApplication4
- {
- public partial class WebForm11 : System.Web.UI.Page
- {
- protected void Button1_Click(object sender, EventArgs e)
- {
- Response.Write("这是通过隐藏控件方式实现前台访问后台方法");
- }
- }
- }
前台代码:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm11.aspx.cs" Inherits="WebApplication4.WebForm11" %>
- <!DOCTYPE html>
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <script type="text/javascript" >
- function test() {
- //通过客户端脚本选中隐藏控件,并调用后台相关方法
- document.getElementById("Button1").click();
- };
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <%--隐藏服务端铵钮--%>
- <asp:Button ID="Button1" runat="server" Text="Button" style="display:none" />
- <%--调用客户端脚本,间接调用后台方法--%>
- <input id="Button2" type="button" value="button" onclick="test()" />
- </form>
- </body>
- </html>
总结:
方法一的后台方法必须声明为public和static(否则会发生PageMethods未定义错误),正是由于要将方法声明为static,使得这两种方法都有局限性,即静态方法中只允许访问静态成员变量。所以要想用这两种方式调用后台方法,后台方法中是不能访问非静态成员变量的。
方法二,后台方法没有任何限制,但是前台调用的时候由于<%=%>是只读的,<%=%>适合于调用后台方法经过处理并返回给客户端使用,不适合于将数据传到后台供后台使用
后面会讲后台调用前台js代码。。。
aspx 页面中 js 引用与页面后台的数据交互 --【 js 调后台】的更多相关文章
- js前台与后台数据交互-前台调后台
转自:http://blog.csdn.net/wang379275614/article/details/17033981 网站是围绕数据库来编程的,以数据库中的数据为中心,通过后台来操作这些数 ...
- 页面中如何引用外部的HTML(四种方法)
页面中如何引用外部的HTML(四种方法) 一.总结 一句话总结:a.iframe标签 b.ajax引入代码片段 c.link import的方法导入 d.re ...
- 需求:一个页面中需要用到多个字典数据。用于下拉选项,同时,需要将其保存为json格式。以便于key,value的相互转换。记录在实现过程中踩的坑
本文涉及到的知识: Promise,all()的使用 js处理机制 reduce的用法 map的用法 同步异步 需求: 一个页面中需要用到多个字典数据.用于下拉选项,同时,需要将其保存为json格式. ...
- aspx 页面中 js 引用与页面后台的数据交互 --【 后台调用 js 】
js 中调用后台方法 一.用Response.Write方法 Response.Write("<script type='text/javascript'>alert(&qu ...
- JavaScript在页面中的引用方法
现在前端开发越来越流行,框架也越来越多,像ExtJs.JQuery.Bootstrap等.虽然入行这么多年,但是感觉自己在前端方面还是存在基础不牢的地方,特别是CSS和JS.因此最近打算重新阅读这方面 ...
- 基础篇:1.JavaScript运行在html中,引用有几种方式?—— 6.js中常用的输出方式?
书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...
- 前端必备——js中前端与后台的数据交互全解
只要编程语言能够支持网卡端口的监听和发送,理论上都是可以实现服务器后台设计的.也因此造成了实现后台的语言偏多,而web前端语言以html/css/js为主.所以在这里我们不涉及后台的设计,只介绍在we ...
- 页面中引入mui 地址选择,点击页面中其他input时页面回到顶部
问题:在页面中引入mui地址选择时,点击页面中的input页面会滚到顶部(谷歌浏览器中出现的bug),在手机上点击input会出现跳动.开始的时候是想修改mui.min.js里的滚动事件,但是后来找到 ...
- QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...
- Django-前后台的数据交互
Django 从后台往前台传递数据时有多种方法可以实现. 最简单的后台是这样的: from django.shortcuts import render def main_page(request): ...
随机推荐
- Self referencing loop detected for property 错误
EF 序列化返回json时 报错:Self referencing loop detected for property 解决方案:在webapiconfig.cs文件中,增加设置: 1.config ...
- 《HTTP权威指南》6-代理
Web的中间实体 HTTP的代理服务器既是Web服务器又是Web客户端,它既需要正确地处理从客户端发来的请求和连接,返回响应,有需要向服务器发送请求,并接受响应. 私有和共享代理 代理服务器可以是某个 ...
- web browser 发展史
浏览器是指可以显示网页服务器或者文件系统的HTML文件(标准通用标记语言的一个应用)内容,用来显示在万维网或局域网等内的文字.图像及其他信息,便于人们的浏览. Tim Berners-Lee是第一个使 ...
- 【每日一点】1. Java如何实现导出Excel单表头或多表头
一.背景 在后台项目中,经常会遇到将呈现的内容导出到Excel的需求,通过都是导出单个表头的Excel文件,如果存在级联关系的情况下,也就需要导出多表头的场景.今天这篇文章就是分享导出Excel单表头 ...
- Debian/Ubuntu清理硬盘空间的8个技巧
1. 删除残余的配置文件 通常Debian/Ubuntu删除软件包可以用两条命令 sudo apt-get remove <package-name> sudo apt-get purge ...
- Docker安装配置MongoDB并使用Robo 3T在局域网连接
主要参考了这位老兄的文章(传送门),写的还是比较详细的. 不废话直接来正经的. 1.docker pull mongo 从docker hub拉取最新的mongo镜像文件,300多M大小. 2.doc ...
- 基于python的opcode优化和模块按需加载机制研究(学习与个人思路)(原创)
基于python的opcode优化和模块按需加载机制研究(学习与思考) 姓名:XXX 学校信息:XXX 主用编程语言:python3.5 个人技术博客:http://www.cnblogs.com/M ...
- 11.Django2.0文档
第四章 模板 1.标签 (1)if/else {% if %} 标签检查(evaluate)一个变量,如果这个变量为真(即,变量存在,非空,不是布尔值假),系统会显示在 {% if %} 和 {% e ...
- supervisor 启动dotnet.core 报“ too many start retries too quickly”
环境: 操作系统:Centos 7 dotnet core:2.0.0 2.1.3 问题: 在使用supervisor 配置守护进程时,启动dotnet.core程序失败,查看/tmp下supe ...
- [Jenkins][git]构建时提示Caused by: hudson.plugins.git.GitException: Command "/usr/bin/git reset --hard" returned status code 128:
--------------------- 如需转载,转载请注明出处. --------------------- 今日发现所有IOS构建相关的job全部失败,并提示如下错误: ERROR: Erro ...