网站是围绕数据库来编程的，以数据库中的数据为中心，通过后台来操作这些数据，然后将数据传给前台来显示出来（当然可以将后台代码嵌入到前台）。即：
下面就讲前台与后台进行数据交互的方法，分前台调用后台方法与变量；台调用前台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>
点击按钮弹出如下对话框：
方法二：通过<%=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代码。。。
分享到：
相关推荐
asp.net中后台c#数组与前台js数组交互上述代码即为我解决问题所用代码，均已试验通过。
当然说到前台与后台的数据交互更不能漏掉ajax,ajax实现前台与后台数据的异步交互，并且保证实时的、局部刷新。但有些数据不需要异步交互，例如当交互的数据是下一步执行的条件时，就必须要等到数据前台与后台数据...
java项目-第43期ssm项目前台+后台小说在线阅读系统 1、项目简述 该项目是一款前后端交互的小说阅读系统，用户登录后可以查看各种小说章节。后台管理员进行小说维护 前台包含以下模块: 首页、最新上架图书、热门图书...
主要介绍了vue.js过滤器+ajax实现事件监听及后台php数据交互,结合实例形式分析了vue.js前台过滤器与ajax后台数据交互相关操作技巧,需要的朋友可以参考下
c#页面与javascript进行变量赋值读取变量值的方法，包括读取C#后台变量，后台设置前台js的变量等
一共是三个文件，分别为：index.htm,action.php,main.htm 原理为前台页面main.htm和后台action.php通过页面框架 index.htm组织起来，将action.php的页面宽度设为0，这样并不影响显示。action.php将信息放入cookie中...
该网站包含前台购物流程、个人中心展示、后台管理这三个大类组成，实现流畅的购物体验。 前台购买—>个人中心查看—>后台发货的基本购物流程。 运行环境：myeclipse+mysql+Tomcat 使用技术： 由html、...
为一进步完善抽奖平台的使用体验，降低抽奖数据管理门槛，保障数据库安全，应当改善现阶段管理员通过进入数据库后台对抽奖结果予以管理的操作模式，开发并搭建一个与前台配套的抽奖平台后台，用以实现抽奖结果查看与...
NULL 博文链接：https://heisetoufa.iteye.com/blog/335978
一个Nutz为后台支撑,T-io为通讯支持,LayIM为前台UI交互的纯国产框架开发的一个即时通讯项目
uni-app简约前台H5+小程序模板，全新UI设计，更多交互细节，我们倾尽全力为您提供更加流畅舒爽的体验。 增加对支付宝小程序、APP的支持，实现一个后台，管理5个前端。 同时又实现了一套前端代码，发布多个平台，为...
整个项目采用B/S结构,前台页面使用HTML、CSS、JavaScript设计,与服务器端进行数据交互;后台使用JSP、Servlet、JDBC等技术进行开发,使用MySQL数据库进行数据存储。项目的开发环境为Windows10系统,采用Eclipse作为IDE,...
由于有实现数据库和后台模块等功能，通过AJax请求完成整个前台功能的数据交互， 后期再考虑实现一个后台管理系统及数据库系统，还有前原材料,ajax代表异步javascript和xml。它是多种web技术的集合，包括html、css、...
由于没有实现数据库和后台模块等功能， 项目的测试数据我采用的是JSON格式的数据文件，通过AJax请求完成整个前台功能的数据交互， 后期再考虑实现一个后台管理系统及数据库系统，还有前端页面资源的异步加载及优化。
Vue.js：一个渐进式JavaScript框架，用于构建交互式界面。 Sass 和 Less：CSS预处理器，用于简化和加强CSS的功能。 Bootstrap：一个用于快速开发响应式网站的前端框架。 jQuery：一个流行的JavaScript库，简化了处理...
采用JWT鉴权方案，对用户及API进行权限控制 统计，各种数据的统计分析展示 后台系统会采用前后端分离开发，而且整个后台管理系统会使用Vue.js框架搭建出单页应用（SPA）。 前台门户 前台门户面向的是客户，包含与...
Sales Representative 1 test5 供应商1 供应商1 - Exotic Liquids44 1 系统特色 1，不采用code-behind机制，不使用任何服务器控件，全面将工作放在前台实现，后台只处理数据部分。页面还是用aspx后缀，继承于统一的...
4包含前后台：该资源包含了前后台两部分，前端负责展示和交互，后端负责数据处理和业务逻辑。前台包括商品展示、购物车、订单管理等模块，后台包括商品管理、订单管理、用户管理等模块。 5功能完善：该资源的功能...
2项目使用 ASP.NET MVC框架，使用ADO.NET实体数据模型 EF连接数据库，view视图用Razor视图，控制器动作方法使用 Linq to sql 实现与数据库进行数据交互，并完成业务逻辑操作 3页面使用伪静态处理 网站前台 1Web前端...
前台页面包括后台代码，实现了easyui-tree右键增加节点，修改节点，删除节点，包括子节点的操作，并同时更新数据库，动态更新tree