HoverMenu实现的效果:鼠标移到GridView的某一个单元格,弹出对应的一个详细信息

HoverMenu实现的效果:鼠标移到GridView的某一个单元格,弹出对应的一个详细信息

快速回顾:

1.准备工作:
  1.下载Ajax核心组件和额外的包 下载 
  2.安装
     1.先安装ASPAJAXExtSetup(安装的时候不要打开Visual Studio)
     2.解压AjaxControlToolkit,然后放在我的文档-->Visual Studio 2005-->Projects里
       还可以放一份在C/Inetpub下,装iis的都会有这个目录(这个是不成文的习惯!)
  3.导入类库(AjaxControlToolkit.dll)
    1.打开Visual Studio并新建网站(选ASP.NET AJAX-Enabled Web Site)
      -->右键工具箱(添加选项卡名为(Ajax Extender))-->右键这选项卡(选 选择项)
      -->浏览(在左边点我的项目-->AjaxControlToolkit/SampleWebSite/Bin/AjaxControlToolkit.dll)确定
2.演示:
  1.新建页面:
    1.新建一个模板页,在Ajax Extensions里拖一个ScriptManager,必须是from表单后的第一个控件(大脑)
      把默认Default.aspx删了,再新建一个继承模板页的HoverMenu_Practice.aspx
  2.在页面拖一个GridView(命名为gv_1)
    1.gv_1绑定数据源:点右上面小三角,选择数据源(点下拉框的新建数据源),然后一直点"下一步",
                     直到配置Select语句(选 Category表 并勾选*)
    2.点右上面小三角,编辑列,把CategoryName设置转化为TemplateField,再点右上面小三角,选 编辑模板
      找到CategoryName模板,在它的ItemTemplate里拖一个Panel,里面放HoverMenuExtender和GridView(gv_2)
    3.gv_2绑定数据源(与gv_1相同),直到配置Select语句(选 Product表 并勾选*),
      并且点Where(列选 CategoryId)  运算符为"=" 源为"none" 值为"1",添加,确定,完成
      进入gv_2的数据源的DataBinding事件(右键gv_2的数据源选属性,然后点属性下的闪电图标,双击DataBinding)
        Label categoryId = ((SqlDataSource)sender).Parent.Parent.FindControl("Label1") as Label;
        ((SqlDataSource)sender).SelectParameters["CategoryId"].DefaultValue = categoryId.Text;
    4.右键HoverMenuExtender,设置TargetControlId为Label1,进入源视图
      设置HoverMenuExtender的一个属性PopupControlID="Panel1",
            <cc1:HoverMenuExtender
            ID="HoverMenuExtender1"
            runat="server"
            OffsetX="25"
            OffsetY="20"
            PopupControlID="Panel1"
            TargetControlID="Label1">
      最好HoverMenuExtender的前2个属性保持为ID="HoverMenuExtender1" runat="server"
      并且设置下OffsetX="25" OffsetY="20"目标标签的水平和垂直偏移量(避免覆盖一些内容)
   5.代码:下载

你可能感兴趣的:(GridView)