科技行者

行者学院 转型私董会 科技行者专题报道 网红大战科技行者

知识库

知识库 安全导航

至顶网软件频道如何用于Web部件(2)

如何用于Web部件(2)

  • 扫一扫
    分享文章到微信

  • 扫一扫
    关注官方公众号
    至顶头条

如何在开发Web部件时使用ajax呢?我们将以一个样子类似MOSS 2007中KPI和BDC Web部件的WebPart为例来说明。如果你对ajax一点都不了解,推荐学习TerryLee的ajax入门系列。

作者:sunmoonfire 来源:blog 2007年9月3日

关键字: web AJAX SharePoint2007 SharePoint Office

  • 评论
  • 分享微博
  • 分享邮件
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标签中加了一个进度条的小gif图。这里直接用了WSSv3中的图片。

在OnLoad中粘贴如下代码:

protected override void OnLoad(EventArgs e)
{
    
this.datadiv = this.ClientID + "content";
    
string js = Page.ClientScript.GetCallbackEventReference(this"'blah'""filldiv""'" + this.datadiv + "'"true);
     
string contentloader= "var ajaxcommands='';window.onload = ajaxloader; function ajaxloader() { eval(ajaxcommands); } function filldiv(arg, ctx){ var mydiv = document.getElementById(ctx); mydiv.innerHTML = arg;}";

      
if (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 加上一个给定的名称作为脚本的Key
       
base.OnLoad(e);
}

在该方法中注册有两块不同的javascript块 。
第一个字符串js的值来源于GetCallbackEventReference。GetCallbackEventReference方法用于返回执行回调服务器获取数据的javascript。我们传递了:一个当前控件(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用于一个button的OnClick事件来启动回调并填充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接口所需要的两个方法。
string ICallbackEventHandler.GetCallbackResult()
{
    
return this.ajaxdata;
}

void ICallbackEventHandler.RaiseCallbackEvent(string eventArgument)
{
    
this.ajaxdata="Some crazy message here!<BR>"+this.ClientID;
}

RaiseCallbackEvent当客户端回调启动时将被调用。它是一个无返回值的方法,仅用于将GetCallbackResult方法需要的数据准备好。RaiseCallbackEvent方法是我们放置所有用于返回给webpart的render方法要显示内容的相关代码的地方。本例中我们只发送一条简单的信息给客户端。为了区分不同的WebPart实例确实做了各自的工作,我们在信息后加上了各自的ClientID

赶快动手实践一下吧,希望大家对使用客户端回调已经入门了。
    • 评论
    • 分享微博
    • 分享邮件
    邮件订阅

    如果您非常迫切的想了解IT领域最新产品与技术信息,那么订阅至顶网技术邮件将是您的最佳途径之一。

    重磅专题
    往期文章
    最新文章