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所示。
1435320.jpg
图1:示例程序设计时刻快照
图示页面中,我们加入了一个日历控件。以前,尽管我们可以方便地通过此控件选择某个特定的时期,但是要想使之重新显示当前时期却遇到一些麻烦。通过 ASP.NET AJAX Control Toolkit中的HoverMenuExtender控件与这个日历控件的结合,上述问题就可以得到轻松解决。当用户在日历控件上移动鼠标时,将显示一 个小窗口允许用户跳转到今天的日期。同时,用户选择的日期被自动地加到一个下拉列表框中;这样以来,用户就能够直接跳转到以前选择的某个日期。程序的运行 结合如图2所示。
1435321.jpg
图2:运行时刻示例程序—图中的日历控件
将在鼠标移动到其上时显示一个弹出框(屏幕右半部分),方便了当前用户的操作。
(二)创建过程
启动Visual Studio 2005,选择“文件→新建网站…”,然后选择“ASP.NET AJAX-Enabled Web Site”模板(如图3所示)。命名该工程为AJAXEnabledWebSite2,并点击OK。
1435322.jpg
图3:使用“ASP.NET AJAX-Enabled Web Site”模板快速创建ATLAS程序
然后,在页面Default.aspx上自上而下从“标准”工具箱上拖动Calendar、Panel控件,并从“ASP.NET AJAX Control Toolkit”工具箱上拖动HoverMenuExtender控件到网页上。由于这个Panel控件最终将成为我们前面提及的弹出窗,所以,还需要在 其上加入一些内容。最后完成的设计网页如图4所示。
1435323.jpg
图4:最后完成的网页设计形式
注意,在上面DropDownList控件中,我们从其“Smart”标签中选择了“启用AutoPostBack”功能,这是为了使用户每次选择此下拉列表框中的项目时进行回寄(即“PostBack”)。
切换到页面Default.aspx的“源”视图下,然后通过点击并填写右边相应的属性框中的项目对HoverMenuExtender控件相关属性进行一些设置,如下图5所示:
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。












本文转自朱先忠老师51CTO博客,原文链接:http://blog.51cto.com/zhuxianzhong/60095  ,如需转载请自行联系原作者


相关文章
|
3月前
|
Web App开发 存储 前端开发
谈谈企业级应用的自定义 UI 创建和集成方法一览
谈谈企业级应用的自定义 UI 创建和集成方法一览
31 0
|
4月前
|
开发框架 数据可视化 前端开发
【Unity 3D】GameFramework、QFramework框架简介及应用实战(超详细 附源码)
【Unity 3D】GameFramework、QFramework框架简介及应用实战(超详细 附源码)
122 0
|
7月前
|
XML JavaScript 数据格式
SAP UI5 初学者教程之十四 - 嵌入视图的使用方式试读版
SAP UI5 初学者教程之十四 - 嵌入视图的使用方式试读版
34 0
|
10月前
|
Web App开发 前端开发 JavaScript
【Cesium 编程第一篇】概述、环境搭建、界面介绍
【Cesium 编程第一篇】概述、环境搭建、界面介绍
182 0
|
XML 前端开发 图形学
Unity跨平台UI解决方案:可能是最全的FairyGUI系列教程-第五天
众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣!!!
390 0
|
XML JSON 自然语言处理
SAP UI5 初学者教程之八 - 多语言的支持试读版
SAP UI5 初学者教程之八 - 多语言的支持试读版
SAP UI5 初学者教程之八 - 多语言的支持试读版
|
前端开发 C# 数据格式
C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码
原文:C#使用Xamarin开发可移植移动应用(4.进阶篇MVVM双向绑定和命令绑定)附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1215 0
|
C# Android开发 iOS开发
C#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件..很很很很重要..),附源码
原文:C#使用Xamarin开发可移植移动应用进阶篇(6.使用渲染器针对单个平台自定义控件..很很很很重要..),附源码 前言 系列目录 C#使用Xamarin开发可移植移动应用目录 源码地址:https://github.
1260 0