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程式碼。。。