利用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的代码行数还是有点多.需要慢慢看 我还是暂时记录下来,以备以后忘记后回顾.