ATLAS入门篇之HoverMenuExtender控件编程(1)

一、引言

应该说，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开发。

【 作者注】有关于最新的ASP.NET AJAX 1.0框架的安装，原谅在此不多介绍。网站 [url]http://ajax.asp.net[/url]上及下载文档中作了细致说明。

二、创建示例程序

(一)功能简介

本示例程序的设计时刻视图如图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。