• 1. 用AJAX改善用户体验(二)
  • 2. ASP.NET AJAX 有哪些核心组件,各有什么功能? 使用ASP.NET AJAX 调用Web Service,需要在Web Service类中添加哪一特性? AutoComplete 控件有哪些常用属性,各有什么意义?回顾
  • 3. 预习检查Accordion 控件可以实现什么功能? ASP.NET AJAX 扩展日历控件与普通日历控件有什么不同?
  • 4. 本章任务使用 Accordion 控件实现热门书目录排行榜功能 使用 CollapsiblePanel 控件实现面板折叠效果 使用 Rating 控件实现书籍评价功能 使用 ModalPopup 控件实现登录提示功能 使用 Tabs 控件实现选项卡功能
  • 5. 本章目标掌握 Accordion 控件实现菜单的两种方式 掌握 Calendar、ModalPopup、CollapsiblePanel、Rating和 Tabs 等常用控件的使用
  • 6. Accordion 控件 Accordion 控件简介 可以实现菜单折叠效果,常用来做导航菜单和分组数据的展示 一个面板Pane标题:Header内容:Content
  • 7. Accordion 控件 属性名称 说 明SelectedIndex默认选择的面板索引HeaderCssClass表示整个菜单的标题样式ContentCssClass表示整个菜单的内容样式AutoSizeAccordion内容的显示方式Panes控件的内容所在,它只能包括AccordionPane控件HeaderTemplateAccordion的标题模板ContentTemplateAccordion的内容模板Accordion控件的主要属性
  • 8. Accordion 控件实现静态菜单 静态菜单页面布局演示示例1: Accordion控件HTML代码
  • 9. Accordion 控件实现动态菜单 实现动态菜单效果动态菜单效果演示这和以前学过的 TreeView 控件是否有些相似呢?
  • 10. Accordion 控件实现动态菜单 父菜单子菜单回顾动态 TreeView 菜单的实现思路循环生成父级 TreeNode根据父节点生成对应的子节点将父节点添加到 TreeView 中
  • 11. Accordion 控件实现动态菜单 下面我们按照相同的思路,用 Accordion 控件来实现热门书分类排行榜书的分类表数据信息书籍表数据信息。其中 CategoryId 字段对应 Categories 表的 Id 字段显示每种书的分类下 点击次数排名前3名的书 实现分组菜单效果
  • 12. Accordion 控件实现动态菜单 布局页面,拖入一个Accordion 控件到Default.aspx页面上
    添加的关键HTML代码 在母版页添加标题和内容样式演示示例2: Accordion控件实现动态菜单
  • 13. Accordion 控件实现动态菜单 protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack){DisplayHotBooks(); } } protected void DisplayHotBooks() { IList list = CategoryManager.GetAllCategories(); foreach (category item in list) { AccordionPane ap = new AccordionPane(); Label lblCategoryMenu = new Label(); lblCategoryMenu.Text = item.Name; ap.HeaderContainer.Controls.Add(lblCategoryMenu); Accordion1.Panes.Add(ap); } } 关键后台代码 得到所有的书的分类信息public static IList GetAllCategories() { string sqlAll = "SELECT * FROM Categories order by id"; return GetCategoriesBySql( sqlAll ); } GetAllCategories对应的数据访问层方法实例化一个AccordionPane 控件显示书的分类名称将标签控件添加到标题部分将AccordionPane追加到Accordion的Panes集合中
  • 14. Accordion 控件实现动态菜单运行程序,只显示书的分 类信息,没有对应的书籍如何添加书的分类对应的书籍呢?protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack){DisplayHotBooks(); } } protected void DisplayHotBooks() { IList list = CategoryManager.GetAllCategories(); foreach (category item in list) { AccordionPane ap = new AccordionPane(); Label lblCategoryMenu = new Label(); lblCategoryMenu.Text = item.Name; ap.HeaderContainer.Controls.Add(lblCategoryMenu); Accordion1.Panes.Add(ap); } }在这里继续为AccordionPane添加内容即可
  • 15. Accordion 控件实现动态菜单int id = item.Id; IList bookList = BookManager.GetBooksByCategoryId(id); foreach (book bitem in bookList) { HyperLink hlinkBookMenu = new HyperLink (); hlinkBookMenu.Text = bitem.Title + "
    "; ap.ContentContainer.Controls.Add(hlinkBookMenu); } 得到书的分类Id根据书的分类得到对应的所有书籍信息指定HyperLink的Text属性为书籍名将HyperLink控件添加到AccordionPane内容部分public static IList GetBooksByCategoryId(int categoryId) { string sql = "SELECT top 3 * FROM books WHERE CategoryId = '"+categoryId+"' order by clicks desc" ; return GetBooksBySql(sql); } GetBooksByCategoryId对应的数据访问层方法为书籍添加超连接以便查看书籍详情hlinkBookMenu.NavigateUrl = "BookDetail.aspx?bid=" + categoryId + ""; 实现分组菜单效果
  • 16. CollapsiblePanel控件 CollapsiblePanel控件简介 可以用一个图片或按钮来控制面板的显示或隐藏 点隐藏图标,实现用户菜单隐藏 点显示图标,实现用户菜单显示
  • 17. CollapsiblePanel控件 属性名称 说 明TargetControlID被显示或隐藏的Panel的IDCollapsedSize折叠后的尺寸ExpandedSize展开后的尺寸Collapsed默认Panel是否处于折叠状态ExpandControlID激发伸展效果的控件IDCollapseControlID激发折叠效果的控件IDAutoCollapse失去焦点时是否自动折叠ScrollContentsPanel内是否显示滚动条CollapsedText折叠后显示的文本信息ExpandedText展开后显示的文本信息ImageControlID使用图片实现折叠和展示时,图片的IDExpandedImage实现展开时使用的图片路径CollapsedImage实现折叠时使用的图片路径ExpandDirection展开方向,有水平和垂直两种CollapsiblePanel控件的主要属性 CollapsiblePanel控件声明语法
  • 18. CollapsiblePanel控件CollapsiblePanel控件的属性虽多,但使用简单方便用户列表图片和内容图 片分别放在两个Panel内在MyAJAXPro的ExtenderControls文件 夹下新建“CollapsiblePanel.aspx”页面
    关键HTML代码需要隐藏的部分控制隐藏和不 隐藏的部分CollapsiblePanel 控件的主要属性演示示例3: CollapsiblePanel控件HTML代码
  • 19. CollapsiblePanel控件 实现用户菜单显示 / 隐藏效果
  • 20. Rating控件 Rating控件简介 可以用来实现等级星效果 使用等级星实现等级评价
  • 21. Rating控件 Rating控件声明语法 属性名称 说 明CurrentRating当前默认的等级MaxRating最大等级StarCssClass等级星的样式EmptyStarCssClass未被选中的等级星的样式FilledStarCssClass选中的等级星的显示样式WaitingStarCssClass更改等级星选中状态时的显示样式OnChanged等级变化时触发的事件Rating控件的主要属性
  • 22. Rating控件为MyBookShop的BookDetail.aspx页面添加等级评价功能实现后的效果如果级别小于2, 则给出友情提示
  • 23. Rating控件使用Rating控件实现等级星效果BookRatings表用来 记录书的评价信息BookDetail.aspx 评价部分页面布局在common.master母版 页中添加等级星样式
  • 24. Rating控件 protected void Rating1_Changed(object sender, AjaxControlToolkit.RatingEventArgs e) { if (int.Parse(e.Value) < 2) { lblMessage.Text = "友情提示:您给予的级别太低, 有可能影响此书的销售量!"; } else { lblMessage.Text = ""; } }表示选择的等级值等级值更改事件运行程序,实现等级评价功能演示示例4: Rating控件HTML代码
  • 25. Calendar控件 Calendar控件简介 ——解决了传统ASP.NET日历控件的3大问题 不能实现日历控件和TextBox的智能绑定 选定日期后无法自动隐藏 选定日期后需要刷新页面 使用Calendar控件实现日历
  • 26. Calendar控件 Calendar控件声明语法 属性名称 说 明TargetControlID与日历绑定的TextBox控件IDFormat日历显示的日期格式CssClass 日历的样式PopupButtonID 通过选择按钮弹出日期时,按钮的IDCalendar控件的主要属性
  • 27. Calendar控件在MyAJAXPro的ExtenderControls文件夹下添加页面Calendar.aspx
    出版日期:
    关键HTML代码运行程序即可实现智能绑定的日历控件演示示例5: Calendar控件HTML代码
  • 28. ModalPopup控件 ModalPopup控件简介 用来显示模式窗口 ModalPopup实现弹出窗口效果
  • 29. ModalPopup控件 属性名称 说 明TargetControlID用来控制弹出窗口的控件IDPopupControlID要弹出的控件IDDropShadow弹出的控件是否有阴影效果OkControlID确定按钮的IDCancelControlID取消按钮的IDDrag是否允许拖拽PopupDragHandleControlID允许拖拽的控件IDBackgroundCssClass弹出控件后其他部分的样式X水平坐标,距页面左边缘的距离Y垂直坐标,距页面上边缘的距离ModalPopup控件的主要属性 ModalPopup控件声明语法ModalPopup控件还有两个重要方法Show():在需要时用来控制模式窗口的显示效果Hide():在需要时用来控制模式窗口的隐藏效果
  • 30. ModalPopup控件为MyBookShop书籍详情页面添加登录提示功能用户未登录时点“购买” 按钮,出现登录提示窗口
  • 31. ModalPopup控件使用ModalPopup控件实现上述功能非常简单在 “BookDetail.aspx”页面添加如图所示控件把登录部分放 在一个Panel内拖入一个ModalPopup控件
  • 32. ModalPopup控件 … … 用户登录部分控件属性隐藏域查看关键HTML代码为了区分用户是否已登 录,我们先指定到隐藏域演示示例6: ModalPopup控件HTML代码
  • 33. ModalPopup控件protected void imgbtn_Buy_Click(object sender, ImageClickEventArgs e) { if (Session["CurrentUser"] != null) { ......//用户已登录,则进入购物车页面 } else { ModalPopupExtender1.Show(); } }购买按钮事件关键代码显示登录提示protected void imgbtnLogin_ServerClick(object sender, ImageClickEventArgs e) { if (UserManager.Login(this.txt_LoginId.Text,this.txt_LoginPwd.Text, out user)) { ......//登录成功,则进入购物车页面 } else { Response.Write(""); } }登录按钮事件关键代码运行程序,实现登录提示功能
  • 34. Tabs控件Tabs控件简介 选项卡控件,可以在一个页面上显示多个选项卡 使用Tabs控件实现选项卡功能
  • 35. Tabs控件 属性名称 说 明ActiveTabIndex默认显示的选项卡索引Tabs控件的主要属性 ...... ① Tabs控件声明语法该部分只能放TabPanel控件(选项卡面板) 添加3个选项卡面板后的Tabs控件 属性名称 说 明HeaderText选项卡的标题HeaderTemplate选项卡的标题模板ContentTemplate选项卡的内容模板,和DataList控件的模板类似TabPanel控件控件的主要属性
  • 36. Tabs控件在ExtenderControls下新建页面Tabs.aspx 关键HTML代码 运行程序后,只出现 选项卡标题没有内容 在TabPanel控件下添加内容 模板ContentTemplate示例继续添加TabPanel2和TabPanel3的内容即可实现选项卡功能演示示例7: Tabs控件HTML代码
  • 37. 总结Accordion控件的常用属性有哪3个?描述一下动态生成菜单的步骤? CollapsiblePanel控件属性:TargetControlID、ExpandControlID、CollapseControlID、ImageControlID各表示什么意思? ASP.NET AJAX Calendar 控件解决了传统ASP.NET日历控件的哪3大问题? Tabs 控件的ActiveTabIndex属性表示什么意思?