利用Anthem.net 实现前台javascript调用服务器端c#函数 及流程分析

  Anthem的原理简单来说是post到当前页面.获得需要更新的内容,再更新原来的页面.只有上传文件的fileUpload控件是通过创建iframe实现.
    这篇随笔简略的分析了下anthem完成无刷新的基本原理,anthem的代码思路清晰 ,值得去研究下源码.anthem的代码行数还是有点多.需要慢慢看 我还是暂时记录下来,以备以后回顾.
    拿最简单的Label和button控件分析,实现的效果是 单击button以后,button将disable,显示"处理中",接着Label显示"今天星期一".
代码:
aspx 代码

< anthem:button id ="btnClick" runat ="server" enabledduringcallback ="False" onclick ="btnClick_Click" text ="按钮" textduringcallback ="处理中" ></ anthem:button >
< anthem:label id ="lblResult" runat ="server" ></ anthem:label >

cs 代码

protected void btnClick_Click( object sender, EventArgs e)
     {
         System.Threading.Thread.Sleep( 5000 );
         this .lblResult.Text = " 今天星期一 " ;
         this .lblResult.UpdateAfterCallBack = true ;
     }

效果如下
         图一          图二            图三
处理流程大概:
1.在页面放入Anthem Label,button控件

2.页面第一次加载时 会在页面上加入Anthem.js的函数 在button的onclick事件中加入

javascript:Anthem_FireCallBackEvent( this ,event,'btnClick','', true ,'','','处理中', false , null , null , null , true , true );
return false ;

这个函数的原型是

function Anthem_FireCallBackEvent(
     control,
     e,
     eventTarget,
     eventArgument,
     causesValidation, // 是否触发页面验证
     validationGroup,
     imageUrlDuringCallBack, // 回调时的图片显示
     textDuringCallBack, // 回调时的文本
     enabledDuringCallBack, // 是否在回调时禁用控件
     preCallBackFunction, // 执行回调前调用的函数
     postCallBackFunction, // 回调完成后调用的函数
     callBackCancelledFunction, // 取消时调用的函数
     includeControlValuesWithCallBack,
     updatePageAfterCallBack // 回调后是否更新
)

这个函数是在控件Render时通过GetCallbackEventReference方法添加上去的.

public static string GetCallbackEventReference(ICallBackControl control, string argument,
bool causesValidation, string validationGroup, string imageDuringCallback)
         {
             return string .Format(
                 " javascript:Anthem_FireCallBackEvent(this,event,'{0}','{1}',{2},'{3}','{4}',
'{5}',{6},{7},{8},{9},true,true); " ,
                 ((Control)control).UniqueID, // 控件ID
                 argument, // 控件参数
                 causesValidation ? " true " : " false " ,
                 validationGroup,
                 imageDuringCallback, //
                 control.TextDuringCallBack,
                 control.EnabledDuringCallBack ? " true " : " false " ,
                 (control.PreCallBackFunction == null || control.PreCallBackFunction.Length == 0 ) ?
" null " : control.PreCallBackFunction,
                 (control.PostCallBackFunction == null || control.PostCallBackFunction.Length == 0 ) ?
" null " : control.PostCallBackFunction,
                 (control.CallBackCancelledFunction == null || control.CallBackCancelledFunction.Length == 0 ) ?
" null " : control.CallBackCancelledFunction
             );
         }

Anthem还会将每个Anthem的控件保存下来,从而知道要更新的控件.

3.加载完成后 显示按钮如图一

4.单击按钮后 显示按钮如图二
    触发onclick事件 该事件调用 Anthem_FireCallBackEvent函数 这个函数进行了一系列的函数调用
首先调用

function Anthem_PreProcessCallBack(
     control,
     e,
     eventTarget,
     causesValidation,
     validationGroup,
     imageUrlDuringCallBack,
     textDuringCallBack,
     enabledDuringCallBack,
     preCallBackFunction,
     callBackCancelledFunction,
     preProcessOut
)

