原文地址:http://sharethispoint.com/archive/2006/11/15/Build-web-parts-with-ajax.aspx
如何在开发Web部件时使用ajax呢?我们将以一个样子类似MOSS 2007中KPI和BDC Web部件的WebPart为例来说明。如果你对ajax一点都不了解,推荐学习TerryLee的ajax入门系列。
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 System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

想要使.net知道我们的类要使用脚本回调,必须实现System.Web.UI.IcallbackEventHandler接口。

public class TreeViewRollUp:WebPart,ICallbackEventHandler

IcallBackEventHandler接口有两个方法,public string GetCallbackResult()和 public void RaiseCallbackEvent(string eventArgs),稍后将对其进行介绍。
我们先定义两个变量

private string datadiv; //用于保存div标签名称
private string 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标签中加了一个进度条的小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

赶快动手实践一下吧,希望大家对使用客户端回调已经入门了。

转载于:https://www.cnblogs.com/xioxu/archive/2008/08/28/1279036.html

学习 ---AJAX如何用于Web部件相关推荐

  1. 保护 ASP.NET Web 部件页面

    Web 部件是 ASP.NET 的一个新特征,它提供给终端用户对 Web 页面进行更改或个性化的能力.拥有已个性化的 Web 页面是非常强大的 Web 应用程序,但是它同样有需要被开发者所了解的安全隐 ...

  2. 一步步学习微软InfoPath2010和SP2010--第八章节--使用InfoPath表单Web部件

    本章中,你将学习到: 1.      配置Web部件设置 2.      创建Web部件连接 3.      创建表单参数 4.      使用其他浏览器表单参数 你可以使用InfoPath表单Web ...

  3. (转) ASP.NET 2.0:使用用户控件和定制的Web部件个人化你的门户网站(二)

    Web部件目录 我们已经见过了如何在 WebPartZones 控件中事先放入Web部件.你还可以用另外一种方法完成这个功能,那就是允许用户在运行时添加新的Web部件.通过使用 CatalogZone ...

  4. ASP.NET 实践:使用用户控件实现 Web 部件的个性化

    这个实践示范了如何创建依赖于 Web 部件个性化的 ASP.NET 用户控件,并在 Web 页面中提供用户特定的默认值. ASP.NET Web 部件控件集允许你建立拥有模块化布局的 Web 页面,并 ...

  5. [网络安全学习篇50]:Web架构安全分析

    引言:我的系列博客[网络安全学习篇]上线了,小编也是初次创作博客,经验不足:对千峰网络信息安全开源的视频公开课程的学习整理的笔记整理的也比较粗糙,其实看到目录有300多集的时候,讲道理,有点怂了,所以 ...

  6. 关于ASP.NET Web 部件连接的引入

    创建用于 ASP.NET 2.0 应用程序的 Web 部件 您可以用两种方法创建 Web 部件.第一种方法涉及创建一个自定义的 Web 部件类,该类从 System.Web.UI.WebControl ...

  7. PHP学习笔记-PHP与Web页面的交互2

    转载请标明出处: http://blog.csdn.net/hai_qing_xu_kong/article/details/51761308 本文出自:[顾林海的博客] 前言 在<PHP学习笔 ...

  8. 创建 Web 部件页--msdn

    本演练中的演示让您亲身体验用于创建使用 Web 部件控件的网页的基本组件和任务. 在许多 Web 应用程序中,可以更改内容的外观并允许用户选择和排列他们想要看到的内容,这一点十分有用.ASP.NET ...

  9. Ajax学习-Ajax简介

    最近的课程安排又有Ajax.虽然自己了解一点Ajax方面的东西,但是感觉自己还需要学习好多,那就开始在学习一下Ajax吧~~~~....... (1)Ajax是指异步JavaScript及XML(As ...

最新文章

  1. 基于Matlab的BP神经网络在语音特征信号识别中的应用
  2. smarty学习——编程知识
  3. VPS批量管理软件--远程桌面批量管理
  4. ASP.NET MVC 动态选择VIEW
  5. 何雯娜 (为奥运冠军名字作诗)
  6. 安卓手机qq怎么看密友值_qq亲密关系分数值是什么在哪看 怎么查情侣值或闺蜜值方法...
  7. 什么是mybatis,mybatis有什么特点
  8. OJ1036: 某年某月有多少天
  9. oracle或mysql分组查询并且获取前3条排序后的数据
  10. 6.1、Android Studio的Android Monitor概览
  11. 分享一次生产应用无法连接Oracle数据库故障
  12. iOS多线程--深度解析
  13. OBS 录制简单操作说明
  14. 远程桌面工具TeamViewer模块之顶部菜单
  15. 透视HTTP协议-进阶篇-极客时间-学习笔记
  16. [轻音乐] - 理查德·克莱德曼专辑[8CD]
  17. 记录一次jeecms修改子栏目或子栏目进行排序时,服务请求发生了错误,
  18. 如何从零开始系统学习量化交易-附资料
  19. U盘中病毒,文件消失,但U盘的大小却没有改变
  20. 免安装版MySQL(解压版)安装详细教程及注意事项

热门文章

  1. mysql 主从配置(master slave)
  2. 使用Windows的分析等待链(analyze wait chain)来诊断没用响应的应用
  3. 如何查看开发者账号何时到期
  4. World Final 2012
  5. Craig离开Webb了
  6. html属性选择器怎么写,html – 具有“type”属性与make-up属性的CSS属性选择器和区分大小写...
  7. js 数组遍历符合条件跳出循环体_Javascript数组循环遍历之forEach详解
  8. 弹性均质圆环法计算过程_蚝油的加工工艺,蚝油总固形物(水分含量)计算公式,检测方法...
  9. 第十八章 应用举例:照片OCR-机器学习老师板书-斯坦福吴恩达教授
  10. 第六章 逻辑回归-机器学习老师板书-斯坦福吴恩达教授