代码改变世界

ComponentArt控件分析之CallBack(1)

2007-07-10 15:04  Clingingboy  阅读(3263)  评论(2编辑  收藏  举报
    ajax说的再热也不为过,现在的商业控件几乎都要在支持ajax下一把功夫.

让我们来看下ComponentArt中CallBack的使用

Callback是一个容器,其提供一个服务器端回调事件,同时也提供了一个前端的Callback()方法.

说这个之前我们可以回顾下.net内置回调的方法.我们需要实现ICallbackEventHandler接口.服务器端需要注册脚本,客户端需要触发后端事件,然后把传回来的值传回来.

使用了
Callback控件可以省两个步骤.中间的两个步骤控件帮你做了.
我们需要做什么事情.在前端触发后端事件,后端再把数据传回来放在CallBack容器里面

先看如何使用,在使用Callback方法触发后端事件

   <script language="javascript">
 
function DoCallback(param)
  {
   Callback1.Callback(param);
  }
</script>
<asp:HyperLink NavigateUrl="javascript:DoCallback('none');"
  id
="hlnkGetTicks" runat="server">Get Ticks
</asp:HyperLink>
   
<br />
        
<ComponentArt:Callback id="Callback1" runat="server" OnCallback="Callback1_Callback" BackColor="Red">
  
<Content ID="Content1">
    
<asp:Label id="lblTicks" runat="server"></asp:Label>
  
</Content>
</ComponentArt:Callback>

代码真的很简洁.我们几乎不用把服务器控件放在Form容器里面.呈现以后的代码也非常的漂亮.当然除了封装在dll里面的那几个js文件外

第二步在后端写回调事件

        protected void Callback1_Callback(object sender, CallBackEventArgs e)
        {
            lblTicks.Text 
= DateTime.Now.ToString();
            lblTicks.RenderControl(e.Output);
        }

好了,这样就可以使用了.你根本看不到一点的ajax代码.控件的封装也就成功了.

目的不在使用,而在学习如何实现.继续分析.

其是如何做到的?逃不掉的原理,一定会在脚本里出现的XMLHttpRequest对象.

我看过很多教程关于ajax的.都是A页面调用B页面的内容,其实我只需要得到数据,就是为了无刷新,我就要特地创建一个空的B页面来给A页面异步调数据.真的很不愿意.我很想在自己的页面回调数据.这个便是我想要的.首先方法还是一样.

加入A页面,我要调数据,就是A.aspx?id=xxx 然后根据id的值得来回传数据,但传回来是整个A页面的数据,不行.不过今天学了一招.可以调用HttpResponse对象的End方法,其会停止页面的执行.即你可以在页面先呈现你要呈现的东西,然后调用这个方法就OK了.

来看看CallBack如何实现

1.在呈现之前先判断有无querystring参数进来,这个querystring是自动定义的,如果有的话,则执行回调函数(事件),下面代码则不再执行.如果没有的话当然就呈现了.当然这个querystring参数是隐藏的,一般人不知道有这个东西存在.

      // is this a callback request?
      if(arParams != null && arParams.Length > 0)
      {
        
this.HandleCallback(arParams);
        
return;
      }

2.回调函数的实现
如下代码.其是作为xml进行输出的

    private void HandleCallback(string [] arParams)
    {
      StringWriter oStringWriter 
= new StringWriter();
      HtmlTextWriter oWriter 
= new HtmlTextWriter(oStringWriter, string.Empty);

      CallBackEventArgs oArgs 
= new CallBackEventArgs(oWriter);
      oArgs.Parameter 
= arParams[0];
      oArgs.Parameters 
= arParams;

      
this.OnCallback(oArgs);

      oWriter.Close();
      
      Context.Response.Clear();
      Context.Response.ContentType 
= "text/xml";
      Context.Response.Write(
"<CallbackContent><![CDATA[");
      Context.Response.Write(oStringWriter.ToString().Replace(
"]]>""$$$CART_CDATA_CLOSE$$$"));
      Context.Response.Write(
"]]></CallbackContent>");
      Context.Response.End();
    }

其中CallBackEventArgs的Parameter提供了便利,获取参数集合的第一个参数,参数名为Cart_congrolID_Callback_Param.
我们可以打开url来验证这一切xxx.aspx?Cart_Callback1_Callback_Param=none
可以看到会生成xml格式的数据,其就是我们要回调的数据.数据
XMLHttpRequest对象异步取到以后,就开始解析xml文件.然后把值赋给CallBack控件(即div对象的innerHTML属性).看到这个的话,大的方向就找到,其他功能再研究.