asp.net Ajax--HoverMenu控件使用

简介
    通过名字我们可以看出这是一个菜单控件，当鼠标移动到指定的位置时，在不影响其他的元素的情况下出现一个菜单，并允许用户进行一些操作。

    重要属性
    TargetControlID:要显示菜单的目标控件的ID
    PopupControlID:作为弹出菜单的控件的ID
    HoverCssClass:鼠标移动到目标控件时目标控件的样式
    PopupPosition:弹出菜单所在的位置，共有五个值(bottom,top,left,right,center)
    OffsetX:菜单距离目标控件的位置--横坐标
    OffsetY:菜单距离目标控件的位置--纵坐标
    PopDelay:弹出菜单的延迟时间

    示例1
1 打开vs2005，创建一个AjaxControlToolKit网站，命名为oec2003_HoverMenu
2 打开默认Default.aspx页，切换到设计视图
3 在页面中添加一个TextBox和一个Panel控件，并在Panel控件中添加三个LinkButton控件，如下

< asp:Panel  ID ="Panel1"  runat ="server"  Height ="50px"  Width ="125px" >
             < asp:LinkButton  ID ="LinkButton1"  runat ="server"  OnClick ="LinkButton1_Click" > 日期 </ asp:LinkButton >
             < br  />
             < asp:LinkButton  ID ="LinkButton3"  runat ="server"  OnClick ="LinkButton3_Click" > 时间 </ asp:LinkButton >< br  />
             < asp:LinkButton  ID ="LinkButton2"  runat ="server"  OnClick ="LinkButton2_Click" > 姓名 </ asp:LinkButton >
         </ asp:Panel >

4 在页面中添加HoverMenu控件，并设置其属性，代码如下

< ajaxToolkit:HoverMenuExtender  ID ="HoverMenuExtender1"  runat ="server"  TargetControlID ="TextBox1"  
            OffsetX ="-1"  OffsetY ="-1"  HoverCssClass ="hover"  PopupControlID ="Panel1"  PopupPosition ="bottom" >
         </ ajaxToolkit:HoverMenuExtender >

5 切换到代码视图，在head元素间添加css样式，用来实现鼠标移动到目标控件时的样式，如下

 <style type="text/css">
        .hover
         {} {
           background-color:blue;
           background-repeat:repeat-x;
           background-position:left top;
        }
    </style>

6 前面在Panel中放置了三个LinkButton控件，点击了LinkButton控件后会在文本框中出现相应的内容，LinkButton的单击事件代码如下

  protected  void  LinkButton1_Click( object  sender, EventArgs e)
     {
        TextBox1.Text = DateTime.Now.ToShortDateString();
    }
     protected  void  LinkButton3_Click( object  sender, EventArgs e)
     {
        TextBox1.Text = DateTime.Now.TimeOfDay.ToString();
    }
     protected  void  LinkButton2_Click( object  sender, EventArgs e)
     {
        TextBox1.Text = "oec2003";
    }

7 保存设计，运行程序，将鼠标移动文本框上时，会发现，文本框的样式变成了我们自定义的样式了，而且还会弹出一个菜单，就是Panel控件
点击菜单中的按钮在文本框中就会出现相应的内容


示例2
    上面做了一个HoverMenu控件的简单应用，其实HoverMenu控件也可以用于GridView 控件中来替换编辑功能，让编辑列可以出现在我们自定义的菜单中，下面就来看看是怎么实现的吧
1 在网站中新建一个web 页，命名为oec2003_GridViewHoverMenu.aspx
2 切换到设计视图，在页面中添加ScriptManager和UpdatePanel控件
3 在UpdatePanel控件中添加GridView和SqlDataSource控件，并配置数据源，如下

