ATLAS入门篇之HoverMenuExtender控件编程-原创手记-慕课网

一、引言应该说，ATLAS（即今天的ASP.NETAJAX，其当前最新版本为1.0）是较晚站到Ajax框架比武擂台上的开源成员之一。但是，借助其与ASP.NET2.0框架的紧密结合及微软ATLAS开发团队的高效运作，这个框架的发展日新月异。而且，这个框架有望成为Web2.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所示。

498)this.style.width=498;" big(this)"="" src="http://developer.51cto.com/files/uploadimg/20070320/1435321.jpg">

图2：运行时刻示例程序—图中的日历控件

将在鼠标移动到其上时显示一个弹出框（屏幕右半部分），方便了当前用户的操作。(二)创建过程启动Visual Studio 2005，选择“文件→新建网站…”，然后选择“ASP.NET AJAX-Enabled Web Site”模板(如图3所示)。命名该工程为AJAXEnabledWebSite2，并点击OK。

498)this.style.width=498;" big(this)"="" src="http://developer.51cto.com/files/uploadimg/20070320/1435323.jpg">

图4：最后完成的网页设计形式

注意，在上面DropDownList控件中，我们从其“Smart”标签中选择了“启用AutoPostBack”功能，这是为了使用户每次选择此下拉列表框中的项目时进行回寄（即“PostBack”）。切换到页面Default.aspx的“源”视图下，然后通过点击并填写右边相应的属性框中的项目对HoverMenuExtender控件相关属性进行一些设置，如下图5所示：

<img onclick="window.open(this.src)" class="fit-image" onload="javascript:if(this.width />498)this.style.width=498;" big(this)"="" src="http://developer.51cto.com/files/uploadimg/20070320/1435324.jpg">

图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。