不用組件實現(xiàn)Ajax效果

2024-09-01 08:26:00

字體：大中小

供稿：網(wǎng)友

現(xiàn)在.net的ajax組件確實不少了，微軟的ajax extensions用起來很方便，一個updatepanel就可以搞定一切。不過，可能有些朋友更愿意自己來寫。那么在.net里，你是否知道icallbackeventhandler呢？

大家應(yīng)該都知道asp.net頁面調(diào)用時的幾種方式：postback/cross-page posting/server transfer/callback，如果你還不太了解，你可以看看msdn：how to: determine how asp.net web pages were invoked

現(xiàn)在要說的，就是callback這種調(diào)用方式。
簡單的說，使用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...."。

你可能有些迷糊，就得到了嗎？連個什么xmlhttprequest都沒有哩……

3、在page_load中再注冊一段javascript

string script = page.clientscript.getcallbackeventreference(this, "arg", "getflag", "");
page.clientscript.registerclientscriptblock(this.gettype(), .......//省略了一大串

上面的getcallbackeventreference是用來得到客戶端函數(shù)的引用，發(fā)起一個callback到服務(wù)器端的，你不必知道詳細(xì)內(nèi)容。

你只需要了解：

第一個參數(shù)填this,用來handle客戶端的callback的，它必須繼承icallbackeventhandler接口并提供raisecallbackevent方法，我們已經(jīng)在繼承了這個接口，上面第一點中的代碼也有raisecallbackevent方法，只是還沒有具體寫內(nèi)容呢。
第二個參數(shù)就是那個從客戶端傳到服務(wù)器端的參數(shù)。如果你想要注冊的檢查用戶是否可用，那么這里的值就是用戶輸?shù)哪莻€值。
第三個參數(shù)是前臺的javascript函數(shù)名，在第二步中我們寫的名字是：getflag。當(dāng)數(shù)據(jù)好了，這個javascript函數(shù)就會用到。
第四個參數(shù)一般用不上。

返回值：一個函數(shù)的名字，是客戶端調(diào)用的函數(shù)名。這個函數(shù)會調(diào)用到服務(wù)器端了。

4、調(diào)用你的函數(shù)。

上面一定是 onclick="callserver()"嗎？呵呵，這要看你了，你在page.clientscript.registerclientscriptblock注冊的什么javascript函數(shù)名字，就是什么名字了。（在第3步的第二行code中）

已經(jīng)完了。如果你還是一頭霧水，沒關(guān)系，下面看一個實例：

|||

我們寫一個檢測用戶是否已經(jīng)注冊的小程序，這在每個用戶注冊頁面上都可以用到。

前臺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函數(shù)就是服務(wù)器查詢完成要調(diào)用的函數(shù)，我們把服務(wù)器返回的數(shù)據(jù)直接顯示上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步的內(nèi)容，這個函數(shù)名字callserver應(yīng)該和lage_load中注冊的相對應(yīng)的。

后臺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步，取得這個客戶端函數(shù)名，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);
        //上面這一行有點長了，第二個參數(shù)最長，看到function callserver()了嗎，這就是和前臺對應(yīng)的那個函數(shù)名<input onclick=xxx，請記得，一定要在callserver函數(shù)中加入script的值，也就是上一行的上一行（17行）那個值。注意后面的var arg=...，這個arg和17行的arg是對應(yīng)的。
    }
    #region icallbackeventhandler members
    public string getcallbackresult()
    {
        system.threading.thread.sleep(1000);//讓線程睡一會，我們好看效果。這是用來模擬不良網(wǎng)絡(luò)狀況的。
        return _arg;//返回一個string型，這個string在raisecallbackevent函數(shù)中是賦過值的，看下面哦。
    }
    public void raisecallbackevent(string eventargument)
    {
        if (eventargument.equals("99love") || eventargument.equals("blueidea"))//假設(shè)這兩個名字不能注冊，實際操作中，你要是比對數(shù)據(jù)庫記錄的，我們現(xiàn)在簡化處理了。
            _arg = string.format("<span class=/"bad/">很遺憾，{0} 已被使用。</span>", eventargument);//要么已經(jīng)注冊了
        else
            _arg = string.format("<span class=/"ok/">恭喜您，{0} 可以注冊。</span>", eventargument);//要么就可以注冊
    }
    #endregion
}