< asp:SqlDataSource  ID ="SqlDataSource1"  runat ="server"  ConflictDetection ="CompareAllValues"
                    ConnectionString ="<%$ ConnectionStrings:studentConnectionString %>"  DeleteCommand ="DELETE FROM [studentInfo] WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName"
                    InsertCommand ="INSERT INTO [studentInfo] ([stuID], [stuName]) VALUES (@stuID, @stuName)"
                    OldValuesParameterFormatString ="original_{0}"  SelectCommand ="SELECT * FROM [studentInfo]"
                    UpdateCommand ="UPDATE [studentInfo] SET [stuName] = @stuName WHERE [stuID] = @original_stuID AND [stuName] = @original_stuName" >
                     < DeleteParameters >
                         < asp:Parameter  Name ="original_stuID"  Type ="String"  />
                         < asp:Parameter  Name ="original_stuName"  Type ="String"  />
                     </ DeleteParameters >
                     < UpdateParameters >
                         < asp:Parameter  Name ="stuName"  Type ="String"  />
                         < asp:Parameter  Name ="original_stuID"  Type ="String"  />
                         < asp:Parameter  Name ="original_stuName"  Type ="String"  />
                     </ UpdateParameters >
                     < InsertParameters >
                         < asp:Parameter  Name ="stuID"  Type ="String"  />
                         < asp:Parameter  Name ="stuName"  Type ="String"  />
                     </ InsertParameters >
                 </ asp:SqlDataSource >

4 打开GridView控件的编辑列窗口，将stuName 字段设置成模板列
5 我们要在GridView控件中实现两个菜单，一个是在普通模式下的“编辑”和“删除”，一个是在编辑状态下的“更新”和“取消”
6 编辑模板列，会发现在窗口中有ItemTemplate和EditItemTemplate两项，分别在这两项下添加HoverMenu和Panl控件，每个Panel控件中放置两个LinkButton控件，属性设置如下

  < EditItemTemplate >
                                 &nbsp; < asp:TextBox  ID ="TextBox1"  runat ="server"  Text ='<%#  Bind("stuName") % > '> </ asp:TextBox >
                                 < ajaxToolkit:HoverMenuExtender  ID ="HoverMenuExtender2"  runat ="server"  TargetControlID ="TextBox1"  PopupControlID ="Panel2"  OffsetX ="10"  OffsetY ="-1"  PopupPosition ="right" >
                                 </ ajaxToolkit:HoverMenuExtender >
         < asp:Panel  ID ="Panel2"  runat ="server"  Height ="50px"  Width ="125px" >
             < asp:LinkButton  ID ="LinkButton3"  runat ="server"  CommandArgument ="Update"  CommandName ="Update" > 更新 </ asp:LinkButton >
             < asp:LinkButton  ID ="LinkButton4"  runat ="server"  CommandArgument ="Cacel"  CommandName ="Cancel" > 取消 </ asp:LinkButton ></ asp:Panel >
                             </ EditItemTemplate >
                             < ItemTemplate >
                                 < asp:Label  ID ="Label1"  runat ="server"  Text ='<%#  Bind("stuName") % > '> </ asp:Label >
                                 < ajaxToolkit:HoverMenuExtender  ID ="HoverMenuExtender1"  runat ="server"  TargetControlID ="Label1"  PopupControlID ="Panel1"  OffsetX ="10"  OffsetY ="-1"  PopupPosition ="right" >
                                 </ ajaxToolkit:HoverMenuExtender >
         < asp:Panel  ID ="Panel1"  runat ="server"  Height ="50px"  Width ="125px" >
             < asp:LinkButton  ID ="LinkButton1"  runat ="server"  CommandArgument ="Edit"  CommandName ="Edit" > 编辑 </ asp:LinkButton >
             < asp:LinkButton  ID ="LinkButton2"  runat ="server"  CommandArgument ="Delete"  CommandName ="Delete" > 删除 </ asp:LinkButton ></ asp:Panel >
                             </ ItemTemplate >

    在这儿要注意，因为LinkButton要实现对GridView的数据行的编辑功能，所以LinkButton的CommandArgument和CommandName属性要设置成对应的GridView 的方法的名字，如编辑功能对应的CommandName应该设置成Edit.
7 保存设计，运行程序，当鼠标移动到stuName列的数据行上时，就会出现自定义的菜单，可以实现编辑功能。功能和在GridView中启用编辑的功能一样