原文地址:http://sharethispo
.com/archive/2006/11/15/Build-web-parts-with-ajax.aspx如何在开发Web部件时使用ajax呢？我们将以
个样子类似MOSS 2007中KPI和BDC Web部件
WebPart为例来介绍说明
如果你对ajax点都不了解,推荐学习TerryLeeajax入门系列ASP.net2.0有
个很酷新特性叫作客户端脚本回调脚本回调主要使我们可以使用javascript
服务器端
中思路方法
然后根据结果来做些操作这就使我们可以动态更新页面某部分内容正如将在我们下面WebPart中看到而不必刷新整页有关在.net2.0中使用客户端脚本回调可以参考下面文章地址(http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/)其中做出了详细解释但是如何确切将其使用和我们代码中文章并没有详细介绍事实上脚本回调特性是集成到.net中我们可以方便拿来使用本举例中我们假设有这么
个WebPart它需要很长时间才能显示出内容为了解决这个问题给用户更好体验我们决定让render思路方法在WebPart刚刚载入时只输出个空div标签然后我们通过ajax来替换div内容使其显示出实际需要内容这样用户就可以在页面载入后在我们WebPart完成内容载入前先看看其他内容下面我们就开始
首先我们先创建
个新WebPart项目在我们WebPart类中添加下面命名空间using
.Web.UI;using .Web.UI.WebControls;using .Web.UI.WebControls.WebParts;想要使.net知道我们
类要使用脚本回调必须实现.Web.UI.IcallbackEventHandler接口public
TreeViewRollUp:WebPart,ICallbackEventHandlerIcallBackEventHandler接口有两个思路方法
public 
GetCallbackResult
和 public void RaiseCallbackEvent( eventArgs)稍后将对其进行介绍我们先定义两个变量
private
datadiv; //用于保存div标签名称private ajaxdata; //用于保存ajax返回数据 datadiv变量保存了html中
我们打算输出内容div标签id这个div标签名称在个WebPart例子中必须唯如果始终是个固定名称那么当我们在个页面中有两个webpart例子时它们有可能会替换对方内容在webpart
RenderContents思路方法中加入下面代码:protected override void RenderContents(HtmlTextWriter writer)
{
this.datadiv = this.ClientID + "content"; //使用WebPart例子
客户端id 加上个给定名称 writer.Write("<div id=\"" + this.datadiv + "\"><img src=\"/_layouts/images/GEARS_AN.GIF\" width\"150\"></div>");}
我们在最后
行div标签中加了个进度条小g
图这里直接用了WSSv3中图片在OnLoad中粘贴如下代码:
protected override void OnLoad(EventArgs e)
{
this.datadiv = this.ClientID + "content";
js = Page.ClientScript.GetCallbackEventReference(this, "'blah'", "filldiv", "'" + this.datadiv + "'", true); contentloader= "var ajaxcommands='';window.onload = ajaxloader; function ajaxloader { eval(ajaxcommands); } function filldiv(arg, ctx){ var mydiv = document.getElementById(ctx); mydiv.innerHTML = arg;}"; (Page.ClientScript.IsClientScriptBlockRegistered("contentloader") 
false)Page.ClientScript.RegisterClientScriptBlock(Page.ClientScript.GetType
, "contentloader", contentloader, true);Page.ClientScript.RegisterStartupScript(this.GetType
, "myloader"+this.ClientID, " ajaxcommands = ajaxcommands + \"" + js + ";\";", true); //使用WebPart例子客户端id 加上个给定名称作为脚本Keybase.OnLoad(e);
}
在该思路方法中注册有两块区别
javascript块 第
个
串js值来源于GetCallbackEventReferenceGetCallbackEventReference思路方法用于返回执行回调服务器获取数据javascript我们传递了:个当前Control控件(webpart)引用；“Blah”作为
数据当回调启动后将被传递到我们服务器端组件；当回调结束后Javascript思路方法名字；我们标记内容div标签名字；异步开关设为true这些必要参数通过该思路方法生成
javascript类似于下面样子:WebForm_DoCallback('ctl00$m$g_a010b3bd_1a68_40f9_b46b_f87050cf516f','blah',filldiv,'ctl00_m_g_a010b3bd_1a68_40f9_b46b_f87050cf516fcontents',null,true);
我们可以将这段javascript用于
个buttonOnClick事件来启动回调并填充div标签在本例中
我们不希望用户还要点击什么才能继续WebPart载入所以我们要在浏览器载入页面时WebForm_DoCallback 思路方法这是用contentloader串来实现Contentloader串定义了个javascript变量, ajaxcommands, 用来保存我们准备执行些命令同时我们设置window.onload事件使其执行ajaxloader思路方法当ajaxloader思路方法运行时将通过eval
执行所有存在ajaxcommands变量中命令为什么这么写呢？这是
如果我们在个页面里有多于两个ajax webpart例子时每个例子都将会通过window.onload事件来载入数据这样问题就产生了只有最后设定事件处理(Event Handler)会被执行并不是所有设定都执行为此我们打了个擦边球在window.onload里设定了个command思路方法每个webpart仅仅扩充其WebForm_DoCallback到ajaxcommands 变量这样起码解决了本例中问题应该算得上个好办法吧
最后
contentloader串也包括了filldiv思路方法用于设定div中回调所返回html内容最后
步在我们类OnLoad 思路方法中将脚本注册到页面中我们只需要在个页面里有个contentloader javascript脚本所以我们在注册前先判断是否已经被页面中其他WebPart通过脚本管理器注册了剩下
事儿就是实现IcallbackEventHandler接口所需要两个思路方法 ICallbackEventHandler.GetCallbackResult{
this.ajaxdata;}
void ICallbackEventHandler.RaiseCallbackEvent(
eventArgument){
this.ajaxdata="Some crazy message here!<BR>"+this.ClientID;
}
RaiseCallbackEvent当客户端回调启动时将被
它是个无返回值思路方法仅用于将GetCallbackResult思路方法需要数据准备好RaiseCallbackEvent思路方法是我们放置所有用于返回给webpartrender思路方法要显示内容相关代码地方本例中我们只发送条简单信息给客户端为了区分区别WebPart例子确实做了各自工作我们在信息后加上了各自ClientID赶快动手实战
下吧希望大家对使用客户端回调已经入门了 
最新评论