Microsoft ASP.NET AJAX实现无刷新

Microsoft ASP.NET AJAX 请到www.asp.net下载　ASP.NET AJAX 1.0 RC，并安装。

打开.net 2005 新建网站，选择ASP.NET AJAX-Enabled Web Site ，然后填入网站所在的目录，点击确定,如下图所示：

打开解决方案资源管理器，双击Default.aspx,在设计视图中打开该页面。在此页面中，已经默认添加了一个ScriptManager控件。

打开工具箱，展开AJAX Extenstions，双击UpdatePanel，向页面添加一个UpdatePanel控件。从工具箱中拖入一个标签，和一个按钮，为按钮添加点击事件。在按钮的事件中，为了演示AJAX的无刷新特性，不做太多的处理，只添加一个线程延时操作，用标签控件显示当前时间，具体代码入下：

protected void Button1_Click(object sender, EventArgs e)

{

System.Threading.Thread.Sleep(5000);

abel1.Text = DateTime.Now.ToString();

}

最后，展开AJAX Extenstions，向页面添加UpdateProgress控件。向控件中添加按钮单击等待过程中所提示的信息。将属性AssociatedUpdatePanelID设置成UpdatePanel1，最后的页面代码如下：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<title>Untitled Page</title>

</head>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<div>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />

<asp:Button ID="Button1" runat="server" Text="体验无刷新" OnClick="Button1_Click" />

</ContentTemplate>

</asp:UpdatePanel>

<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="UpdatePanel1">

任务正在执行，请等待......

</ProgressTemplate>

</asp:UpdateProgress>

</div>

</form>

</body>

</html>

保存并运行程序，当点击按钮的时候页面出现等待提示，当页面中的日期被刷新后，提示会自动消失。注意在此过程中，页面并没有感觉到刷新（注意IE的后退按钮）。运行效果如下图：

点击按钮后的效果

执行完毕后的效果

相关代码下载：upload/2007_01/07011911122051.rar