为了账号安全,请及时绑定邮箱和手机立即绑定

ATLAS入门篇之HoverMenuExtender控件编程

标签:
JQuery

         一、引言应该说,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)"="" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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)"="" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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)"="" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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。

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消