ASP.NET AJAX入门系列（7）：使用客户端脚本对UpdateProgress编程

在本篇文章中，我们将通过编写JavaScript来使用客户端行为扩展UpdateProgress控件，客户端代码将使用ASP.NET AJAX Library中的PageRequestManager，在UpdateProgress控件中，将添加一个Button，来允许用户取消异步更新，并且使用客户端脚本来显示或者隐藏进度信息。

3在UpdatePanel控件中添加一个Label控件并设置它的Text属性值为“Panel Rendered”。

6．双击refresh控件添加Click事件。

protected void Button1_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);

    Label1.Text = DateTime.Now.ToString();
}

<script language="javascript" type="text/javascript">
<!-- 
var prm = Sys.WebForms.PageRequestManager.getInstance();

function CancelAsyncPostBack() {

    if (prm.get_isInAsyncPostBack()) {

      prm.abortPostBack();

    }
}
// -->
</script>

9．设置HtmlButton的click特性为CancelAsyncPostBack。

<style type="text/css">

#UpdatePanel1 {

  width:200px; height:100px;

  border: 1px solid gray;

}

#UpdateProgress1 {

  width:200px; background-color: #FFC080;

  bottom: 0%; left: 0px; position: absolute;

}

</style>

12．单击refresh按钮，经过短暂的延时之后显示进度信息，完成异步更新之后UpdatePanel中的信息显示为当前的服务器时间。

3．在UpdatePanel和UpdateProgress控件之外添加一个Button控件。

5．选择UpdatePanel控件，在属性窗口中Triggers属性行单击ellipsis (…)。

7．双击Trigger按钮添加Click事件。

protected void Panel1Trigger_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(3000);

    Label1.Text = DateTime.Now.ToString() + " - trigger";
}

<script language="javascript" type="text/javascript">

<!-- 

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';

    }

}

// -->

</script>

[翻译自官方文档]