在本演练中,将使用三个 ASP.NET AJAX 服务器控件(ScriptManager 控件、UpdatePanel 控件和 Timer 控件)按固定的时间间隔更新部分网页。通过将这些控件添加到网页上,可消除在每次回发时刷新整个页面的需要。将只需更新 UpdatePanel 控件的内容。
1、在 Microsoft Visual Studio 2005 或 Visual Web Developer 速成版 中,创建新的支持 AJAX 的 ASP.NET 网页,然后切换到“设计”视图。
2、如果页面尚未包含 ScriptManager 控件,请在工具箱的“AJAX Extensions”选项卡中双击 ScriptManager 控件以将其添加到页面中。
3、在工具箱中,双击 UpdatePanel 控件以将其添加到页面中。
4、单击 UpdatePanel 控件内部,然后双击 Timer 控件以将其添加到 UpdatePanel 控件。
说明: Timer 控件可在 UpdatePanel 控件的内部或外部用作一个触发器。本示例演示如何在 UpdatePanel 控件内部使用 Timer 控件。有关在 UpdatePanel 控件外部将 Timer 控件用作触发器的示例,
5、将 Timer 控件的 Interval 属性设置为 10000。
Interval 属性是以毫秒为单位定义的,因此,若将 Interval 属性设置为 10,000 毫秒,则会每 10 秒刷新一次 UpdatePanel 控件。
说明: 在此示例中,计时器时间间隔设置为 10 秒。这样,在运行示例时,您无需等待很长时间就可以看到结果了。但是,每个计时器时间间隔都会导致向服务器回发,从而引起网络通信。因此,在成品应用程序中,应将此时间间隔设置为在应用中仍可行的最长时间。
6、单击 UpdatePanel 控件内部,然后在工具箱的“标准”选项卡中双击 Label 控件,将其添加到 UpdatePanel 控件。
说明: 确保将 Label 控件添加到 UpdatePanel 控件内部。
7、将该标签的 Text 属性设置为“面板尚未刷新”。
8、单击 UpdatePanel 控件外部,然后双击 Label 控件以将另一个标签添加到 UpdatePanel 控件外部。
说明: 确保将第二个 Label 控件添加到 UpdatePanel 控件外部。
9、双击 Timer 控件以便为 Tick 事件创建处理程序。
10、添加代码以将 Label1 控件的 Text 属性设置为当前时间。
11、创建 Page_Load 处理程序并添加代码,以将 Label2 控件的 Text 属性设置为创建页的时间。
12、切换到“源”视图。
确保页的标记与以下所示类似:
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label2.Text = "Page created at: " +
DateTime.Now.ToLongTimeString();
}
protected void Timer1_Tick(object sender, EventArgs e)
{
Label1.Text = "Panel refreshed at: " +
DateTime.Now.ToLongTimeString();
}
}
13、保存更改,然后按 Ctrl+F5 在浏览器中查看页面。
14、要刷新面板,至少需要等待 10 秒钟。
面板内部的文本将变为显示上次刷新面板内容的时间。但是,不刷新面板外部的文本。