不用组件实现Ajax效果.(1)

雨会游泳

雨会游泳

2016-02-19 16:30

下面,图老师小编带您去了解一下不用组件实现Ajax效果.(1),生活就是不断的发现新事物,get新技能~

     文章简介:现在.NET的Ajax组件确实不少了,微软的ajax extensions用起来很方便,一个UpdatePanel就可以搞定一切。不过,可能有些朋友更愿意自己来写。那么在.NET里,你是否知道ICallbackEventHandler呢?

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)


现在.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页面顶部加入下面的代码:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

%@ 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到服务器端的,你不必知道详细内容。

你只需要了解:

第一个参数填this,用来handle客户端的callback的,它必须继承ICallbackEventHandler接口并提供RaiseCallbackEvent方法,我们已经在继承了这个接口,上面第一点中的代码也有RaiseCallbackEvent方法,只是还没有具体写内容呢。
第二个参数就是那个 从客户端传到服务器端的参数。如果你想要注册的检查用户是否可用,那么这里的值就是用户输的那个值。
第三个参数是前台的javascript函数名,在第二步中我们写的名字是:GetFlag。当数据好了,这个javascript函数就会用到。
第四个参数一般用不上。
返回值:一个函数的名字,是客户端调用的函数名。这个函数会调用到服务器端了。

4、调用你的函数。

input type="button" value="check it!" onclick="callServer()" /

上面一定是 onclick="callServer()"吗?呵呵,这要看你了,你在Page.ClientScript.RegisterClientScriptBlock注册的什么javascript函数名字,就是什么名字了。(在第3步的第二行code中)

已经完了。如果你还是一头雾水,没关系,下面看一个实例:

展开更多 50%)
分享

猜你喜欢

不用组件实现Ajax效果.(1)

Web开发
不用组件实现Ajax效果.(1)

不用组件实现Ajax效果

Web开发
不用组件实现Ajax效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

不用组件实现Ajax效果.(2)

Web开发
不用组件实现Ajax效果.(2)

不用组件实现上载功能(1)

ASP
不用组件实现上载功能(1)

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

不用组件实现上载功能(2)

ASP
不用组件实现上载功能(2)

不用组件来实现StrCat函数的功能

ASP
不用组件来实现StrCat函数的功能

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

利用timeGetTime函数更精准地计算差

利用timeGetTime函数更精准地计算差

如何查看Linux挂载磁盘

如何查看Linux挂载磁盘
下拉加载更多内容 ↓