利用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控件的外围加上标记
效果如下:

<span id="lblResult">今天星期一</span>

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

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

执行EvalClientSideScript注册的脚本

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

并执行用户自定义的postCallBackFunction

执行Anthem_PostCallBack

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

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

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

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