AJAX第八天

１、首先，在UpdatePanel和UpdateProgress外面放一个Button
<asp:Button ID="Panel1Trigger" runat="server" OnClick="Panel1Trigger_Click" Text="Trigger" />
事件定义如前：
    protected void Panel1Trigger_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(3000);
        Label1.Text = DateTime.Now.ToString() + " - trigger";
    }
２、设置UpdatePanel的Tigger
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Panel Rendered"></asp:Label>
                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Refresh" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Panel1Trigger" />
            </Triggers>
        </asp:UpdatePanel>
根据例子的步骤，这里实际上是通过设计器设置的Tiggers：
选择UpdatePanel控件，在属性窗口中Triggers属性行单击ellipsis (…)。

创建一个异步更新触发器，并设置控件ID为Panel1Trigger。

３、下面是关键部分，添加脚本：
var prm = Sys.WebForms.PageRequestManager.getInstance();
function CancelAsyncPostBack() {
    if (prm.get_isInAsyncPostBack()) {
      prm.abortPostBack();
    }
}
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
    if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }
    postBackElement = args.get_postBackElement();
    if (postBackElement.id = 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'block';                
    }
}
function EndRequest(sender, args) {
    if (postBackElement.id = 'Panel1Trigger') {
        $get('UpdateProgress1').style.display = 'none';
    }
}

以上是例子中的原码，然后就出了一些问题，当然，我也遇到了，一是Sys未定义，开始的解决方案是重装2.0或把var Sys放在function里面，但在这里似乎不实用了，
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
这两名话能放在哪个里面？哪个也不行，最终的解决方法是把段JS放在页面后面，正如阿蒙所说：
“我想你的原因可能是这样： 
你的ScriptManager控件放在body中 
而你的javascript代码放在了ScriptManager控件之前的位置 
因为html是逐行加载的 
由于var prm = Sys.PageRequestManager.getInstance();在加载ScriptManager控件的js代码之前就被调用了，所以就出现了Sys未定义的情况 
但是如果你把这行代码放在每个function中，或者把整段js代码放在ScriptManager控件之后，就不会出现这个问题了！”

这最终解决了这个问题。

再看看代码的含义：

prm.add_initializeRequest(InitializeRequest);//设置初始化时调用的函数
prm.add_endRequest(EndRequest);//设置请求完毕后调用的函数

if (prm.get_isInAsyncPostBack()) {
        args.set_cancel(true);
    }//在初始化的时候设置可以取消

$get('UpdateProgress1').style.display//设置进度信息是否显示。

OK 了！