这个函数做了以下事情
若 causesValidation为true 先判断整个页面是否通过验证

若定义了 preCallBackFunction 函数就执行该函数

当都通过再往下执行,否则就取消以后的流程

然后用 preProcessOut保存触发事件的控件中的初始信息 等待回调完成后 重新赋值给控件将控件中的状态设置成预定样式 如button上显示的文字 设置成 textDuringCallBack的文字

接着执行

Anthem_FireEvent(eventTarget,eventArgument,
             function (result) {                     // 回调函数
                 Anthem_PostProcessCallBack(
                     result,
                     control,
                     eventType,
                     eventTarget,
                     null ,
                     null ,
                     imageUrlDuringCallBack,
                     textDuringCallBack,
                     postCallBackFunction,
                     preProcessOut
                 );
             },
             null ,
             includeControlValuesWithCallBack,
             updatePageAfterCallBack
         );

执行函数

function Anthem_FireEvent(eventTarget, eventArgument, clientCallBack, clientCallBackArg,
includeControlValuesWithCallBack, updatePageAfterCallBack)
{
     var form = Anthem_GetForm();
     Anthem_SetHiddenInputValue(form, " __EVENTTARGET " , eventTarget); // 设置触发事件的控件
     Anthem_SetHiddenInputValue(form, " __EVENTARGUMENT " , eventArgument); // 设置事件的参数
     Anthem_CallBack( null , null , null , null , null , clientCallBack, clientCallBackArg,
includeControlValuesWithCallBack, updatePageAfterCallBack);
     form.__EVENTTARGET.value = "" ;
     form.__EVENTARGUMENT.value = "" ;
}

执行

Anthem_CallBack( null , null , null , null , null , clientCallBack,
clientCallBackArg, includeControlValuesWithCallBack, updatePageAfterCallBack);

先执行Anthem_PreCallBack函数,若未定义或执行不通过则返回.

然后保存页面元素的name和value 作为参数

若页面没包含文件上传控件 则利用参数对当前页面的进行post

若创建XMLHttpRequest错误
就执行Anthem_Error(result); 并执行 函数 Anthem_PostProcessCallBack处理错误

若post返回 结果错误 则执行Anthem_Error

等待Post结果的过程中 发生了...
     post到自身页面时 ,我们可以想象重新打开了一个相同的页面,把参数传递过去.
pagehandler根据传递过来的 __EVENTTARGET和 __EVENTARGUMENT参数 执行btnClick_Click函数

this .lblResult.Text = " 今天星期一 " ;
this .lblResult.UpdateAfterCallBack = true ;

render 控件的时候根据lblResult的UpdateAfterCallBack属性为true 在label控件的外围加上标记
效果如下:

<!-- START:lblResult --> < span id ="lblResult" > 今天星期一 </ span > <!-- END:lblResult -->

接着执行Anthem_UpdatePage 更新页面
   这个函数将递归的为原来页面需要更新的控件赋予httpRequest得到的新值.如将label中的innerHtml赋值成

<!-- START:lblResult --><!-- END:lblResult -->

中的值.这样就完成了当前页面控件的无刷新更新.其他复杂的控件也是
通过这个原理进行更新的.

执行EvalClientSideScript注册的脚本

执行 回调函数 Anthem_PostProcessCallBack
    回调函数 Anthem_PostProcessCallBack主要把页面button控件的状态还原回去.将button的文字由
"更新中..."还原成"确定" disable还原成"enable".

并执行用户自定义的postCallBackFunction

执行Anthem_PostCallBack

整个流程就完成了 anthem还做了很多其他工作

这只是简略的分析了下anthem完成无刷新的基本原理, anthem的代码思路简单,值得去研究下源码.
anthem的代码行数还是有点多.需要慢慢看 我还是暂时记录下来,以备以后忘记后回顾.