現在.net的ajax組件確實不少了,微軟的ajax extensions用起來很方便,一個updatepanel就可以搞定一切。不過,可能有些朋友更愿意自己來寫。那么在.net里,你是否知道icallbackeventhandler呢?
大家應該都知道asp.net頁面調用時的幾種方式:postback/cross-page posting/server transfer/callback,如果你還不太了解,你可以看看msdn:how to: determine how asp.net web pages were invoked
現在要說的,就是callback這種調用方式。
簡單的說,使用callback可以得到你平常看到那么ajax效果,即不刷新整個頁面,只更新其中一個部分。
使用callback,只需要做以下4步:
1、在你的頁面中繼承system.web.ui.icallbackeventhandler接口。
public partial class _default : system.web.ui.page, system.web.ui.icallbackeventhandler
{
protected void page_load(object sender, eventargs e)
{
}
#region icallbackeventhandler members
public string getcallbackresult()
{
}
public void raisecallbackevent(string eventargument)
{
}
#endregion
}
如果你沒有使用code-behind,那你也可以在aspx頁面頂部加入下面的代碼:
<%@ implements interface="system.web.ui.icallbackeventhandler" %>
2、在前臺寫一段自定義的javascript,更新頁面
這一段javascript用來更新頁面的某個局部,就像你平常操作的一樣,寫些document.getelementbyid("xxx").innerhtml="working on your request...."。
<script type="text/javascript">
function getflag(arg)//這里已經得到服務器端數據據了,服務器端數據就在這個參數arg里。
{
document.getelementbyid("result").innerhtml=arg;//我們不作處理,直接顯示在頁面上。
}
</script>
你可能有些迷糊,就得到了嗎?連個什么xmlhttprequest都沒有哩……
3、在page_load中再注冊一段javascript
string script = page.clientscript.getcallbackeventreference(this, "arg", "getflag", "");
page.clientscript.registerclientscriptblock(this.gettype(), .......//省略了一大串
上面的getcallbackeventreference是用來得到客戶端函數的引用,發起一個callback到服務器端的,你不必知道詳細內容。
你只需要了解:
返回值:一個函數的名字,是客戶端調用的函數名。這個函數會調用到服務器端了。
4、調用你的函數。
<input type="button" value="check it!" onclick="callserver()" />
上面一定是 onclick="callserver()"嗎?呵呵,這要看你了,你在page.clientscript.registerclientscriptblock注冊的什么javascript函數名字,就是什么名字了。(在第3步的第二行code中)
已經完了。如果你還是一頭霧水,沒關系,下面看一個實例:
|||
我們寫一個檢測用戶是否已經注冊的小程序,這在每個用戶注冊頁面上都可以用到。
前臺default.aspx:
<%@ page language="c#" autoeventwireup="true" codefile="default.aspx.cs" inherits="_default" enableviewstate="false" %>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>icallbackeventhandler demo</title>
<style type="text/css">
*{font: 12px "verdana";}
#user{border:1px solid #080; height:50px;width:500px;padding:20px;}
input{border:1px solid #508fcc;background:#fff;}
.ok{color:#090;}
.bad{color:#f00}
#result{display:inline;margin: 0 5px 0;}
</style>
<script type="text/javascript">
function getflag(arg)//這里的javascript函數就是服務器查詢完成要調用的函數,我們把服務器返回的數據直接顯示上id為result的div中。
{
document.getelementbyid("result").innerhtml=arg;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="user">
<input type="text" value="99love" maxlength="10" id="userid" />
<input type="button" value="check it!" onclick="callserver()" /><div id="result">查詢用戶是否被使用。</div>
</div>
</form>
</body>
</html>
上面有一個<input type="button" value="check it!" onclick="callserver()" />,這是我說的第5步的內容,這個函數名字callserver應該和lage_load中注冊的相對應的。
后臺default.aspx.cs:
using system;
using system.data;
using system.configuration;
using system.collections;
using system.web;
using system.web.security;
using system.web.ui;
using system.web.ui.webcontrols;
using system.web.ui.webcontrols.webparts;
using system.web.ui.htmlcontrols;
public partial class _default : system.web.ui.page, system.web.ui.icallbackeventhandler
{
private string _arg = string.empty;
protected void page_load(object sender, eventargs e)
{
string script = page.clientscript.getcallbackeventreference(this, "arg", "getflag", "");//上面的第3步,取得這個客戶端函數名,script的值可能是這樣的:webform_docallback('__page',arg,getflag,/"/",null,false)
page.clientscript.registerclientscriptblock(this.gettype(), "callserver", "/nfunction callserver(){/ndocument.getelementbyid(/"result/").innerhtml=/"正在檢查 /"+document.getelementbyid(/"userid/").value+/" 的可用性,請稍候.../";/nvar arg=document.getelementbyid(/"userid/").value;/n" + script + ";/n}", true);
//上面這一行有點長了,第二個參數最長,看到function callserver()了嗎,這就是和前臺對應的那個函數名<input onclick=xxx,請記得,一定要在callserver函數中加入script的值,也就是上一行的上一行(17行)那個值。注意后面的var arg=...,這個arg和17行的arg是對應的。
}
#region icallbackeventhandler members
public string getcallbackresult()
{
system.threading.thread.sleep(1000);//讓線程睡一會,我們好看效果。這是用來模擬不良網絡狀況的。
return _arg;//返回一個string型,這個string在raisecallbackevent函數中是賦過值的,看下面哦。
}
public void raisecallbackevent(string eventargument)
{
if (eventargument.equals("99love") || eventargument.equals("blueidea"))//假設這兩個名字不能注冊,實際操作中,你要是比對數據庫記錄的,我們現在簡化處理了。
_arg = string.format("<span class=/"bad/">很遺憾,{0} 已被使用。</span>", eventargument);//要么已經注冊了
else
_arg = string.format("<span class=/"ok/">恭喜您,{0} 可以注冊。</span>", eventargument);//要么就可以注冊
}
#endregion
}
運行截圖:
源碼下載
希望這篇文章能在某些時候對您有所幫助。
|
新聞熱點
疑難解答
圖片精選