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>
點選按鈕彈出如下對話方塊：
方法二：通過<%=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程式碼。。。