一、引言
应该说，ATLAS（即今天的ASP.NET AJAX，其当前最新版本为1.0）是较晚站到Ajax框架比武擂台上的开源成员之一。但是，借助其与ASP.NET 2.0框架的紧密结合及微软ATLAS开发团队的高效运作，这个框架的发展日新月异。而且，这个框架有望成为Web 2.0时代以AJAX技术增强ASP.NET 2.0开发框架的有力扩展，其功能的强大程度从其最新推出的ASP.NET AJAX 1.0即窥见一斑。
本文中，我们通过ASP.NET AJAX Control Toolkit中一个普通的HoverMenuExtender控件编程示例来了解ASP.NET AJAX 1.0如何简化ASP.NET 2.0 Web开发。
二、创建示例程序
(一)功能简介
本示例程序的设计时刻视图如图1所示。
 |
| 图1：示例程序设计时刻快照 |
图示页面中，我们加入了一个日历控件。以前，尽管我们可以方便地通过此控件选择某个特定的时期，但是要想使之重新显示当前时期却遇到一些麻烦。通过 ASP.NET AJAX Control Toolkit中的HoverMenuExtender控件与这个日历控件的结合，上述问题就可以得到轻松解决。当用户在日历控件上移动鼠标时，将显示一 个小窗口允许用户跳转到今天的日期。同时，用户选择的日期被自动地加到一个下拉列表框中；这样以来，用户就能够直接跳转到以前选择的某个日期。程序的运行 结合如图2所示。
 |
| 图2：运行时刻示例程序—图中的日历控件 |
将在鼠标移动到其上时显示一个弹出框（屏幕右半部分），方便了当前用户的操作。
(二)创建过程
启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板(如图3所示)。命名该工程为AJAXEnabledWebSite2，并点击OK。
|
|
| 图3：使用“ASP.NET AJAX-Enabled Web Site”模板快速创建ATLAS程序 |
然后，在页面Default.aspx上自上而下从“标准”工具箱上拖动Calendar、Panel控件，并从“ASP.NET AJAX Control Toolkit”工具箱上拖动HoverMenuExtender控件到网页上。由于这个Panel控件最终将成为我们前面提及的弹出窗，所以，还需要在 其上加入一些内容。最后完成的设计网页如图4所示。
 |
| 图4：最后完成的网页设计形式 |
注意，在上面DropDownList控件中，我们从其“Smart”标签中选择了“启用AutoPostBack”功能，这是为了使用户每次选择此下拉列表框中的项目时进行回寄（即“PostBack”）。
切换到页面Default.aspx的“源”视图下，然后通过点击并填写右边相应的属性框中的项目对HoverMenuExtender控件相关属性进行一些设置，如下图5所示：
|
|
| 图5：在“源”视图下通过直接点击和输入属性框中属性简化了开发过程 |
从图中看出，这些操作将把HoverMenuExtender控件与其它控件建立关联起来。
此HoverMenuExtender控件支持的属性含义列举如下：
◆TargetControlID—HoverMenuExtender相应目的控件；
◆PopupControlID—当鼠标在目的控件上移动时要显示的控件；
◆HoverCssClass—当弹出框可见时要应用到其上的CSS类；
◆PopupPosition—相对于目标控件要显示的弹出位置，可能的取值有：left，right，top，bottom或center；
◆OffsetX/OffsetY—目标控件和弹出框之间的像素偏移量；
◆PopDelay—当鼠标移开目标控件时弹出框在屏幕上滞留的时间。
(三)简单编码
因为上面面板控件中的Label标签用于显示当前的日期，所以，我们在Default.aspx的code-behind文件的Page_Load事件中加入以下代码行：
lblDate.Text = "今天的日期是： " +DateTime.Today.ToShortDateString();
|
当用户点击LinkButton控件—“显示今天的日期”时，我们要使日历控件显示今天的日期。因此，此LinkButton控件相应的Click事件代码如下：
protected void btnToday_Click(object sender， EventArgs e)
{
Calendar1.VisibleDate = DateTime.Today;
}
|
当用户点击日历控件中的某一日期时，需要把此日期添加到DropDownList控件中：
protected void Calendar1_SelectionChanged(object sender， EventArgs e)
{
ddlSelectedDates.Items.Add(Calendar1.SelectedDate.ToString());
}
|
最后，当用户选择DropDownList控件下的某个保存的日期时，要求把此日历控件设置成显示选定的日期：
protected void ddlSelectedDates_SelectedIndexChanged(object sender， EventArgs e)
{
Calendar1.VisibleDate = System.Convert.ToDateTime(ddlSelectedDates.SelectedItem.Text);
}
|
(四)运行结果
现在，按F5运行此示例程序。一切顺序的话，就会出现如前面图1所示的结果。
三、小结
乍看起来本文示例程序简单之至，但如果不借助ATLAS框架实现本文目的还要费一番努力。在以后的文章中，我还会通过更复杂的示例来探讨这个框架—ASP.NET AJAX 1.0。
本文转自朱先忠老师51CTO博客，原文链接：http://blog.51cto.com/zhuxianzhong/60095 ，如需转载请自行联系原作者
